Components · Content
Tiles
Summary cards showing a count, a title and a route into the underlying records. The landing-page pattern for “here is what needs your attention”.
Figma source: Tiles ↗Examples
Tile grid — resize the window to see it reflow
<div class="cds-tile-grid">
<div class="cds-tile">
<span class="cds-tile__count">12</span>
<h3 class="cds-tile__title">Awaiting my approval</h3>
<p class="cds-tile__description">Proposals routed to you.</p>
<a class="cds-tile__action" href="/approvals">Review proposals →</a>
</div>
</div>Layout
The Figma annotation describes reflow rather than a fixed column count: “Tile would fill the negative space here if page size allows for tile + padding to fit. On a 1920px screen, 2 more tiles could fit on the first row, while only one would be on the first row” at the narrower size.
That is a fluid grid, and it is implemented as one — auto-fill with a
220px minimum, so tiles gain columns as the viewport grows rather than stretching:
The grid rule
.cds-tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--spacing-16);
}
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--spacing-16);
}
Usage
When to use it
- Use on landing views to surface what needs attention, with a count.
- Make the count the largest thing in the tile — it is what the user scans for.
- Give every tile a route into the records it counts.
- Keep descriptions to one line.
When not to use it
- Do not use tiles for content the user reads rather than acts on.
- Do not show a tile with a count of zero unless its absence would be confusing.
- Do not fix the number of columns; let the grid reflow.
- Do not make the whole tile a link if it also contains a link — nested interactive elements are ambiguous to operate.
Accessibility
- Tile titles are real headings, so the grid is navigable by heading.
- The action link’s text should make sense alone — “Review proposals”, not “View”.
- Where a count is the point, include it in the link’s accessible name or adjacent text so it is not lost: “Review 12 proposals awaiting approval”.
- Either the tile or the link is the click target, not both.
Tokens consumed
| Token | Applied to | Resolves to |
|---|---|---|
--tile-card-background | Tile surface | --color-white |
--tile-count-text | The number | --primary-brand-color |
--tile-title-text | Title | --color-black |
--tile-description-text | Description | --color-gray-500 |
--tile-action-text | Action link | --primary-brand-color |
--tile-background | Grid backdrop | --color-gray-300 |