Scale — Card

Install

Examples

Surface

A transparent subtle tint plus four shadow elevations — l1 is the resting card, higher levels read as floating layers.

Subtle background, no shadow.

L1 — the resting card surface.

L2 — raised for emphasis or hover.

L3 — popovers and floating panels.

Radius

No radius

Radius S

Radius M

Radius XL

Padding

Padding defaults to none so edge-to-edge content (like images) sits flush — set it when the card holds plain content.

Padding S

Padding M

Padding L

Padding XL

Composition

Cards are just a surface — slot in whatever structure you need. They clip overflow, so edge-to-edge images get rounded corners for free.

Project Aurora

Cross-functional initiative kicking off next quarter.

View

Sunrise over the bay

The card clips overflow so children don’t need their own rounded corners.

Guidelines

Usage

any time related content and actions belong together as one visually-grouped unit. For ready-made patterns, reach for Card Image, Card Pricing, or Card Selector.

Do

Keep one subject per card — a single object, summary, or choice.
Use l1 for resting cards and reserve higher elevations for floating layers.
Leave padding="none" when an image or table needs to reach the edges.

Don’t

Don’t nest cards within cards — flatten the hierarchy instead.
Don’t mix several elevations in one grid; keep peers at the same level.
Don’t make the whole card a single click target without a clear focusable control inside.

Accessibility

Role: Card is a presentational <div> surface with no implicit role — meaning comes from the content you slot in.
Structure: give the card a heading (<h2>–<h4>) so it appears in the document outline; group lists of cards in a <ul> / <li> where appropriate.
Interactivity: put a real Button or link inside rather than attaching a click handler to the card; keyboard users need a focusable control.
Images: decorative images need alt=""; meaningful ones need descriptive alt text.
Contrast: text on any surface level must meet WCAG AA — elevation changes the background, so re-check low-emphasis text.

Properties

Card Image — a media-led card with image, title, and body.
Card Pricing — plan and pricing layout built on Card.
Card Selector — selectable card for single- or multi-choice.
Divider — separate sections within a card.

Card