Prepared Docs

Card is a non-interactive grouping surface. ClickableCard is one native button or anchor action target sized to the card.

What the component handles

CardHeader renders a real BodyLarge strong heading. Default rank is h3; headingLevel changes only the semantic tag.
ClickableCard focus styles land on the action target with :focus-visible. The ring is inset so overflow: hidden on the card surface does not clip it. There is no :has() dependency.
The action target is a sibling of header, content, and footer, then stretched over the card with .pr-card__action. Slot content is not wrapped by the control.
Pressed (aria-pressed) cards keep the accent border through hover, active, and focus-within. Disabled Surface cards keep the disabled fill on painted ancestors. Surface ClickableCards on painted ancestors keep hover, active, and focus-within fills instead of staying locked to Alt2.
Navigation external always uses _blank plus noopener noreferrer.
A development-only descendant guard warns when ClickableCard contains focusable or interactive content.
ClickableCard rejects a direct controls prop. The descendant guard catches controls composed through opaque React children.

What you must provide

A localized aria-label on every ClickableCard.
A valid heading outline. Do not skip ranks solely to change size.
Ordinary Card plus an external control when the content includes tables, named charts, forms, or Scrollable.
Localized CardControls segment labels and menuLabel when the kebab is present.

Controls versus clickable

Do not nest CardControls, buttons, or links inside ClickableCard. Put navigation in CardFooter when the header needs controls. Ancestor-link patterns that stop-propagate from inner controls are invalid content.

Keyboard behavior

Tab reaches the action target once on ClickableCard. Content is not a second tab stop.
Ordinary Card with CardControls exposes the segmented control and kebab as their own tab stops.
Enter and Space activate action cards.
Disabled action cards are not in the tab order as an operable control.

Pressed state

Omitted aria-pressed produces no attribute. false emits aria-pressed="false". true emits aria-pressed="true". Navigation cards cannot set pressed state.

Card / API and Development

Checkbox / Usage

What the component handles

What you must provide

Controls versus clickable

Keyboard behavior

Pressed state

Related Components

Card is a non-interactive grouping surface. ClickableCard is one native button or anchor action target sized to the card.

What the component handles

CardHeader renders a real BodyLarge strong heading. Default rank is h3; headingLevel changes only the semantic tag.
ClickableCard focus styles land on the action target with :focus-visible. The ring is inset so overflow: hidden on the card surface does not clip it. There is no :has() dependency.
The action target is a sibling of header, content, and footer, then stretched over the card with .pr-card__action. Slot content is not wrapped by the control.
Pressed (aria-pressed) cards keep the accent border through hover, active, and focus-within. Disabled Surface cards keep the disabled fill on painted ancestors. Surface ClickableCards on painted ancestors keep hover, active, and focus-within fills instead of staying locked to Alt2.
Navigation external always uses _blank plus noopener noreferrer.
A development-only descendant guard warns when ClickableCard contains focusable or interactive content.
ClickableCard rejects a direct controls prop. The descendant guard catches controls composed through opaque React children.

What you must provide

A localized aria-label on every ClickableCard.
A valid heading outline. Do not skip ranks solely to change size.
Ordinary Card plus an external control when the content includes tables, named charts, forms, or Scrollable.
Localized CardControls segment labels and menuLabel when the kebab is present.

Controls versus clickable

Keyboard behavior

Tab reaches the action target once on ClickableCard. Content is not a second tab stop.
Ordinary Card with CardControls exposes the segmented control and kebab as their own tab stops.
Enter and Space activate action cards.
Disabled action cards are not in the tab order as an operable control.

Pressed state

Omitted aria-pressed produces no attribute. false emits aria-pressed="false". true emits aria-pressed="true". Navigation cards cannot set pressed state.

Card / API and Development

Checkbox / Usage

What the component handles

What you must provide

Controls versus clickable

Keyboard behavior

Pressed state

Related Components