Card

A card groups content about one subject, such as a recipe with its notes, on a single surface. Its variant sets how firmly the card stands apart from the page behind it, and a built-in badge flags news with no extra element to place. The cards below share one bake; watch two badges come and go.

Lemon tart
Serves eight
 Shopping list
Twelve left, butter first
 Rest the dough
Thirty minutes chilling
 Saturday market
Eggs, lemons, butter
 Oven
180 degrees, fan on
 Taste test
Needs more lemon
 Pastry club
Three bakes to rate
 Tart tin
23 cm, loose base
 Proofing
A bake in progress
 Whipped cream
Cold bowl, soft peaks
 Washing up
Tomorrow's problem

Reference docs⁠

BlazorReactWebOverviewExamplesAPIStylingAccessibility

Choosing a card⁠

Two components share the card's surface. Each suits a different job:

  • Card: a container grouping content about one subject, with its own buttons if it needs them, such as a recipe summary.
  • Action card: a whole card that is one click target, opening or doing one thing, such as a product tile.

Two jobs belong elsewhere. A single action is a button, and items in a column are a list.

Choosing a variant⁠

Three variants set how much a card stands out from its surface, from most to least:

  • Elevated: lifts a card off a patterned or same-colored surface, such as a card over a photo.
  • Filled: a quiet separation between the card and the page, such as a group of settings.
  • Outlined: the least emphasis, for a set of equal cards, such as a list of recipes.

Built in⁠

  • A badge shows a count or a dot on the card, with no extra element to place: badge-value, badge-dot, and badge-concealed.
  • mask-content keeps a full-bleed image inside a rounded or shaped card.
  • The variant falls back to your style configuration, so one setting restyles every card that sets none.

Using cards well⁠

  • Use one variant for every card in a group, so the group reads as a set.
  • Keep each card to one subject: an image, a headline, supporting text, then the actions.
  • Put the actions of a card with several in separate buttons inside it. When the whole card is the one action, use an Action card instead.
  • Let the container set a card's width, whether a grid cell or a column, rather than the content.

These rules follow Material 3 Expressive's guidance for cards, on material.io.

Variants⁠

A card takes one of three variants. Omit variant and the card takes the variant from your style configuration, which is outlined unless you have changed it. Choose by emphasis: the Overview lists when each variant fits.

Badges⁠

badge-value writes a short text on the card, and badge-dot shows a small dot with no text instead. badge-concealed hides the badge and keeps its settings, so clearing it brings the same badge back.

Clipped content⁠

Content in the default slot is clipped to the card's box. Turn on mask-content and the content follows the card's corner shape too, so a full-bleed image never pokes past a rounded corner.

Actions⁠

Place one button per action after the content it acts on. The card takes no pointer action itself, so each button keeps its own focus and label.

Properties⁠

PropertyAttributeTypeDescription
badgeConcealedbadge-concealedbooleandefault falseHides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
badgeDotbadge-dotbooleandefault falseShows the badge as a small dot with no text, whether or not badgeValue is set. See Badges.
badgeValuebadge-valuestringThe badge's text. While it is empty and badgeDot is not set, no badge renders. Ignored if badgeDot is set. See Badges.
maskContentmask-contentbooleanClips the content to the component's shape, so anything that extends past a rounded corner is cut off. See Clipped content.
variantvariantelevated, filled, outlinedCardVariantCardVariant.Elevated, .Filled, .Outlineddefault CardVariant.Outlined, from the style configurationSets whether the card is raised with a shadow, filled with a solid color, or flat with an outline. See Variants.

Slots⁠

SlotDescription
(default)The card's content.

Props⁠

PropTypeDescription
badgeConcealedbooleandefault falseHides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
badgeDotbooleandefault falseShows the badge as a small dot with no text, whether or not badgeValue is set. See Badges.
badgeValuestringThe badge's text. While it is empty and badgeDot is not set, no badge renders. Ignored if badgeDot is set. See Badges.
maskContentbooleanClips the content to the component's shape, so anything that extends past a rounded corner is cut off. See Clipped content.
variantCardVariantTypeCardVariant.Elevated, .Filled, .Outlineddefault CardVariant.Outlined, from the style configurationSets whether the card is raised with a shadow, filled with a solid color, or flat with an outline. See Variants.

