Cards
A card component goes inside a block element (like
div or section) with a class name of
card__container
Card content goes inside a block element with a class name of
card__body
Accessibility
Cards are presentational containers and add no semantics of their own. Use heading levels that follow the
page outline; do not pick card__heading for its size alone.
For a whole-card link, prefer wrapping the card in a single <a> with clear link text (as
shown at the end of this page) over the legacy -link modifier. To keep richer content while
making the card clickable, use stretched-link — see the Utilities
page.
Example:
<div class="card__container">
<div class="card__body">
<h2 class="card__heading">Optional card heading</h2>
<p class="h-text-last">Your content here</p>
</div>
</div>
Produces the following:
Optional card heading
Your content here
Other modifiers
Additional modifiers can style the card in different ways:
-subtle-primary-highlight-error
The modifiers are added as an additional class alongside card__container
Examples of these modifiers follow:
A card with the -subtle modifier.
A card with the -primary modifier.
A card with the -highlight modifier.
A card with the -error modifier.
A card that is also a link using -link modifier.
On hover, there is an effect; this is not the most accessible though but has been used historically.
A card inside an a element. Use when you have one link, e.g using flex related styles in the containing
card__body and card__action in the following:
View