toc

Card

A card contains content and actions about a single subject.

<md-gb-card>
  <h2>Weekend in Lisbon</h2>
  <p>Flights and hotel for 2 nights.</p>
  <md-gb-button color="outlined">Details</md-gb-button>
  <md-gb-button color="filled">Book</md-gb-button>
</md-gb-card>

Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-card.json (setup)

Usage guidelines

Link to “Usage guidelines”

One subject per card. A card shows related content and actions about a single topic, arranged so the hierarchy is clear.
Choose a color. Use elevated, filled or outlined to set how much the card stands out from its background.
Make it an entry point. An interactive card can lead to more detail or another page.
Lay out collections. Cards work in a grid, a vertical list or a carousel.

This component is new in M3 Expressive.

Anatomy

Link to “Anatomy”

A card is a container with 16dp of inline padding around its content. The container slot replaces its background.

Lemon pasta, ready in 20 minutes

<md-gb-card>
  <div slot="container" style="background: var(--md-sys-color-tertiary-container)"></div>
  Lemon pasta, ready in 20 minutes
</md-gb-card>

Examples

Link to “Examples”

Colors

Link to “Colors”

Set color to elevated, filled or outlined (default).

Elevated

Filled

Outlined

<md-gb-card color="elevated">Elevated</md-gb-card>
<md-gb-card color="filled">Filled</md-gb-card>
<md-gb-card color="outlined">Outlined</md-gb-card>

Interactive

Link to “Interactive”

Add interactive to make the whole card a button. Add href to make it a link instead, and label it with aria-label.

Weekend in Lisbon

<md-gb-card interactive href="/trips/lisbon" aria-label="Open Weekend in Lisbon" color="filled">
  Weekend in Lisbon
</md-gb-card>

Selectable

Link to “Selectable”

Add selectable to an interactive card so activating it toggles selected. A selected card shows a check mark.

Weekend in Lisbon

<md-gb-card interactive selectable selected aria-label="Weekend in Lisbon" color="filled">
  Weekend in Lisbon
</md-gb-card>

Disabled

Link to “Disabled”

A disabled card can't be activated.

Sold out

<md-gb-card interactive disabled aria-label="Sold out" color="filled">
  Sold out
</md-gb-card>

Accessibility

Link to “Accessibility”

An interactive card has the button role, or the link role with href. Give it an accessible name with aria-label when its content isn't enough.
A card that isn't interactive is a plain container and needs no role. Its actions are focusable on their own.
Hide purely decorative images from assistive technology.
If a card can be dragged, offer a single-pointer alternative such as a menu with move and delete actions.
Tab moves to the next card or actionable element, and Enter or Space activates it.

Compatibility

Link to “Compatibility”

Material Design 3Spec checked94% tokens

79 of 243 buildable spec units are tested, 37 are excluded with a written reason and 0 are uncovered (the target is 0). 33 of 35 token declarations match the spec (94%), and 2 have no spec token.

cards on m3.material.io (opens in a new tab) How compliance is measured

BaselineWidely availableChrome 124Edge 124Firefox 125Safari 17.4

The component’s own CSS and JavaScript rely only on web platform features that are Baseline widely available: it works in Chrome 124, Edge 124, Firefox 125, Safari 17.4 and later.

Newer features it uses where the browser has them (progressive enhancements):

Cursor styles (opens in a new tab) Limited availability degrades safely where it is missing

Browser support Learn more about Baseline (opens in a new tab)

WAI-ARIAaxe and ARIA 1.3 passButtonLink

Roles the component renders: button (opens in a new tab), link (opens in a new tab).

Follows the WAI-ARIA Authoring Practices: Button (opens in a new tab), Link (opens in a new tab).

3 rendered states run through axe-core and the WAI-ARIA 1.3 role and attribute rules in a real browser, with no known gaps.

WAI-ARIA 1.3 (opens in a new tab) ARIA Authoring Practices (opens in a new tab) Accessibility

Lighthouse98 · 100 · 100 · 100

Performance
Accessibility
Best practices
SEO

Audits under 90:

Eliminate render-blocking resources
Minify JavaScript
Reduce unused CSS
Enable text compression
Network dependency tree
Render blocking requests

Lighthouse 12.8.2 (desktop, 2026-11-08) on the component alone: its first example on a page of its own, without this site's shell. The modules are the development build (not bundled or minified), so the performance score is indicative.

Open the test page About Lighthouse (opens in a new tab)

API reference

Link to “API reference”

<md-gb-card>

Link to “<md-gb-card>”

A Material Design component.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`color` The color of the card.	`color`	`CardColor`	`'outlined'`
`disabled` Whether the card is disabled.	`disabled`	`boolean`	`false`
`dragged` Whether the card is picked up and being dragged (raised elevation). The app moves the card. Spec Cards > Accessibility > Dragging and dismissing (WCAG 2.5.7): also offer a single-pointer alternative, e.g. a menu opened by tapping a "more" button or pressing and holding the card, with move and delete actions (see the "Reorder (drag or menu)" demo). Don't let the menu cover the card.	`dragged`	`boolean`	`false`
`href` Makes an interactive card a link (spec: directly actionable cards have the button or link role).	`href`	`string`	`''`
`interactive` Whether the card is interactive.	`interactive`	`boolean`	`false`
`selectable` Whether an interactive card can be selected: activating it toggles `selected` (selection.md lists cards among the components that can be selected).	`selectable`	`boolean`	`false`
`selected` Whether a `selectable` card is selected. A selected card shows a check mark and a change in surface color.	`selected`	`boolean`	`false`
`target` The link target, when `href` is set.	`target`	`""`	"_blank"

Slots

Link to “Slots”

Slot	Description
default	Used to display the card's content. The card has 16dp left/right padding; set `--padding-inline: 0` for full-bleed content. Add padding to content, not the host <md-gb-card> element.
`container`	Used to set a custom background container for the card.

CSS parts

Link to “CSS parts”

Part	Description
`::part(card)`	The card's root element.
`::part(card-btn)`	The card's main action (a button, or a link when `href` is set), when interactive.

CSS custom properties

Link to “CSS custom properties”

Property	Description
`--container-color`
`--container-elevation`
`--container-shape`
`--disabled-content-opacity`
`--outline-color`
`--outline-width`
`--state-layer-color`