List
List subheader
Consistent section labels with list typography, inset alignment and CSS-only sticky.Anatomy
The public structure is divided into three responsibilities.
- 1
Root
A neutral div by default; li or p when the consumer markup requires it.
- 2
Label
Text with subheader typography, from the title prop or the default slot.
- 3
Modifiers
Inset alignment and sticky presentation, both CSS-only.
Interactive configuration
Toggle sticky and inset, and compare a title prop with a slotted heading.
No inferred heading level
The label is text, not a hardcoded h2/h3: only you know the document outline.
Sticky needs a scroller
Inside a non-scrolling parent it behaves like ordinary native sticky.
States
States preserve accessibility and expected structure.
Section label
Passive text with subheader typography, aligned to the list content edge.
Aligned to headlines
The label aligns with item headlines rather than their leading media.
Pinned
The label pins to the block start of the local scroll container.
Real heading
A slotted h3 keeps subheader geometry through the documented reset.
In context
Two sections inside a list, one labelled by a slotted heading.