Children⁠

ChildDescription
childrenThe card's content.

Parameters⁠

ParameterTypeDescription
BadgeConcealedbool?default falseHides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
BadgeDotbool?default falseShows the badge as a small dot with no text, whether or not BadgeValue is set. See Badges.
BadgeValuestring?The badge's text. While it is empty and BadgeDot is not set, no badge renders. Ignored if BadgeDot is set. See Badges.
MaskContentbool?Clips the content to the component's shape, so anything that extends past a rounded corner is cut off. See Clipped content.
VariantCardVariant?CardVariant.Elevated, .Filled, .Outlineddefault CardVariant.Outlined, from the style configurationSets whether the card is raised with a shadow, filled with a solid color, or flat with an outline. See Variants.

Render fragments⁠

ParameterTypeDescription
ChildContentRenderFragment?The card's content.

Inputs⁠

InputTypeDescription
badgeConcealedbooleandefault falseHides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
badgeDotbooleandefault falseShows the badge as a small dot with no text, whether or not badgeValue is set. See Badges.
badgeValuestringThe badge's text. While it is empty and badgeDot is not set, no badge renders. Ignored if badgeDot is set. See Badges.
maskContentbooleanClips the content to the component's shape, so anything that extends past a rounded corner is cut off. See Clipped content.
variantCardVariantTypeCardVariant.Elevated, .Filled, .Outlineddefault CardVariant.Outlined, from the style configurationSets whether the card is raised with a shadow, filled with a solid color, or flat with an outline. See Variants.

Content projection⁠

ContentDescription
content with no slotThe card's content.

Props⁠

PropTypeDescription
badgeConcealedbooleandefault falseHides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
badgeDotbooleandefault falseShows the badge as a small dot with no text, whether or not badgeValue is set. See Badges.
badgeValuestringThe badge's text. While it is empty and badgeDot is not set, no badge renders. Ignored if badgeDot is set. See Badges.
maskContentbooleanClips the content to the component's shape, so anything that extends past a rounded corner is cut off. See Clipped content.
variantCardVariantTypeCardVariant.Elevated, .Filled, .Outlineddefault CardVariant.Outlined, from the style configurationSets whether the card is raised with a shadow, filled with a solid color, or flat with an outline. See Variants.

Slots⁠

SlotDescription
defaultThe card's content.

Props⁠

PropTypeDescription
badgeConcealedbooleandefault falseHides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
badgeDotbooleandefault falseShows the badge as a small dot with no text, whether or not badgeValue is set. See Badges.
badgeValuestringThe badge's text. While it is empty and badgeDot is not set, no badge renders. Ignored if badgeDot is set. See Badges.
maskContentbooleanClips the content to the component's shape, so anything that extends past a rounded corner is cut off. See Clipped content.
variantCardVariantTypeCardVariant.Elevated, .Filled, .Outlineddefault CardVariant.Outlined, from the style configurationSets whether the card is raised with a shadow, filled with a solid color, or flat with an outline. See Variants.

Snippets⁠

SnippetDescription
childrenThe card's content.

Each attribute value has its own tokens; a cell shows its token's value, and selecting the cell shows the token's fallback path, with each name and value ready to copy. For example, the outlined column's container-shadow-color row is --ct-card-outlined-container-shadow-color, which defaults to --ct-sys-color-shadow.

Variant⁠

