Cards

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 are free-forming and 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. For consistency, use one of the aspect ratios from the media component where possible: 1/1, 4/5, 2/3, 4/3, 3/2, 16/9, or 21/9.

• 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.

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>

Sizing

The media card’s size is defined by the media’s aspect ratio. Override the default 1 / 1 ratio with aspect ratio utility classes on the media element, such as aspect-4/5 or aspect-16/9, for compact or tall layouts.

Media type

The media card’s media slot accepts an image or a video. Both use the aspect-ratio and object-fit utilities documented in Media.

Grid layout

Media cards are designed to be used in a grid of 2, 3, or 4 columns, stacked vertically, or inside a Reel.

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

Spacing

In vertical columns and grids, cards can use gridded-element-gap for a tighter fit or the more traditional gutter depending on context. See spacing tokens for details.

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.