Card

Displays a card with header, content, and footer

SSR mode

Examples

Default

Card Title

Card description goes here.

This is the card content area.

Elevation

None

Base

Styles

Flat

Outline

Filled

Padding

Sm padding

Md padding

Lg padding

Hover Elevation

Set HoverElevation to a different level than Elevation to get a shadow lift on hover. Omit it for no hover effect.

None → Md

Hover me

Xs → Lg

Hover me

Sm (no hover)

No HoverElevation set

With CardAction

Project Settings

Manage your project configuration.

Header action button aligned to the top-right.

Vertical Detail Card

Getting Started with XM Cloud

Learn how to set up your first XM Cloud instance and begin building.

Guide XM Cloud

Updated 2 days ago

Content Hub Integration

Connect your DAM assets to your web experiences seamlessly.

Tutorial Content Hub

Updated 5 days ago

Horizontal Small Card

Campaign Brief Q4

PDF - 2.4 MB

Hero Banner Asset

PNG - 1.1 MB

Product Demo Video

MP4 - 48.2 MB

API

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
Card	Top-level card container. Combines `Style` (border treatment), `Elevation` (resting shadow), `HoverElevation` (shadow on hover), and `Padding` (inner spacing + corner radius) into one composable surface.
CardHeader	Top section of the `Card`. Holds `CardTitle`, `CardDescription`, and optionally a `CardAction` that auto-aligns to the top-right via CSS grid.
CardContent	Main body slot of the `Card`. No built-in padding of its own — relies on the parent `Card`'s `Padding` setting.
CardFooter	Bottom section of the `Card`. Flex row with centred alignment.
CardTitle	Heading inside the `CardHeader`. Renders as a semibold text block.
CardDescription	Subheading inside the `CardHeader`. Rendered in muted-foreground small text.
CardAction	Optional trailing action inside the `CardHeader`. Auto-positions to the top-right via CSS grid column placement — the `CardHeader` detects this child and switches to a two-column layout.

Card

Top-level card container. Combines Style (border treatment), Elevation (resting shadow), HoverElevation (shadow on hover), and Padding (inner spacing + corner radius) into one composable surface.

Property	Type	Description
Elevation	CardElevation	Resting shadow depth. Default: `CardElevation.None`. Other values: `Xs`, `Sm`, `Base`, `Md`, `Lg`, `Xl`.
HoverElevation	CardElevation?	Shadow depth on hover. Only applied when different from `Elevation`; leave unset for no hover effect.
Style	CardStyle	Border/background treatment. Default: `CardStyle.Flat`. Other values: `Outline` (bordered), `Filled` (subtle fill, no border).
Padding	CardPadding	Inner padding + corner radius preset. Default: `CardPadding.Lg`. Other values: `Sm`, `Md`.
ClassName	string?	Extra CSS classes appended to the card. Use to override flex direction (`flex-row`) or add `cursor-pointer`.
ChildContent	RenderFragment?	Card body. Typically `CardHeader` + `CardContent` + `CardFooter`.
AdditionalAttributes	Dictionary<string, object>?	Captured unmatched attributes, forwarded to the card container.

CardHeader

Top section of the Card. Holds CardTitle, CardDescription, and optionally a CardAction that auto-aligns to the top-right via CSS grid.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the header grid.
ChildContent	RenderFragment?		Usually `CardTitle` + `CardDescription`, optionally with a `CardAction`.

CardContent

Main body slot of the Card. No built-in padding of its own — relies on the parent Card's Padding setting.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the content div.
ChildContent	RenderFragment?		Card body content.

CardFooter

Bottom section of the Card. Flex row with centred alignment.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the footer.
ChildContent	RenderFragment?		Usually buttons or secondary metadata.

CardTitle

Heading inside the CardHeader. Renders as a semibold text block.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the title div.
ChildContent	RenderFragment?		Card title text.

CardDescription

Subheading inside the CardHeader. Rendered in muted-foreground small text.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the description div.
ChildContent	RenderFragment?		Short descriptive text.

CardAction

Optional trailing action inside the CardHeader. Auto-positions to the top-right via CSS grid column placement — the CardHeader detects this child and switches to a two-column layout.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the action container.
ChildContent	RenderFragment?		Usually a single compact `Button`.