Card

ECT approvedUpdated May 23, 2026

Description

Single subject focus: A card is a container for content and actions about a single subject.
Concise summary: A card provides a quick preview and overview of the content it links to.
Interactivity: The card itself is interactive and it should represent a single primary action. Any additional interactive elements must be placed in the optional footer to avoid nested interactions.
Navigation: A card is always interactive and can be used to open another page, such as a detail page.
Visual appeal: A card often has a distinct visual style that sets it apart from other content elements.
Flexibility: A card can be used to display a variety of content, such as images, text, and data.
Layout: A card can use the Layout component (flexbox CSS model, through the Card: flexbox variant) to achieve responsive designs by arranging swappable blocks within flexible containers.

Warning

Choosing the right component If you need a container that is non-interactive, use the Tile component.

Figma library

Component preview

Information

Loading Carbon component...

Open in Storybook

No live controls configured for this component.

Anatomy

A card can contain any type of content

Anatomy

Size

General

The card height adjusts to the content it contains.
The default card width is 100 percent of the parent container.
It's possible to wrap a group of cards into a grid, depending on the available height and width of the parent container.

Padding

The content section padding is available in different sizes: None, XS, S, M, L.

Type

Standard

Outlined

States

Warning

States are visual indicators used to communicate a component’s interaction status. Learn more about commonly used component states in our General specs

Component-specific states

States

Variations

Not draggable

When not draggable, a card is fixed in place and cannot be dragged or moved.

Roundness

Moderate

Curved

Content variations

Simple

Flexbox

Color mode

Light

Dark

Dos and don'ts

Technical example

Card component implemented in Carbon.

See variations of the card component in Carbon

Requirements

Users should be able to:

Navigate to elements within the card using assistive technology.
Activate elements within the card to open another page.
Understand the purpose of card content through accessible headings, labels and descriptions.
Perceive the card as a distinct section of content.

Interactions

Mouse interactions

The whole card region should be clickable, allowing users to navigate to new pages.
Any interactive elements within the card should be clickable without triggering the action of the card.
Users should receive visual feedback that the card is interactive through clear hover states.

Keyboard interactions

The card itself should not be focusable. An interactive element with the same purpose should be available within the card that keyboard-only users can navigate to.
Tab. Moves focus from the previous interactive element on the page to an interactive element within the card.
Navigate between the interactive elements within the card using tab.
Enter or Space.
Activate any links in the card using Enter.
Activate any buttons in the card using the Space or Enter.
For draggable cards, an alternative method must be provided for any actions performed by drag.
For elements that lead to a new page, a link must be used.

The card itself should not be interactive for screen reader users. If the entire card acts as a link, then its entire content will be announced at once to screen reader users, causing lengthy and confusing announcements.
Each card should have a heading that defines it as a distinct section of content.
Each card should contain an interactive element such as a link or a button so that screen reader users can action the card content.

Design considerations

All cards should contain a heading to aid screen reader user navigation.
All text within the card should have 4.5:1 minimum contrast ratio with the background.
Use a consistent layout to help users distinguish cards from other elements such as tiles.
Use clear visual hover and selected states so that interactive elements can be distinguished from non-interactive elements.
All cards must contain a clear 'call to action'.

Development considerations

The entire card element should be made clickable for mouse users using an onclick in JavaScript.
For any cards containing decorative images, those images should have nulled alt text alt=””.
The ‘call to action’ within the card should be the only keyboard-focusable element.

Date	Changes
February 2026	Updated Description.Added Dos and Don’ts examples for secondary actions in cards.
August 2025	Updated guidance on the accessibility tab.
April 2025	Updated guidance on the accessibility tab.
March 2025	Created two variants ‒ Card: simple and Card: flexbox.With the simple variant, designers can swap a DS or custom component they have created.With the flexbox variant, designers can start constructing more complex layouts with DS and custom components.Removed footer option
October 2024	Updated Anatomy by added draggable handle and updated the image.Updated Size.Updated States and added the image.Updated Example to Variations, added Not draggable and On surface.Updated Dos and don'ts image.
September 2024	New version created. Previous version archived in the frozen Product design system.