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