List
An inset grouped list. Rows can be links or buttons; group headers stick while their group scrolls.
Examples
Inset list
Group headers and handles
Today
Review glass thickness 09:41
Ship presets 11:00
Tomorrow
Docs: layouts
RTL audit
Icon set
Anatomy
.list | Frosted container with a medium shadow. Rows are its direct children. |
> a / > button | Interactive row: hover and press fill, and a chevron drawn at the end. |
> div | Static row: same layout, no hover and no chevron. |
> h6 | Optional group header between rows. Sticks to the top while its group scrolls, when the list has a height and overflow-y: auto. |
API
| Attribute | Values | Description |
|---|---|---|
aria-busy | true | Dims and blurs the rows and pulses three squares over them; the list ignores the pointer. |
Accessibility
- Rows are direct children, so the list is not a
<ul>. Addrole="list"androle="listitem"when the count matters to listeners. - Use
<a href>for rows that open something and<button>for rows that act. The chevron is decorative and drawn on both. - Group headers are
<h6>, so they appear as level-6 headings. Keep that in mind in the page outline.
| Key | Effect |
|---|---|
| Tab | Moves between link and button rows. Static rows are skipped. |
| Enter | Follows a link row or activates a button row; a button row also answers Space. |