Nameelevatedfilledoutlined
container-colorsame as --ct-card-container-color --ct-card-elevated-container-colorsame as --ct-card-container-color --ct-card-filled-container-colorsame as --ct-card-container-color --ct-card-outlined-container-color
container-elevationsame as --ct-card-container-elevation --ct-card-elevated-container-elevationsame as --ct-card-container-elevation --ct-card-filled-container-elevationsame as --ct-card-container-elevation --ct-card-outlined-container-elevation
container-shadow-color--ct-sys-color-shadow --ct-card-elevated-container-shadow-color--ct-sys-color-shadow --ct-card-filled-container-shadow-color--ct-sys-color-shadow --ct-card-outlined-container-shadow-color
outline-colortransparent --ct-card-elevated-outline-colortransparent --ct-card-filled-outline-color--ct-sys-color-outline-variant --ct-card-outlined-outline-color
outline-opacity1 --ct-card-elevated-outline-opacity1 --ct-card-filled-outline-opacity1 --ct-card-outlined-outline-opacity
outline-width0px --ct-card-elevated-outline-width0px --ct-card-filled-outline-width1px --ct-card-outlined-outline-width
hover-container-elevation--ct-sys-elevation-level2 --ct-card-elevated-hover-container-elevation--ct-sys-elevation-level1 --ct-card-filled-hover-container-elevation--ct-sys-elevation-level0 --ct-card-outlined-hover-container-elevation
hover-state-layer-color--ct-sys-color-on-surface-variant --ct-card-elevated-hover-state-layer-color--ct-sys-color-on-surface-variant --ct-card-filled-hover-state-layer-color--ct-sys-color-on-surface-variant --ct-card-outlined-hover-state-layer-color
hover-state-layer-opacity--ct-sys-state-hover-state-layer-opacity --ct-card-elevated-hover-state-layer-opacity--ct-sys-state-hover-state-layer-opacity --ct-card-filled-hover-state-layer-opacity--ct-sys-state-hover-state-layer-opacity --ct-card-outlined-hover-state-layer-opacity
focus-container-elevation--ct-sys-elevation-level1 --ct-card-elevated-focus-container-elevation--ct-sys-elevation-level0 --ct-card-filled-focus-container-elevation--ct-sys-elevation-level0 --ct-card-outlined-focus-container-elevation
pressed-container-elevation--ct-sys-elevation-level1 --ct-card-elevated-pressed-container-elevation--ct-sys-elevation-level0 --ct-card-filled-pressed-container-elevation--ct-sys-elevation-level0 --ct-card-outlined-pressed-container-elevation
pressed-state-layer-color--ct-sys-color-on-surface-variant --ct-card-elevated-pressed-state-layer-color--ct-sys-color-on-surface-variant --ct-card-filled-pressed-state-layer-color--ct-sys-color-on-surface-variant --ct-card-outlined-pressed-state-layer-color
pressed-state-layer-opacity--ct-sys-state-pressed-state-layer-opacity --ct-card-elevated-pressed-state-layer-opacity--ct-sys-state-pressed-state-layer-opacity --ct-card-filled-pressed-state-layer-opacity--ct-sys-state-pressed-state-layer-opacity --ct-card-outlined-pressed-state-layer-opacity

Other tokens⁠

TokenValue
--ct-card-container-color--ct-sys-color-surface-container-low --ct-card-container-color
--ct-card-container-elevation--ct-sys-elevation-level1 --ct-card-container-elevation

Names and states⁠

A card has no role and takes no focus, so assistive technology does not announce it as a card; the WAI-ARIA Authoring Practices Guide has no pattern for one.

  • A card has no accessible name of its own. Give the content a heading, or place the card in a landmark or list item that your page names.
  • aria-label, aria-labelledby, and role on a card are removed from it and have no effect. No other aria-* attribute you add takes effect either.
  • Say in the content what a badge means, in text. A count or a dot alone does not tell a user what it counts.
  • A card has no tooltip of its own. A plain tooltip anchored on it describes nothing, since the card takes no focus.
  • For a whole card that is one control, use an Action card, which is announced as a button or a link.

Keyboard and focus⁠

Key Action
Tab Moves past the card; the card is not a tab stop
  • A card handles no keys. Controls you place inside take Tab and their own keys, as they do anywhere on the page.
  • A card draws no focus ring, because it has nothing to focus.

Pointer and touch⁠

  • A plain card has no touch target, because it takes no pointer action. An Action card carries one at least 48 by 48 pixels, which meets WCAG 2.5.8.
  • Give each control inside a card a target of at least 24 by 24 pixels.

Display settings⁠

  • In forced-colors mode the card paints its surface in the system Canvas color and gives slotted content full opacity.

Standards⁠

With its defaults, the card meets zero WCAG 2.2 success criteria, because it has no role, name, or control of its own. Three more depend on how you use it:

  • 1.3.1 Info and Relationships (A) — mark up the content inside as headings, lists, and paragraphs, so its structure is not only visual.
  • 2.4.7 Focus Visible (AA) — a card takes no focus, so every control you place in it must show a visible focus indicator.
  • 2.5.8 Target Size (Minimum) (AA) — keep every control inside a card at least 24 by 24 pixels.