ElevatedCard
Card-shaped chunk that encapsulates the Card primitive — exposes Style / Elevation / HoverElevation / Padding instead of Borders / BgFilled / Gutters
Examples
Outline + small elevation (default)
Daily revenue
$12,480
+8.4% vs yesterday
Filled style, no elevation
Subtle filled card
Use Style.Filled for a tonal background without a border or shadow.
Elevation lifts on hover
Hover me
Resting at sm; lifts to lg on hover via the Card primitive's HoverElevation.
Compact padding
Tighter padding for dense layouts.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| ElevatedCard | Card-shaped chunk that wraps the underlying Card primitive. Sibling to FeatureCard, ActionCard, and MediaCard but exposes the primitive's enum-driven Style / Elevation / HoverElevation / Padding parameters instead of the bool Borders / BgFilled / Gutters triple. Use this when you want a shadow / lift effect — e.g. dashboard tiles, hero cards, raised dialogs. |
ElevatedCard
Card-shaped chunk that wraps the underlying Card primitive. Sibling to FeatureCard, ActionCard, and MediaCard but exposes the primitive's enum-driven Style / Elevation / HoverElevation / Padding parameters instead of the bool Borders / BgFilled / Gutters triple. Use this when you want a shadow / lift effect — e.g. dashboard tiles, hero cards, raised dialogs.
| Property | Type | Required | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | Card content. Free-form — typically a stack of Text / inline elements / actions. | |
| Style | CardStyle | Visual style. Flat (transparent border, plain bg), Outline (visible border, plain bg), Filled (no border, subtle tonal bg). Default: Outline. | |
| Elevation | CardElevation | Resting shadow level. Values: None, Xs, Sm, Base, Md, Lg, Xl. Default: Sm. | |
| HoverElevation | CardElevation? | Optional hover shadow level. When set and different from Elevation, the card transitions to this elevation on hover. | |
| Padding | CardPadding | Inner padding scale. Values: Sm, Md, Lg. Default: Lg. | |
| ClassName | string? | Additional CSS class string passed through to the underlying Card primitive. |