Tile | UCLA Web Components

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>