Card

Shows the default card border. Use when the card needs a clear container that stands apart from the surrounding layout.

Removes the default card border. Use when the page layout already provides enough separation and the border feels too heavy.

Uses the standard card background. Use for neutral card layouts that should not draw extra attention.

Adds a subtle tinted background. Use to add gentle emphasis while keeping the same structure and content hierarchy.

The base card variant is text-first and flexible. Use it when content matters more than supporting media.

The icon card variant pairs content with a simple symbol. Use it when a small visual cue helps users recognise the card’s purpose quickly.

Thumbnail card title Supporting description for the thumbnail card.

The thumbnail card variant uses a compact image beside the content. Use it when a small visual preview needs to sit alongside concise supporting copy.

Image card title Supporting description for the image card content.

The image card variant uses a larger visual preview above the content. Use it when the image needs to carry part of the story alongside short supporting copy.

Card title Media sits above the content in the default vertical layout.

Stacks the media above the content. Use when the card should follow a more traditional vertical layout.

Card title Media moves to the left when the card uses a horizontal layout.

Places the media beside the content. Use when you need a denser layout with media next to the body instead of above it.

Card title The image appears above the content in a vertical card. Card title The image appears to the left of the content in a horizontal card.

Places the image before the content. Use when the image should appear above in vertical cards or to the left in horizontal cards.

Card title The image appears below the content in a vertical card. Card title The image appears to the right of the content in a horizontal card.

Places the image after the content. Use when the image should appear below in vertical cards or to the right in horizontal cards.

A badge sits in the top-right area of the card. Use it to surface status, count, or lightweight metadata without taking over the card body.

Removes the top-right badge area. Use when the card does not need extra status or metadata there.

Secondary text sits below the description as a supporting row. Use it when the card needs an extra line for metadata, status, or supporting details.

Removes the secondary text row. Use when the title and description already provide enough context on their own.

Removes the footer action area. Use when the card is purely informational and does not need a follow-up action.

A footer link provides a lightweight next step. Use it when the action does not need strong visual emphasis.

A footer button gives the action more emphasis than a text link. Use it when the card needs a clearer call to action.

A full width button spans the footer and carries the strongest emphasis. Use it when the primary action should stand out clearly.

A footer badge carries compact status or label content. Use it when the footer needs a short classification instead of an action.

Footer text provides supporting metadata instead of an action. Use it for dates, status, or other small supporting details.

Uses a larger heading level for the title. Use when the card title needs stronger emphasis in the layout.

Uses a lighter heading level for the title. Use when the card sits in a denser layout and the title should feel slightly lighter.

Adds a short label above the title. Use to show a category or supporting context before the title.

Removes the label above the title. Use when the title already provides enough context without extra support.

Description text sits below the title as supporting copy. Use it when the card needs extra explanation or context.

Removes the supporting text area. Use when the card can stay compact and the title or action is enough on its own.