Tile

Report an Issue Join the Slack Discussion

Large, descriptive link with optional ambient image.

Usability Guidance

• Use plain language when writing headlines and descriptions.
• Avoid technical language, acronyms or jargon people don’t understand.
• Front-load the first 2 words of your headlines for easy eye scanning.
• Limit headlines to one phrase or 2 lines – there is a suggested 32 maximum character limit.
• Use original images rather than stock images to maintain credibility and trust among your users.

Accessibility Requirements

• Link the tile’s headline, heading or title to provide the most succinct description to screen readers and search engines. Both technologies use links to understand and navigate document structure.
• Avoid using generic headlines like “read more” or “view details”.
• Only use one link per tile.

Further Reading

• https://www.webaxe.org/resources-for-developing-accessible-cards-tiles/
• https://www.davidmacd.com/blog/what-is-pure-decoration-alt-text-in-wcag.html

Code

<div class="tile">
  <a class="tile__link" href="https://ucla.edu">
    {{ title }}
    <img class="tile__image" src="/img/examples/tile-example-1.jpg" alt="Royce Hall">
  </a>
</div>

<div class="tile short">
  <a class="tile__link" href="https://ucla.edu">
    {{ title }}
    <img class="tile__image" src="/img/examples/tile-example-1.jpg" alt="Royce Hall">
  </a>
</div>

<div class="tile">
  <a class="tile__link" href="https://ucla.edu">
    {{ title }}
  </a>
</div>

<div class="tile short">
  <a class="tile__link" href="https://ucla.edu">
    {{ title }}
  </a>
</div>