Data display
List
The workhorse row: leading asset, stacked text, trailing action.
Examples
States
Rendered states (visual reference; the live example above is the accessible one) | Default | Hover | Focus visible | Pressed | Disabled |
|---|
| Row | | | | | |
|---|
Anatomy
List anatomy| # | Part | Description | Presence |
|---|
| 1 | Leading asset | Avatar or icon | Optional |
|---|
| 2 | Text block | Title and supporting line | Required |
|---|
| 3 | Trailing action | Chevron or button | Optional |
|---|
Specifications
| Slots | Leading asset · text block · action |
|---|
| Padding | Top/bottom and left/right sized to meet mobile touch density |
|---|
Interaction
Keyboard| Key | Result |
|---|
| Tab | Each row link or action |
|---|
| Enter | Follows the link |
|---|
Pointer and touch| Trigger | Response |
|---|
| Hover | Tint with glow |
|---|
| Press | Slightly darker tint |
|---|
Accessibility
role · list
1.3.1Info and Relationships2.5.8Target Size (Minimum)4.1.2Name, Role, Value
Requirements| Requirement | How Rig meets it |
|---|
| Semantics | ul and li; give the list an aria-label |
|---|
| Interactive rows | The link covers the row. Do not add a second tab stop for the same target. |
|---|
| Target | Rows are at least 44px high |
|---|
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Keep one action per row | ✕Do not nest buttons inside a link row |
| ✓Use a divider, not a box, between rows | ✕ |