Card

MD3 card: a 12dp-rounded container in filled, elevated, and outlined styles. A card is static by default; make it one button (onClick), one link (href), or give it a primary action plus separate buttons with CardActionArea and CardActions.

Variants

Filled

Surface container highest.

Elevated

Surface container low, level 1.

Outlined

Surface with an outline-variant border.

<Card variant="outlined" style={{ padding: 16 }}>
  <strong>Outlined</strong>
  <p>Supporting text for the card body.</p>
</Card>

Clickable and link cards

onClick turns the whole card into one button (role="button", Enter / Space, ripple, focus ring, hover elevation). href renders it as an <a>, so middle-click, open-in-new-tab and the status-bar URL work natively.

Clickable card

The whole surface is one button.

Link card

The whole surface is one link.

<Card variant="elevated" onClick={openDetails}>…</Card>
<Card variant="outlined" href="/articles/42">…</Card>

A clickable or link card must not contain other interactive elements — a development warning points you to the pattern below.

Primary action with buttons

For a card with a main action and extra buttons, keep the Card static: CardActionArea wraps the content in one button (onClick) or link (href), and CardActions holds the other actions as its sibling — end-aligned, 8dp apart.

filled

The content is the primary action.

elevated

The content is the primary action.

outlined

The content is the primary action.

<Card variant="elevated">
  <CardActionArea href="/articles/42" style={{ padding: 16 }}>
    <h3>Article title</h3>
    <p>Summary of the article.</p>
  </CardActionArea>
  <CardActions>
    <Button variant="text">Share</Button>
    <Button variant="filled">Read</Button>
  </CardActions>
</Card>

Disabled and dragged

disabled dims the container and content to 38%; a clickable or link card also stops responding and leaves the Tab order. dragged applies the MD3 drag appearance (raised elevation and a 0.16 state layer) for drag-and-drop.

Disabled

Container and content at 38%.

Dragged

Raised while being dragged.

<Card onClick={open} disabled>…</Card>
<Card dragged={isDragging}>…</Card>

Accessibility

• A static card is a plain <div> with no role; interactivity lives in its own controls.
• A clickable card is role="button" (Enter / Space); a link card and a link CardActionArea are native <a> elements (Enter only). Their accessible name comes from the content — keep it short, or set aria-label.
• Keys and clicks from controls inside a card belong to those controls: the container never intercepts them. Still, nesting controls inside a clickable card is invalid (axe nested-interactive) — use CardActionArea + CardActions instead.
• A disabled clickable card sets aria-disabled and is removed from the Tab order; a disabled link loses its href.

Props

Card

Prop	Type	Default	Description
disabled	boolean	false	Show the disabled appearance (container and content at 38%). A clickable or link card also stops responding (`aria-disabled`, removed from the Tab order).
download	string | boolean	—	`<a download>` — only with `href`.
dragged	boolean	false	Apply the MD3 dragged appearance — raised elevation (filled / outlined 6dp, elevated 8dp) and the 0.16 on-surface state layer — for drag-and-drop. Works on static and clickable cards.
href	string	—	Make the surface a link: renders an `<a href>` (Enter activates; middle click, open-in-new-tab and the status-bar URL work natively).
target	string	—	`<a target>` — only with `href`.
variant	enum	filled	Container style.

CardActionArea

Prop	Type	Default	Description
disabled	boolean	false	Disable the action (dimmed by the card's `disabled`, not by this prop).
download	string | boolean	—	`<a download>` — only with `href`.
href	string	—	Make the surface a link: renders an `<a href>` (Enter activates; middle click, open-in-new-tab and the status-bar URL work natively).
target	string	—	`<a target>` — only with `href`.

CardActions

CardActions has no props of its own: it takes children and the standard <div> attributes (className, style, …).