Card

Card is a surface container for grouped content such as settings panels, dashboard blocks, and inline summaries.

Overview

Card styling is concentrated in one grouped surface with appearance-driven border treatment and size-driven padding.

Public CSS Variables

Weekly report

Sent every Monday at 9:00 to 4 people.

Variable	Value	Affects
Border color.`Card`		No visible change in this state
Surface background.`Card`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Card: owns the entire surface, padding, and radius treatment.

State And Variant Interaction

size changes padding and radius.
appearance='outline' shows border treatment.
appearance='transparent' removes card-level border emphasis.

Examples

.brandCard {
  --card-border-color: var(--border-color);
}

.linkCard:hover {
  --card-background-color: var(--fills-tertiary);
}

.softCard {
  --card-background-color: var(--surface-primary);
}

Do Not Override

Do not rely on transparent cards where the parent background is visually noisy.
Do not use card styling as a substitute for semantic heading structure.
Do not expect the surface to solve internal spacing automatically.