Component · content (inside a glass container or under glass chrome)

Liquid glass list

Scrolling rows of content.

Also called scroll area, table, rows, settings list

A grouped settings list with coloured icons, dividers, trailing details and a switch over a procedural backdrop.
A grouped settings list with coloured icons, dividers, trailing details and a switch over a procedural backdrop. (light)
A grouped settings list with coloured icons, dividers, trailing details and a switch over a procedural backdrop.
A grouped settings list with coloured icons, dividers, trailing details and a switch over a procedural backdrop. (dark)

Spec

Material
flat rows
Profile
flat
Geometry
rows 44–56 (touch) / 32–36 (desktop); a grouped list sits in a glass card (radius 16–24, rows flush with its padding, separators inset past the icon)
Bezel (px)
0
Displacement (px)
0
Blur (px)
0

Anatomy

  • rows with leading icon tile, title, secondary, trailing chevron/switch
  • 1 px separators white 25 %
  • capsule scroll thumb on hover

States

  • rest
  • row press: flat tint
  • selected

Rules

  • Rows are flat; a list inside a glass card is not glass-on-glass as long as rows have no own optics.