Card

A card is a flexible and extensible content container. It groups related information and actions about a single subject into a digestible, self-contained unit. Cards are a foundational component for creating scannable, grid-based layouts.

When to use

Displaying a collection of content

Use to present a collection of items with varied content, such as articles, products, or search results, allowing users to easily compare and browse.

Displaying a collection of content

Use to present a collection of items with varied content, such as articles, products, or search results, allowing users to easily compare and browse.

Displaying a collection of content

Use to present a collection of items with varied content, such as articles, products, or search results, allowing users to easily compare and browse.

Summarizing information

When you need to show a summary of content that links to a more detailed view (e.g. a blog post summary that links to the full article).

Summarizing information

When you need to show a summary of content that links to a more detailed view (e.g. a blog post summary that links to the full article).

Summarizing information

When you need to show a summary of content that links to a more detailed view (e.g. a blog post summary that links to the full article).

Creating modular layouts

Cards are ideal for creating responsive, grid-based layouts that reflow easily on different screen sizes.

Creating modular layouts

Cards are ideal for creating responsive, grid-based layouts that reflow easily on different screen sizes.

Creating modular layouts

Cards are ideal for creating responsive, grid-based layouts that reflow easily on different screen sizes.

When to avoid

For simple lists

If the content is a simple, homogeneous list (e.g. a list of names or files), a standard menu component might be more appropriate and less visually heavy.

For simple lists

If the content is a simple, homogeneous list (e.g. a list of names or files), a standard menu component might be more appropriate and less visually heavy.

For simple lists

If the content is a simple, homogeneous list (e.g. a list of names or files), a standard menu component might be more appropriate and less visually heavy.

Highly detailed content

Avoid overloading a single card with too much information. If the content is too complex for a summary, it may be better suited for a dedicated page.

Highly detailed content

Avoid overloading a single card with too much information. If the content is too complex for a summary, it may be better suited for a dedicated page.

Highly detailed content

Avoid overloading a single card with too much information. If the content is too complex for a summary, it may be better suited for a dedicated page.

Specifications

Style

Elevation

Use a shadow to create depth off the surface layer. Best for layouts where cards need to stand out.

Outline

Uses a simple 1px border to contain the content for a flatter, more minimalist UI.

Elevation

Use a shadow to create depth off the surface layer. Best for layouts where cards need to stand out.

Outline

Uses a simple 1px border to contain the content for a flatter, more minimalist UI.

Elevation

Use a shadow to create depth off the surface layer. Best for layouts where cards need to stand out.

Outline

Uses a simple 1px border to contain the content for a flatter, more minimalist UI.

Elevation

Use a shadow to create depth off the surface layer. Best for layouts where cards need to stand out.

Outline

Uses a simple 1px border to contain the content for a flatter, more minimalist UI.

Slot

Top

Bottom

None

Top

Bottom

None

Top

Bottom

None

Anatomy

Slot

The header is a flexible slot for replaceable content (like an image) and can be hidden for a minimal, text-only card.

Border

Use the default border for a defined edge, or remove it and use a shadow for cards that need to appear elevated.

Text content

The content block containing a title and description can be positioned either above or below the header slot.

Button

A single, optional call-to-action button. The style of the button can be any (Primary, Outline, or Ghost).

Badge

An optional badge can be used to provide secondary status information.

Header button

A button with a set of three vertical dots (or a similar icon) that opens a menu containing secondary or contextual actions related to the card's content. It is typically hidden until accessed.

Value

Card