List item
Row for people, files or settings lists with leading slot, title, supporting text, meta and chevron.
<ul class="px-list" style="max-width:420px;width:100%">
<li><a class="px-list-item" href="#"><span class="px-avatar">OR</span><span class="px-list-item__text"><span class="px-list-item__title">Olivia Rhye</span><span class="px-list-item__sub">Product designer · Design team</span></span><span class="px-list-item__meta">2m</span><svg class="px-icon" aria-hidden="true">…</svg></a></li>
<li><a class="px-list-item" href="#" aria-current="true"><span class="px-avatar px-avatar--accent">PB</span><span class="px-list-item__text"><span class="px-list-item__title">Phoenix Baker</span><span class="px-list-item__sub">Engineer · Platform</span></span><span class="px-list-item__meta">1h</span><svg class="px-icon" aria-hidden="true">…</svg></a></li>
<li><a class="px-list-item" href="#"><span class="px-avatar px-avatar--neutral"><svg class="px-icon" aria-hidden="true">…</svg></span><span class="px-list-item__text"><span class="px-list-item__title">Brand assets</span><span class="px-list-item__sub">24 files</span></span><svg class="px-icon" aria-hidden="true">…</svg></a></li>
</ul>Usage
- The whole row is the target.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-list | class | List container (ul). |
px-list-item | class | Row (a or button). |
__text · __title · __sub · __meta | class | Slots. |
Figma properties
List item20 variants · page “Data display”Open
Row for people, files or settings lists. Leading slot (avatar/icon), title, supporting text, trailing meta and a chevron that points to the inline end. Whole row is the target.
| Property | Type | Values |
|---|---|---|
| Title | Text | “Olivia Rhye” |
| Supporting | Text | “Product designer · Design team” |
| Show supporting | Boolean | — |
| Leading | Boolean | — |
| Meta | Boolean | — |
| Chevron | Boolean | — |
| Size | Variant | Medium Large |
| State | Variant | Active Hover Focused Selected Disabled |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-list-item-meta | color-content-neutral-tertiary | #667085 |
--px-list-item-radius | radius-md | 8px |
Accessibility
- Selected row: aria-current="true".