List
List of tiles (Material ListTile equivalent): rows of optional leading icon/avatar, a title with optional 12px subtitle, and optional trailing meta (lozenge, count, chevron). One-line rows are 40px min-height, two-line rows 56px (detected via :has(.list-item-subtitle) — no extra class needed). Rows are static <li class="list-item">, or interactive when the row itself is <a class="list-item"> / <button class="list-item"> (full-bleed reset, interaction-hovered on hover, pressed on :active).
Root: .list on <ul>, <ol>, <div>, <nav>
Examples
- JCJetha ChanProduct designerActive
- DKDana KimEngineeringAway
<ul class="list list-divided"><li class="list-item"><span class="list-item-leading"><span class="avatar avatar-md">JC</span></span><span class="list-item-content"><span class="list-item-title">Jetha Chan</span><span class="list-item-subtitle">Product designer</span></span><span class="list-item-trailing"><span class="lozenge lozenge-success">Active</span></span></li><li class="list-item"><span class="list-item-leading"><span class="avatar avatar-md">DK</span></span><span class="list-item-content"><span class="list-item-title">Dana Kim</span><span class="list-item-subtitle">Engineering</span></span><span class="list-item-trailing"><span class="lozenge lozenge-default">Away</span></span></li></ul><ul class="list list-compact"><li><a class="list-item selected" href="#" aria-current="true"><span class="list-item-content"><span class="list-item-title">Board</span></span></a></li><li><a class="list-item" href="#"><span class="list-item-content"><span class="list-item-title">Backlog</span></span></a></li><li><button class="list-item" type="button"><span class="list-item-content"><span class="list-item-title">Reports</span></span><span class="list-item-trailing">›</span></button></li></ul>Contract
Variants & modifiers
| Class | Axis | Rules |
|---|---|---|
list-divided | modifier | optional |
list-compact | modifier | optional |
Structure
| Selector | Required | Description |
|---|---|---|
.list-item | required | Row tile. As <li class="list-item"> for static rows, or <li><a class="list-item"> / <li><button class="list-item"> for interactive rows. .selected marks the chosen row (selected-bg/selected-text). |
.list-item-content | optional | Flexible middle column (flex:1, min-width:0) stacking .list-item-title over an optional .list-item-subtitle; both truncate. |
.list-item-leading | optional | Leading slot (icon, avatar, checkbox), flex-shrink:0. |
.list-item-subtitle | optional | Second line, 12px text-subtle; its presence bumps the row to the 56px two-line height (48px in .list-compact). |
.list-item-trailing | optional | Trailing slot for meta text, lozenges, or a chevron; text-subtle, flex-shrink:0. |
Accessibility
| On | Attribute | Level | When |
|---|---|---|---|
.list-item | aria-current | recommended | The .selected row represents the current page/item in a navigation list — add aria-current so selection is not conveyed by color alone. |
Keep the list a real <ul>/<ol> with <li> children so item count and position are announced. Interactive rows must be real <a>/<button> elements filling the row (never click handlers on <li>). The .selected state is color-only — pair it with aria-current (navigation) or aria-selected (selection widgets) as appropriate. Leading avatars/icons are decorative unless they carry their own label.
Nesting
Allowed in:
page content.card-body.drawer-body.sheet-body.modal-body
Never inside (or containing):
.list.dropdown-menu.listbox