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 could be
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.
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.
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 surrounding a radio button, make sure to use spans instead of block level elements, for proper HTML validation.
What it looks like
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><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 class="c-plus-minus c-form-control" data-plus-minus>
<label for="id331" class="u-hidden--visually">Enter amount</label>
<button class="c-button c-button--negative c-button--disabled" disabled title="Decrease by 1">-</button>
<input class="c-plus-minus__amount" id="id331" type="number" min="0" max="10" value="0" />
<button class="c-button c-button--positive" title="Increase by 1">+</button>
</div>
</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 class="c-card__foot c-card__foot--center">
<div class="c-plus-minus c-form-control" data-plus-minus>
<label for="id332" class="u-hidden--visually">Enter amount</label>
<button class="c-button c-button--negative c-button--disabled" disabled title="Decrease by 1">-</button>
<input class="c-plus-minus__amount" id="id332" type="number" min="0" max="10" value="0" />
<button class="c-button c-button--positive" title="Increase by 1">+</button>
</div>
</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><div class="c-card">
<div class="c-card__body">
<h2 class="c-card__title">Category A</h2>
<p class="c-card__subtitle">400–500 kr</p>
<details>
<summary>Mer information <span class="c-pill u-color-blue-lightest"><span>Ankomsttid: 20:00</span></span></summary>
<div class="c-box c-box--info c-box--small">
<p>Lorem ipsum dolor sit amet</p>
<p>Ipsum dolor sit amet in consectetur</p>
</div>
</details>
<details>
<summary>Välj biljetter <span class="c-pill u-color-yellow-lighter"><span>2 st Hockeytugg, ståplats</span></span> <span class="c-pill u-color-yellow-lighter"><span>1 st Hockeytugg, utan mat</span></span></summary>
<div class="c-tile">
<div class="c-tile__head c-tile__head--vertical">
<h3 class="c-tile__title">Hockeytugg, ståplats</h3>
<span class="c-tile__label u-text--nowrap">500 kr</span>
</div>
<div class="c-tile__body">
<div class="c-plus-minus c-form-control" data-plus-minus>
<label for="id333" class="u-hidden--visually">Enter amount</label>
<button class="c-button c-button--negative" title="Decrease by 1">-</button>
<input class="c-plus-minus__amount" id="id333" type="number" min="0" max="10" value="2" />
<button class="c-button c-button--positive" title="Increase by 1">+</button>
</div>
</div>
</div>
<div class="c-tile">
<div class="c-tile__head c-tile__head--vertical">
<h3 class="c-tile__title">Hockeytugg, utan mat</h3>
<span class="c-tile__label u-text--nowrap">300 kr</span>
</div>
<div class="c-tile__body">
<div class="c-plus-minus c-form-control" data-plus-minus>
<label for="id334" class="u-hidden--visually">Enter amount</label>
<button class="c-button c-button--negative" title="Decrease by 1">-</button>
<input class="c-plus-minus__amount" id="id334" type="number" min="0" max="10" value="1" />
<button class="c-button c-button--positive" title="Increase by 1">+</button>
</div>
</div>
</div>
<div class="c-tile">
<div class="c-tile__head c-tile__head--vertical">
<h3 class="c-tile__title">Ungdom</h3>
<span class="c-tile__label u-text--nowrap">200 kr</span>
</div>
<div class="c-tile__body">
<div class="c-plus-minus c-form-control" data-plus-minus>
<label for="id335" class="u-hidden--visually">Enter amount</label>
<button class="c-button c-button--negative c-button--disabled" disabled title="Decrease by 1">-</button>
<input class="c-plus-minus__amount" id="id335" type="number" min="0" max="10" value="0" />
<button class="c-button c-button--positive" title="Increase by 1">+</button>
</div>
</div>
</div>
</details>
</div>
<div class="c-card__foot">
<div class="o-grid o-grid--align-center o-grid--bleed">
<div class="o-grid--align-start o-grid__col-8">
<span class="c-pill u-color-green-lightest"><span>Finns</span></span>
</div>
<div class="o-grid__col-4 o-grid--align-end">
<a href="#" class="c-button c-button--primary">Välj</a>
</div>
</div>
</div>
</div>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.