Tile

bitbucket Report an Issue Slack 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

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>