Skip to content
M3 Expressive

Containment

Cards, dialogs, bottom and side sheets, lists, dividers and carousels — the M3 Expressive surfaces that hold and group content. Everything below is live: hover, press, drag and open them.

Cards

Three container styles with a 12dp corner. Interactive cards get a state layer, ripple and one elevation level on hover; elevation and color changes run on the default-effects spring.

Elevated card

Supporting text

Cards contain content and actions about a single subject. 16dp side padding.
Elevated surface-container-low · level1 (hover level2) · corner 12dp
Filled card

Supporting text

Cards contain content and actions about a single subject. 16dp side padding.
Filled surface-container-highest · level0 (hover level1) · corner 12dp
Outlined card

Supporting text

Cards contain content and actions about a single subject. 16dp side padding.
Outlined surface · 1dp outline-variant (focus on-surface) · corner 12dp
Elevated

Click, hover or Tab + Enter

0 clicks
Filled

Click, hover or Tab + Enter

0 clicks
Outlined

Click, hover or Tab + Enter

0 clicks
Link card

Rendered as <a> via href

Interactive Whole card is one action · state layer on-surface 8 / 10 / 10% · ripple · hover +1 level · focus ring 3dp secondary
Mountain landscape
Weekend trip

3 nights · from $420

Hike to the summit, then unwind at a lakeside cabin.
Inset media

Card.Media inset

City street
With media and actions Media full-bleed (inherits top corners) or inset (12dp) · title medium · body medium on-surface-variant · actions end-aligned, 8dp gap
md
lg
xl
xxl
Expressive shapes shape md 12dp (spec) · lg 16 · xl 28 · xxl 48
Disabled

aria-disabled

Drag me

Enabled

Disabled · dragged Disabled content 38% · dragged level4 (elevated) / level3 + 16% on-surface layer — drag the right card

Dialogs

Basic dialogs are 280–560dp wide with 28dp corners, 24dp padding and surface-container-high at level3 over a 32% scrim. They fade in while scaling 0.8 → 1 on the default-spatial spring and leave on fast-effects.

Basic Headline small 24/32 · body medium · title→body 16dp · body→actions 24dp · actions 8dp gap, end-aligned
With hero icon Icon 24dp secondary · icon→title 16dp · content centered
Scrolling list content Dialog.Body scrolls · 1dp outline dividers appear while content overflows · max height 100vh − 160dp
Full-screen Header 56dp · close icon 24dp · title large · surface · header on scroll surface-container + level2 · body padding 24dp
Alert dialog Same container (28dp, surface-container-high, level3) · Media = hero icon · Action / Cancel = text buttons

Bottom sheets

surface-container-low with 28dp top corners, max 640dp wide, level1. A 32 × 4dp drag handle sits in a 48dp touch area (22dp above and below). Show / settle on the default-spatial spring, hide on fast-effects.

9:41
Places
Standard No scrim, page stays interactive · starts at the 56dp peek · snap points 56dp / 45% / 88% · drag the handle up
Modal Scrim 32% · focus moves into the sheet · drag down, Esc or tap the scrim to dismiss · top margin 72dp (56dp > 640dp)
Modal with snap points snapPoints 50% / 90% · scrim fades in at the last snap point

Side sheets

Standard sheets sit inline (surface, 256dp default, max 400dp, 1dp divider) and animate their width; modal sheets are surface-container-low at level1 with 16dp corners on the inner edge over a 32% scrim.

Inbox
Coastline
Coastline
Alpine lake
Alpine lake
Desert dunes
Desert dunes
Old town
Old town
Rainforest
Rainforest
Glacier
Glacier
Canyon
Canyon
Harbor
Harbor
Standard Inline · surface · width 256dp · divider outline-variant · title large on-surface-variant · 24dp padding · actions 72dp
Modal surface-container-low · level1 · 16dp inner corners · max 400dp · scrim 32% · detached: 16dp margins + corners

Lists

Expressive list items: 56 / 72 / 88dp for one / two / three lines, 16dp side padding, 10dp vertical padding, 12dp between slots. Interactive items morph their corners on the fast-spatial spring (hover 12dp, pressed 16dp); selection fills secondary-container with 16dp corners.

  • Leading icon
  • A Leading avatar 100+
  • Leading image
  • Headline only
One line 56dp · leading icon 24dp / avatar 40dp · 56dp image grows the item to 72dp · trailing icon 24dp / text label-small
  • Ali Connors Brunch this weekend? 10 min
  • Overline Overline + headline
  • Leading video 114 × 64dp thumbnail 3:24
Two lines 72dp · headline body-large · supporting body-medium on-surface-variant · overline label-small · 114 × 64dp video → 80dp
  • Travel Summer itinerary Flights, hotels and a day trip to Sintra Jun 12
  • M Two-line supporting text Supporting text that is long enough to wrap onto a second line and then get clamped.
  • Video Product walkthrough 12 min · 1.2k views
Three lines 88dp · leading / trailing top-aligned · supporting text up to 2 lines or overline + 1 line
Interactive · selected · disabled · dividers Selected secondary-container + emphasized headline · disabled 38% · dividers 1dp inset 16dp
  • Display
  • Sound
Segmented (expressive) 2dp gaps · 4dp inner / 16dp outer corners · hover 12dp · pressed / selected 16dp · surface-container tiles

Divider

1dp outline-variant hairlines that group content. Use them sparingly; spacing and surfaces usually separate better.

Full width
Inset (start)
Middle inset
End
Horizontal Full width · inset start 16dp · middle inset 16dp both sides
Full Start inset Middle inset End
Vertical 1dp wide · stretches to the container · inset start / middle 16dp