material-card

MD3 cards — elevated / filled / outlined. Anatomy slots (media, headline, subhead, supporting, actions); actionable via href or clickable; disabled.

variants — full anatomy (non-actionable)

Elevated

Sept 14 · 5 min read

Soft shadow over a low-tone surface. Good for grouping content with moderate emphasis against the page background.

Filled

Highest container tone

Subtle separation from the background. Lower emphasis than elevated or outlined; useful for inline regions.

Outlined

Plain surface + border

Highest emphasis of the three; the border draws a crisp visual boundary around the container.

actionable — link (href)

Trip to Iceland

Hover or focus this card

The whole surface is the click target. Notice the state-layer and the L1 → L2 elevation bump on hover.

Sourdough recipe

No media, just text

Outlined actionable card. The outline stays; hover adds a subtle elevation L0 → L1 plus the on-surface state layer.

actionable — button (clickable)

Q3 roadmap

Click to open · check console

No href — renders as a <button> inside the shadow root. Tab to focus, Space/Enter to activate.

Disabled

0.38 opacity, no pointer effects

disabled attribute. Hover, focus and click are all suppressed.

minimal layouts

Headline only

Headline + actions

No subhead

Just headline plus supporting text — subhead slot is empty and contributes no extra spacing.

Sample usage 
<!-- non-actionable container with full anatomy -->
<material-card variant="elevated">
  <img slot="media" src="cover.jpg" alt="" />
  <h3 slot="headline">Title</h3>
  <span slot="subhead">Sept 14 · 5 min</span>
  <p slot="supporting">Body text describing the card.</p>
  <material-button slot="actions" variant="text" label="Read more"></material-button>
</material-card>

<!-- actionable as a link -->
<material-card variant="outlined" href="/article/42" aria-label="Open article">
  <h3 slot="headline">Article title</h3>
  <p slot="supporting">Excerpt…</p>
</material-card>

<!-- actionable as a button -->
<material-card variant="filled" clickable onclick="open(item)">...</material-card>

<!-- disabled -->
<material-card variant="elevated" clickable disabled>...</material-card>