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.
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 validation
What it looks like
Code examples
html
<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>html
<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>html
<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>html
<div class="c-card c-card--rounded">
<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 c-card__body--rounded">
<time date="2024-03-19" class="c-card__date">2024-03-19</time>
<h3 class="c-card__title">New Card</h3>
<h4 class="c-card__subtitle">Subtitle</h4>
</div>
<button type="button" class="c-button c-button--options u-margin--small u-position--top-right"><svg xmlns="http://www.w3.org/2000/svg" width="4" height="18" viewBox="0 0 4 18" fill="none"><path d="M2 2.92C2.26522 2.92 2.51957 2.81886 2.70711 2.63882C2.89464 2.45879 3 2.21461 3 1.96C3 1.70539 2.89464 1.46121 2.70711 1.28118C2.51957 1.10114 2.26522 1 2 1C1.73478 1 1.48043 1.10114 1.29289 1.28118C1.10536 1.46121 1 1.70539 1 1.96C1 2.21461 1.10536 2.45879 1.29289 2.63882C1.48043 2.81886 1.73478 2.92 2 2.92ZM2 9.96C2.26522 9.96 2.51957 9.85886 2.70711 9.67882C2.89464 9.49879 3 9.25461 3 9C3 8.74539 2.89464 8.50121 2.70711 8.32118C2.51957 8.14114 2.26522 8.04 2 8.04C1.73478 8.04 1.48043 8.14114 1.29289 8.32118C1.10536 8.50121 1 8.74539 1 9C1 9.25461 1.10536 9.49879 1.29289 9.67882C1.48043 9.85886 1.73478 9.96 2 9.96ZM2 17C2.26522 17 2.51957 16.8989 2.70711 16.7188C2.89464 16.5388 3 16.2946 3 16.04C3 15.7854 2.89464 15.5412 2.70711 15.3612C2.51957 15.1811 2.26522 15.08 2 15.08C1.73478 15.08 1.48043 15.1811 1.29289 15.3612C1.10536 15.5412 1 15.7854 1 16.04C1 16.2946 1.10536 16.5388 1.29289 16.7188C1.48043 16.8989 1.73478 17 2 17Z" stroke= var(--on-surface) stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
</div>html
<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>html
<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-auto">
<span class="c-pill u-color-green-lightest"><span>Finns</span></span>
</div>
<div class="o-grid__col-auto 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.