Card

Example

Overview

Cards are versatile, modular components used to group and display related content and actions. They act as entry points to more detailed information, making them ideal for presenting concise, scannable summaries of content or tasks. Cards can contain a mix of text, imagery, and interactive elements, and are designed to flexibly support a variety of layouts and use cases.

When to use

• To visually group related content or functionality.
• To highlight features, content summaries, etc.
• To support interactivity such as buttons or links.

When not to use

Cards reside on the same plane as the page background and do not use elevation. They are used to organise essential information and maintain the same visual hierarchy as surrounding content on the page.

Do not add drop shadows to cards and use them to display secondary information, actions, or notifications. For scenarios requiring elevation, use components such as modals instead, as they are specifically designed for these use cases.

Variants

Cards support multiple functions and are available in three variants: base, clickable, selectable. These flexible variants allow the card component to adapt to a wide range of use cases, especially when building more complex features.

Padding

For core and clickable cards, the padding can be modified inside the card body to adjust internal spacing, making the card feel more spacious or compact depending on your design needs.

Styling

Cards can be styled using either the default white background or a light grey background, depending on context. The white surface provides a clean, neutral base for primary content, while the light grey option helps separate cards from similarly toned surroundings or indicate a different visual hierarchy.

Anatomy

Interactions

Mouse

Core cards are not operable by mouse unless they contain interactive elements, such as buttons or links. These embedded elements can be clicked and activated.

Keyboard

• Core cards do not receive focus unless they include interactive elements.
• Pressing Tab moves focus forward through the interactive elements within the core card in a logical order.
• Pressing Shift + Tab moves focus backward through the interactive elements within the core card.
• Pressing Enter activates the currently focused interactive element inside the core card.

Clickable areas

Core cards can include interactive elements like links or buttons, which users can click to access additional content or actions.

Clickable card

Clickable cards can be used as navigational elements that take users to a new page. In these cases, the entire card is interactive. For accessibility reasons, clickable cards should not include separate internal calls-to-action (CTAs), but they can feature icons, or media such as illustrations or images.

Anatomy

Interactions

Mouse

Core cards are not operable by mouse unless they contain interactive elements, such as buttons or links. These embedded elements can be clicked and activated.

Keyboard

• Pressing Tab moves focus forward through clickable cards in a logical order.
• Pressing Shift + Tab moves focus backward through clickable cards in a logical order.
• Pressing Enter activates the card and navigates to its destination.

Clickable areas

Clickable cards can be activated by clicking anywhere within the card’s container.

Single-select

Use single-select cards when the user needs to choose only one option from a group.

Multi-select

Use multi-select cards when users can choose more than one option from a group.

Anatomy

Interactions

Mouse

The selectable card is activated by clicking anywhere within its container.

Keyboard

• Pressing Tab moves focus forward through selectable cards in a logical order.
• Pressing Shift + Tab moves focus backward through clickable cards in a logical order.
• Pressing Enter selects the card.

Clickable areas

Clickable cards can be activated by clicking anywhere within the card’s container.

Alignment

Images can be placed at the top of a card or aligned to the left or right, depending on the desired layout and emphasis.

Emphasis tile

The emphasis tile is a supporting element used within a card to highlight secondary or supplementary information. It creates a visually distinct section by introducing a subtle contrast in background tone, helping the content stand out without disrupting the overall layout.

It’s useful for drawing gentle attention to related details, metadata, or contextual information, giving it more prominence than surrounding content while maintaining a cohesive and contained structure.