卡片

卡片为分组内容提供灵活的容器表面，并支持悬浮、填充、描边和交互样式。

卡片内容

示例

默认

Elevated surface

颜色

elevated

filled

outlined

可点击

参考

结构

高亮显示

元素	部件	选择器
<div>	root条件显示	[data-scope="card"][data-part="root"] left_click鼠标左键单击复制

属性

名称	说明	默认值	控件
shape可选	Corner style; inherits the shared shape default. M3Shape | undefined	-	-
color可选	The color style of the card. outlinedfilledelevated	-	outlinedfilledcheckelevated
clickable可选	Whether the card is interactive (e.g., clickable). boolean | undefined	-

插槽1

名称	参数	说明
default	-	Default slot for the main content of the card.

样式78

预览

Token	说明
--md-elevated-card-container-colorColor 回退值var(--md-sys-color-surface-container-low)	Controls card container color.
--md-elevated-card-container-elevationElevation 回退值var(--md-sys-elevation-level1)	Controls card container elevation.
--md-elevated-card-container-shadow-colorColor 回退值var(--md-sys-color-shadow)	Controls card container shadow color.
--md-elevated-card-container-shapeShape 回退值var(--md-shape-card)	Controls card container shape.
--md-elevated-card-disabled-container-colorDisabled 回退值var(--md-sys-color-surface)	Controls card disabled container color.
--md-elevated-card-disabled-container-elevationDisabled 回退值var(--md-sys-elevation-level1)	Controls card disabled container elevation.
--md-elevated-card-disabled-container-opacityDisabled 回退值0.38	Controls card disabled container opacity.
--md-elevated-card-dragged-container-elevationElevation 回退值var(--md-sys-elevation-level4)	Controls card dragged container elevation.
--md-elevated-card-dragged-state-layer-colorState 回退值var(--md-sys-color-on-surface)	Controls card dragged state layer color.
--md-elevated-card-dragged-state-layer-opacityState 回退值var(--md-sys-state-dragged-state-layer-opacity)	Controls card dragged state layer opacity.
--md-elevated-card-focus-container-elevationFocus 回退值var(--md-sys-elevation-level1)	Controls card focus container elevation.
--md-elevated-card-focus-indicator-colorFocus 回退值var(--md-sys-color-secondary)	Controls card focus indicator color.
--md-elevated-card-focus-indicator-outline-offsetFocus 回退值var(--md-sys-state-focus-indicator-outer-offset)	Controls card focus indicator outline offset.
--md-elevated-card-focus-indicator-thicknessFocus 回退值var(--md-sys-state-focus-indicator-thickness)	Controls card focus indicator thickness.
--md-elevated-card-focus-state-layer-colorFocus 回退值var(--md-sys-color-on-surface)	Controls card focus state layer color.
--md-elevated-card-focus-state-layer-opacityFocus 回退值var(--md-sys-state-focus-state-layer-opacity)	Controls card focus state layer opacity.
--md-elevated-card-hover-container-elevationElevation 回退值var(--md-sys-elevation-level2)	Controls card hover container elevation.
--md-elevated-card-hover-state-layer-colorState 回退值var(--md-sys-color-on-surface)	Controls card hover state layer color.
--md-elevated-card-hover-state-layer-opacityState 回退值var(--md-sys-state-hover-state-layer-opacity)	Controls card hover state layer opacity.
--md-elevated-card-icon-colorColor 回退值var(--md-sys-color-primary)	Controls card icon color.
--md-elevated-card-icon-sizeLayout 回退值1.5rem	Controls card icon size.
--md-elevated-card-pressed-container-elevationElevation 回退值var(--md-sys-elevation-level1)	Controls card pressed container elevation.
--md-elevated-card-pressed-state-layer-colorState 回退值var(--md-sys-color-on-surface)	Controls card pressed state layer color.
--md-elevated-card-pressed-state-layer-opacityState 回退值var(--md-sys-state-pressed-state-layer-opacity)	Controls card pressed state layer opacity.
--md-filled-card-container-colorColor 回退值var(--md-sys-color-surface-container-highest)	Controls card container color.
--md-filled-card-container-elevationElevation 回退值var(--md-sys-elevation-level0)	Controls card container elevation.
--md-filled-card-container-shadow-colorColor 回退值var(--md-sys-color-shadow)	Controls card container shadow color.
--md-filled-card-container-shapeShape 回退值var(--md-shape-card)	Controls card container shape.
--md-filled-card-disabled-container-colorDisabled 回退值var(--md-sys-color-surface-variant)	Controls card disabled container color.
--md-filled-card-disabled-container-elevationDisabled 回退值var(--md-sys-elevation-level0)	Controls card disabled container elevation.
--md-filled-card-disabled-container-opacityDisabled 回退值0.38	Controls card disabled container opacity.
--md-filled-card-dragged-container-elevationElevation 回退值var(--md-sys-elevation-level3)	Controls card dragged container elevation.
--md-filled-card-dragged-state-layer-colorState 回退值var(--md-sys-color-on-surface)	Controls card dragged state layer color.
--md-filled-card-dragged-state-layer-opacityState 回退值var(--md-sys-state-dragged-state-layer-opacity)	Controls card dragged state layer opacity.
--md-filled-card-focus-container-elevationFocus 回退值var(--md-sys-elevation-level0)	Controls card focus container elevation.
--md-filled-card-focus-indicator-colorFocus 回退值var(--md-sys-color-secondary)	Controls card focus indicator color.
--md-filled-card-focus-indicator-outline-offsetFocus 回退值var(--md-sys-state-focus-indicator-outer-offset)	Controls card focus indicator outline offset.
--md-filled-card-focus-indicator-thicknessFocus 回退值var(--md-sys-state-focus-indicator-thickness)	Controls card focus indicator thickness.
--md-filled-card-focus-state-layer-colorFocus 回退值var(--md-sys-color-on-surface)	Controls card focus state layer color.
--md-filled-card-focus-state-layer-opacityFocus 回退值var(--md-sys-state-focus-state-layer-opacity)	Controls card focus state layer opacity.
--md-filled-card-hover-container-elevationElevation 回退值var(--md-sys-elevation-level1)	Controls card hover container elevation.
--md-filled-card-hover-state-layer-colorState 回退值var(--md-sys-color-on-surface)	Controls card hover state layer color.
--md-filled-card-hover-state-layer-opacityState 回退值var(--md-sys-state-hover-state-layer-opacity)	Controls card hover state layer opacity.
--md-filled-card-icon-colorColor 回退值var(--md-sys-color-primary)	Controls card icon color.
--md-filled-card-icon-sizeLayout 回退值1.5rem	Controls card icon size.
--md-filled-card-pressed-container-elevationElevation 回退值var(--md-sys-elevation-level0)	Controls card pressed container elevation.
--md-filled-card-pressed-state-layer-colorState 回退值var(--md-sys-color-on-surface)	Controls card pressed state layer color.
--md-filled-card-pressed-state-layer-opacityState 回退值var(--md-sys-state-pressed-state-layer-opacity)	Controls card pressed state layer opacity.
--md-outlined-card-container-colorColor 回退值var(--md-sys-color-surface)	Controls card container color.
--md-outlined-card-container-elevationElevation 回退值var(--md-sys-elevation-level0)	Controls card container elevation.
--md-outlined-card-container-shadow-colorColor 回退值var(--md-sys-color-shadow)	Controls card container shadow color.
--md-outlined-card-container-shapeShape 回退值var(--md-shape-card)	Controls card container shape.
--md-outlined-card-disabled-container-elevationDisabled 回退值var(--md-sys-elevation-level0)	Controls card disabled container elevation.
--md-outlined-card-disabled-outline-colorDisabled 回退值var(--md-sys-color-outline)	Controls card disabled outline color.
--md-outlined-card-disabled-outline-opacityDisabled 回退值0.12	Controls card disabled outline opacity.
--md-outlined-card-dragged-container-elevationElevation 回退值var(--md-sys-elevation-level3)	Controls card dragged container elevation.
--md-outlined-card-dragged-outline-colorColor 回退值var(--md-sys-color-outline-variant)	Controls card dragged outline color.
--md-outlined-card-dragged-state-layer-colorState 回退值var(--md-sys-color-on-surface)	Controls card dragged state layer color.
--md-outlined-card-dragged-state-layer-opacityState 回退值var(--md-sys-state-dragged-state-layer-opacity)	Controls card dragged state layer opacity.
--md-outlined-card-focus-container-elevationFocus 回退值var(--md-sys-elevation-level0)	Controls card focus container elevation.
--md-outlined-card-focus-indicator-colorFocus 回退值var(--md-sys-color-secondary)	Controls card focus indicator color.
--md-outlined-card-focus-indicator-outline-offsetFocus 回退值var(--md-sys-state-focus-indicator-outer-offset)	Controls card focus indicator outline offset.
--md-outlined-card-focus-indicator-thicknessFocus 回退值var(--md-sys-state-focus-indicator-thickness)	Controls card focus indicator thickness.
--md-outlined-card-focus-outline-colorFocus 回退值var(--md-sys-color-on-surface)	Controls card focus outline color.
--md-outlined-card-focus-state-layer-colorFocus 回退值var(--md-sys-color-on-surface)	Controls card focus state layer color.
--md-outlined-card-focus-state-layer-opacityFocus 回退值var(--md-sys-state-focus-state-layer-opacity)	Controls card focus state layer opacity.
--md-outlined-card-hover-container-elevationElevation 回退值var(--md-sys-elevation-level1)	Controls card hover container elevation.
--md-outlined-card-hover-outline-colorState 回退值var(--md-sys-color-outline-variant)	Controls card hover outline color.
--md-outlined-card-hover-state-layer-colorState 回退值var(--md-sys-color-on-surface)	Controls card hover state layer color.
--md-outlined-card-hover-state-layer-opacityState 回退值var(--md-sys-state-hover-state-layer-opacity)	Controls card hover state layer opacity.
--md-outlined-card-icon-colorColor 回退值var(--md-sys-color-primary)	Controls card icon color.
--md-outlined-card-icon-sizeLayout 回退值1.5rem	Controls card icon size.
--md-outlined-card-outline-colorColor 回退值var(--md-sys-color-outline-variant)	Controls card outline color.
--md-outlined-card-outline-widthLayout 回退值0.0625rem	Controls card outline width.
--md-outlined-card-pressed-container-elevationElevation 回退值var(--md-sys-elevation-level0)	Controls card pressed container elevation.
--md-outlined-card-pressed-outline-colorState 回退值var(--md-sys-color-outline-variant)	Controls card pressed outline color.
--md-outlined-card-pressed-state-layer-colorState 回退值var(--md-sys-color-on-surface)	Controls card pressed state layer color.
--md-outlined-card-pressed-state-layer-opacityState 回退值var(--md-sys-state-pressed-state-layer-opacity)	Controls card pressed state layer opacity.