Card
When to use it
The Card component is used when what you want is something that looks like a "card" – a paper like area with smoothed corners that elevate just a bit above its surface. It can be a simple content block, an actionable item or a responsive summary with several content regions.
Existing Cards continue to work with a direct c-card__body, with or without a c-card__foot. Use c-card__layout only when a Card needs to arrange multiple bodies responsively.
Cards are always white (in light mode) and should never be combined with color utility classes to ensure we don't risk breaking dark mode support.
A card should preferably contain some kind of call to action button.
Variants
The modifier .c-card--cover creates a variant with a full width image covering the card body.
Using .c-card--selected indicates a selected state which can be useful when the card itself acts as a Label button.
Responsive layouts
Add an optional c-card__head before c-card__layout when the Card needs a full-width header. Put one or more c-card__body regions inside c-card__layout. It stacks them by default and changes to two columns when the Card itself is at least 500px wide. Add c-card__layout--vertical to keep the regions stacked.
The layout wrapper owns the outer padding. Its direct body regions have no additional padding, so two columns have one intentional gap between them rather than doubled padding. The layout uses a fixed --space-m gap; gap utilities on the Card do not affect the layout wrapper or nested Flex/Grid components. You can still apply a gap utility directly to an individual c-card__body when its contents need a different gap.
There are no restrictions on where titles, labels, controls or nested Flex layouts belong inside the head and body regions. Choose the structure that makes sense for the content.
WARNING
The variant .c-card--rounded is deprecated from version 2.25.1 but fear not – its visual appearance is now the default for all cards.
Instead of .c-card__body--horizontal, use c-card__layout around multiple c-card__body regions to create a responsive wide Card.
TIP
To override the default border radius, set --card-radius to a different value. It defaults to --surface-radius-large.
INFO
If using the Card component on label elements, make sure to use spans instead of block level elements, for proper HTML validation. (Also, see Label button for similar use cases.)
What it looks like
Responsive layouts
Code examples
<div class="c-card">
<a href="#info" class="c-card__body">
<h2 class="c-card__title">Kapten Röd turné: Hundralappen!</h2>
</a>
<div class="c-card__foot">
<a href="#" class="c-button c-button--primary c-button--small c-button--round">Köp</a>
<span class="c-card__label">25 - 28 maj, Braskereidfoss</span>
</div>
</div><div class="c-card c-card--overlay">
<div class="c-card__image c-card__image--cover">
<img loading="lazy" alt="" src="../temp/skus/bilar.jpg" width="400" />
</div>
<div class="c-card__body">
<h2 class="c-card__title">Candy</h2>
</div>
</div><article class="c-card">
<div class="c-card__head">
<span class="c-label">Settlement status</span>
<h2 class="c-card__title u-font--large">Summer Stage Festival</h2>
<p class="u-margin-bottom--none u-font--smaller">Payout is scheduled after the final sales report has been approved.</p>
</div>
<div class="c-card__layout">
<div class="c-card__body">
<span class="c-label">Net sales</span>
<strong class="u-font--large">SEK 184,250</strong>
</div>
<div class="c-card__body">
<span class="c-label">Status</span>
<span class="c-pill">Awaiting approval</span>
</div>
</div>
<footer class="c-card__foot">
<div class="o-flex o-flex--justify">
<span class="u-font--smaller">Updated 12 minutes ago</span>
<a href="#" class="c-button c-button--secondary c-button--small">Review report</a>
</div>
</footer>
</article><article class="c-card u-gap--xl">
<div class="c-card__head">
<div class="o-flex o-flex--justify">
<div>
<span class="c-label">Event capacity</span>
<h2 class="c-card__title u-font--large">Friday, 18 October · Main Hall</h2>
</div>
<span class="c-pill">On sale</span>
</div>
</div>
<div class="c-card__layout c-card__layout--vertical">
<div class="c-card__body">
<span class="c-label">Available</span>
<strong class="u-font--large">236</strong>
</div>
<div class="c-card__body">
<span class="c-label">Reserved</span>
<strong class="u-font--large">48</strong>
</div>
</div>
</article><div class="c-card c-card--cover">
<div class="c-card__image c-card__image--scale-down">
<img loading="lazy" alt="" src="../temp/skus/bilar.jpg" width="400" />
</div>
<div class="c-card__body c-card__body--scale-down">
<h2 class="c-card__title">Card 1</h2>
</div>
</div>
<div class="c-card c-card--cover">
<div class="c-card__image c-card__image--cover">
<img loading="lazy" alt="" src="../temp/skus/cola.jpg" width="400" />
</div>
<div class="c-card__body">
<h2 class="c-card__title">Card 2</h2>
</div>
</div><label class="c-card c-card--cover c-card--selected">
<span class="c-card__image">
<img loading="lazy" alt="" src="../temp/skus/gottoblandat.jpg" width="400" />
<input type="checkbox" name="sku" value="1" class="u-hidden--visually" />
</span>
<span class="c-card__body">
<strong class="c-card__title">Card, selected</strong>
<span>Lorem ipsum dolor sit amet in consectetur</span>
</span>
</label>Accessibility notes
When a Card acts as a link, you'll be linking large amounts of text, which can be an inconvenience for those using screen readers. A way to avoid this is to link only the heading or a button in the card foot e.g. This can be in conflict when wanting to "click the whole card" so it's not an advice super easy to follow.
However, if you want to use links within the body text of the Card, then you must use links elsewhere than on the Card itself – nesting <a> elements is not possible in HTML and will break the layout completely.