Tile

Report an Issue Join the Slack Discussion

Large, descriptive link with optional ambient image.

Usage

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 1 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

• Resources for developing accessible cards and tiles (Web Axe)
• When to use null alt text (CanAdapt)

Code

<div class="tile">
  <a class="tile__link" href="https://ucla.edu">
    {{ title }}
    <img class="tile__image" src="{{path '/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="{{path '/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>