Card

Cards provide a flexible surface for grouped content, with elevated, filled, outlined, and interactive treatments.

Card content

Anatomy

Highlight

Element	Part	Selector
<div>	rootconditional	[data-scope="card"][data-part="root"] left_clickLMBCopy

Props

Name	Description	Default	Control
colorOptional	The color style of the card. elevatedfilledoutlined	-	checkelevatedfilledoutlined
clickableOptional	Whether the card is interactive (e.g., clickable). boolean | undefined	-

Events0

No events documented.

Slots1

Name	Parameters	Description
default	-	Default slot for the main content of the card.

Styling78

Preview

Token	Description
--md-elevated-card-container-colorColor Fallbackvar(--md-sys-color-surface-container-low)	Controls card container color.
--md-elevated-card-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls card container elevation.
--md-elevated-card-container-shadow-colorColor Fallbackvar(--md-sys-color-shadow)	Controls card container shadow color.
--md-elevated-card-container-shapeShape Fallbackvar(--md-shape-card)	Controls card container shape.
--md-elevated-card-disabled-container-colorDisabled Fallbackvar(--md-sys-color-surface)	Controls card disabled container color.
--md-elevated-card-disabled-container-elevationDisabled Fallbackvar(--md-sys-elevation-level1)	Controls card disabled container elevation.
--md-elevated-card-disabled-container-opacityDisabled Fallback0.38	Controls card disabled container opacity.
--md-elevated-card-dragged-container-elevationElevation Fallbackvar(--md-sys-elevation-level4)	Controls card dragged container elevation.
--md-elevated-card-dragged-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls card dragged state layer color.
--md-elevated-card-dragged-state-layer-opacityState Fallbackvar(--md-sys-state-dragged-state-layer-opacity)	Controls card dragged state layer opacity.
--md-elevated-card-focus-container-elevationFocus Fallbackvar(--md-sys-elevation-level1)	Controls card focus container elevation.
--md-elevated-card-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls card focus indicator color.
--md-elevated-card-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls card focus indicator outline offset.
--md-elevated-card-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls card focus indicator thickness.
--md-elevated-card-focus-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface)	Controls card focus state layer color.
--md-elevated-card-focus-state-layer-opacityFocus Fallbackvar(--md-sys-state-focus-state-layer-opacity)	Controls card focus state layer opacity.
--md-elevated-card-hover-container-elevationElevation Fallbackvar(--md-sys-elevation-level2)	Controls card hover container elevation.
--md-elevated-card-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls card hover state layer color.
--md-elevated-card-hover-state-layer-opacityState Fallbackvar(--md-sys-state-hover-state-layer-opacity)	Controls card hover state layer opacity.
--md-elevated-card-icon-colorColor Fallbackvar(--md-sys-color-primary)	Controls card icon color.
--md-elevated-card-icon-sizeLayout Fallback1.5rem	Controls card icon size.
--md-elevated-card-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls card pressed container elevation.
--md-elevated-card-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls card pressed state layer color.
--md-elevated-card-pressed-state-layer-opacityState Fallbackvar(--md-sys-state-pressed-state-layer-opacity)	Controls card pressed state layer opacity.
--md-filled-card-container-colorColor Fallbackvar(--md-sys-color-surface-container-highest)	Controls card container color.
--md-filled-card-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls card container elevation.
--md-filled-card-container-shadow-colorColor Fallbackvar(--md-sys-color-shadow)	Controls card container shadow color.
--md-filled-card-container-shapeShape Fallbackvar(--md-shape-card)	Controls card container shape.
--md-filled-card-disabled-container-colorDisabled Fallbackvar(--md-sys-color-surface-variant)	Controls card disabled container color.
--md-filled-card-disabled-container-elevationDisabled Fallbackvar(--md-sys-elevation-level0)	Controls card disabled container elevation.
--md-filled-card-disabled-container-opacityDisabled Fallback0.38	Controls card disabled container opacity.
--md-filled-card-dragged-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls card dragged container elevation.
--md-filled-card-dragged-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls card dragged state layer color.
--md-filled-card-dragged-state-layer-opacityState Fallbackvar(--md-sys-state-dragged-state-layer-opacity)	Controls card dragged state layer opacity.
--md-filled-card-focus-container-elevationFocus Fallbackvar(--md-sys-elevation-level0)	Controls card focus container elevation.
--md-filled-card-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls card focus indicator color.
--md-filled-card-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls card focus indicator outline offset.
--md-filled-card-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls card focus indicator thickness.
--md-filled-card-focus-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface)	Controls card focus state layer color.
--md-filled-card-focus-state-layer-opacityFocus Fallbackvar(--md-sys-state-focus-state-layer-opacity)	Controls card focus state layer opacity.
--md-filled-card-hover-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls card hover container elevation.
--md-filled-card-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls card hover state layer color.
--md-filled-card-hover-state-layer-opacityState Fallbackvar(--md-sys-state-hover-state-layer-opacity)	Controls card hover state layer opacity.
--md-filled-card-icon-colorColor Fallbackvar(--md-sys-color-primary)	Controls card icon color.
--md-filled-card-icon-sizeLayout Fallback1.5rem	Controls card icon size.
--md-filled-card-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls card pressed container elevation.
--md-filled-card-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls card pressed state layer color.
--md-filled-card-pressed-state-layer-opacityState Fallbackvar(--md-sys-state-pressed-state-layer-opacity)	Controls card pressed state layer opacity.
--md-outlined-card-container-colorColor Fallbackvar(--md-sys-color-surface)	Controls card container color.
--md-outlined-card-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls card container elevation.
--md-outlined-card-container-shadow-colorColor Fallbackvar(--md-sys-color-shadow)	Controls card container shadow color.
--md-outlined-card-container-shapeShape Fallbackvar(--md-shape-card)	Controls card container shape.
--md-outlined-card-disabled-container-elevationDisabled Fallbackvar(--md-sys-elevation-level0)	Controls card disabled container elevation.
--md-outlined-card-disabled-outline-colorDisabled Fallbackvar(--md-sys-color-outline)	Controls card disabled outline color.
--md-outlined-card-disabled-outline-opacityDisabled Fallback0.12	Controls card disabled outline opacity.
--md-outlined-card-dragged-container-elevationElevation Fallbackvar(--md-sys-elevation-level3)	Controls card dragged container elevation.
--md-outlined-card-dragged-outline-colorColor Fallbackvar(--md-sys-color-outline-variant)	Controls card dragged outline color.
--md-outlined-card-dragged-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls card dragged state layer color.
--md-outlined-card-dragged-state-layer-opacityState Fallbackvar(--md-sys-state-dragged-state-layer-opacity)	Controls card dragged state layer opacity.
--md-outlined-card-focus-container-elevationFocus Fallbackvar(--md-sys-elevation-level0)	Controls card focus container elevation.
--md-outlined-card-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls card focus indicator color.
--md-outlined-card-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls card focus indicator outline offset.
--md-outlined-card-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls card focus indicator thickness.
--md-outlined-card-focus-outline-colorFocus Fallbackvar(--md-sys-color-on-surface)	Controls card focus outline color.
--md-outlined-card-focus-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface)	Controls card focus state layer color.
--md-outlined-card-focus-state-layer-opacityFocus Fallbackvar(--md-sys-state-focus-state-layer-opacity)	Controls card focus state layer opacity.
--md-outlined-card-hover-container-elevationElevation Fallbackvar(--md-sys-elevation-level1)	Controls card hover container elevation.
--md-outlined-card-hover-outline-colorState Fallbackvar(--md-sys-color-outline-variant)	Controls card hover outline color.
--md-outlined-card-hover-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls card hover state layer color.
--md-outlined-card-hover-state-layer-opacityState Fallbackvar(--md-sys-state-hover-state-layer-opacity)	Controls card hover state layer opacity.
--md-outlined-card-icon-colorColor Fallbackvar(--md-sys-color-primary)	Controls card icon color.
--md-outlined-card-icon-sizeLayout Fallback1.5rem	Controls card icon size.
--md-outlined-card-outline-colorColor Fallbackvar(--md-sys-color-outline-variant)	Controls card outline color.
--md-outlined-card-outline-widthLayout Fallback0.0625rem	Controls card outline width.
--md-outlined-card-pressed-container-elevationElevation Fallbackvar(--md-sys-elevation-level0)	Controls card pressed container elevation.
--md-outlined-card-pressed-outline-colorState Fallbackvar(--md-sys-color-outline-variant)	Controls card pressed outline color.
--md-outlined-card-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface)	Controls card pressed state layer color.
--md-outlined-card-pressed-state-layer-opacityState Fallbackvar(--md-sys-state-pressed-state-layer-opacity)	Controls card pressed state layer opacity.

Examples

Default

Elevated surface

Colors

elevated

filled

outlined

Clickable