Cards

Choosing a card pattern

Use Selectable Cards for checkbox or radio selection and Tiles for clickable navigation. Cards themselves are content containers.

Text card

The text card displays text content with a secondary background. The action slot anchors to the bottom, keeping layouts consistent even when cards have varying amounts of content.

Use <article> for standalone cards or <li> when rendering a list.

Private lease EX60 with included insurance

Private Lease

From 8 495kr/month

Shop

Show codeHide code

<!-- Set your own height or min-height. The card sizes to its content by default -->
<article class="text-card" style="height: 400px; max-width: 375px">
  <h3 slot="title">Private lease EX60 with included insurance</h3>
  <p slot="subtitle">Private Lease</p>
  <p slot="body">From 8 495kr/month</p>
  <a class="link-underlined" slot="action" href="#">Shop</a>
</article>

Slots

This component uses slots to give content built-in styling.

• slot="title" – Primary heading
• slot="subtitle" – Secondary text
• slot="body" – Supporting text
• slot="action" – Link or button

title subtitle body action

Show codeHide code

<article class="text-card" style="height: 300px">
  <code slot="title">title</code>
  <code slot="subtitle">subtitle</code>
  <code slot="body">body</code>
  <code slot="action">action</code>
</article>

Sizing

Text cards don’t have a built-in height. They size to their content by default. Set an explicit height or min-height on the card (or its container) to add whitespace and separate the action slot from the body content.

• Standalone card: set height or min-height directly on the card element
• Grid of cards: set height or min-height on the grid container. All cards in the row stretch equally, aligning the action slots at the bottom

The height: 400px in the examples above is just for demonstration. Choose a value that suits your content and layout.

Grid layout

Use CSS grid utilities to arrange multiple cards. Give the grid container a fixed height so the action slots align at the bottom across cards. Use <li> elements with the text-card class inside a <ul>.

Media card

The media card adds an image above the text content. The media slot defaults to a 1 / 1 aspect ratio with object-fit: cover, making it suitable for product imagery.

ES90

Electric

From 5990 kr / month or 670 000 kr

Explore

Show codeHide code

<article class="media-card" style="max-width: 425px">
  <img
    slot="media"
    class="img object-contain"
    src="/images/cars/thumbnails/es90.avif"
    alt=""
  />
  <h3 slot="title">ES90</h3>
  <p slot="subtitle">Electric</p>
  <p slot="body">From 5990 kr / month or 670 000 kr</p>
  <button class="link-underlined" slot="action" type="button">Explore</button>
</article>

Slots

This component uses slots to give content built-in styling.

• slot="media" – Image or video
• slot="title" – Primary heading
• slot="subtitle" – Secondary text
• slot="body" – Supporting text
• slot="action" – Link or button

media

title subtitle body action

Show codeHide code

<article class="media-card" style="max-width: 360px">
  <div
    slot="media"
    class="bg-feedback-gray flex items-center justify-center h-full"
  >
    <code>media</code>
  </div>
  <code slot="title">title</code>
  <code slot="subtitle">subtitle</code>
  <code slot="body">body</code>
  <code slot="action">action</code>
</article>

Grid layout

Use the same semantic list structure and grid utilities as a text-card grid. Each media card stretches with its grid row so actions remain aligned.

Accessibility

• Use <article> for standalone cards that make sense on their own, or <li> inside a <ul> for card groups
• Provide descriptive alt text for product images, or use alt="" with aria-hidden="true" for decorative images
• Ensure action links have meaningful text. Avoid generic “Click here” labels
• Use appropriate heading levels (<h2>, <h3>, etc.) based on the page hierarchy
• Cards are non-interactive containers. Use Selectable Cards for checkable or selectable patterns

CSS reference

Class	Description
text-card	Text-only card with secondary background and bottom-anchored action.
media-card	Card with image (1:1 cover) and text content. Suitable for product listings.