# Card

The card groups related content into a single container.


## Overview

### Variants

### Brand cards

Brand-01 and brand-02 can only be used in special contexts and with specific content. This will be added as guidelines. Since we do not have any matching action components for now you can only slot text, link and icon.

### Interactions

#### Default

The entire card area is not clickable. The slotted content can contain one or several clickable elements, such as button and link.

#### Linked

The entire card area is clickable. The slotted content can include one decorative element. This element must be inert (non-interactive) since the whole card already functions as the clickable target.

### Usage

Don't mix linked and default cards in the same group or grid. Interactions should be consistent across a set of cards to ensure a predictable and accessible experience. If you must use both in the same view, do it with care, for example, by visually separating them or clearly communicating the interaction difference.

#### Why this matters:

- **Consistency** – users should understand how a card behaves before they interact with it. Mixing types can make it unclear whether the whole card or only parts are clickable.
- **Accessibility** – linked cards rely on different interaction logic and focus handling compared to cards with multiple actions. Mixing them can create confusion for keyboard and screen-reader users.
- **Visual clarity** – linked cards use hover and press states that don’t apply to default cards, which can create inconsistent visual feedback.

 

### Card on card

Cards can be placed inside other cards to create hierarchy and visual grouping. This also goes for a card inside a modal since the card and the modal have the same base tokens. To support this, we use elevated color tokens that ensure proper contrast and consistency across both light and dark mode.

#### How it works

When nesting cards or placing cards in modals, the inner card should always contrast against its parent background. This is handled through paired color tokens and creates a clear visual separation between layers without relying on shadows alone.  

#### Light mode behavior

Always use the “-2” token for the nested card to maintain correct contrast and hierarchy.

- A **grey card (neutral-01)** can contain a **white card (neutral-01-2)**
- A **white card (neutral-02)** can contain a **grey card (neutral-02-2)**

 

#### Dark mode behavior

In dark mode, base card variants share the same surface value. The elevated variants (“-2”) are adjusted to create subtle contrast between layers. This ensures that nested cards remain distinguishable and maintain a clear sense of hierarchy.

- **Neutral-01** and **Neutral-02** share the same base value
- **Neutral-01-2** and **Neutral-02-2** use slightly adjusted values to create elevation and separation between nested cards. (MIGHT NEED UPDATE!)

 

#### In Figma

Elevated cards are available as **variants** of the Card component. We call them ”Raised”. 

- Select the appropriate **variant** based on the card’s context (base or nested).
- Use the **“-2” variants** when placing a card inside another card or modal.
- Avoid manually changing fill colors, always switch variants instead.

(A card instance in a card needs a bit of a trick. You need to add the card instance in your slot AFTER you place the slot in your card. This will be much easier as soon as we rebuild the cards to use the new feature with actual slots, that will remove the obsticle of you needing to create a lot of slot components).

#### Card on card guidelines

- Use nested cards to group related content or create visual hierarchy.
- Always use the paired “-2” variants/tokens for inner cards.
- Think of the “-2” variants as an elevation step, they define how surfaces stack.

### Do's and don'ts