# Card

The card groups related content into a single container.


## Overview

### Variants

### Brand 01

Can only be used in special contexts and with specific content. This will be added as guidelines soon. 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.

### Do's and don'ts
