Component · controls

Liquid glass accordion

Expandable sections.

Also called collapsible, disclosure, expander, faq

Three stacked accordion rows with the middle one expanded into a text panel, over zoomed desert ridges.
Three stacked accordion rows with the middle one expanded into a text panel, over zoomed desert ridges. (light)
Three stacked accordion rows with the middle one expanded into a text panel, over a zoomed night skyline.
Three stacked accordion rows with the middle one expanded into a text panel, over a zoomed night skyline. (dark)

Spec

Material
regular per row; a row that expands into long text switches wholly to frost (one material per body)
Profile
squircle
Geometry
rows 44–48 tall, radius 16–18, gap 8; chevron right
Bezel (px)
18
Displacement (px)
35–45
Blur (px)
3–6 (regular) / 10–16 (expanded, frost)

Anatomy

  • separate glass rows with gaps
  • title 14 semibold
  • chevron
  • expanded body text secondary

States

  • collapsed
  • expanded (height animates with spring; map regenerates at the end)

Rules

  • Rows are separate bodies (8 px gaps), not one glass slab with glass rows inside.