Lists
Lists are continuous, vertical indexes of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.
Live Preview
One-line List
Two-line List
Three-line List with Actions
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| itemMinHeight (one-line) | string | 56px | 48px | 48px |
| itemMinHeight (two-line) | string | 72px | 72px | 72px |
| itemMinHeight (three-line) | string | 88px | 88px | 88px |
| itemPadding | string | 16px | 16px | 16px |
| leadingElementSize | string | 40px | 40px - 48px | 40px - 48px |
| headlineColor | color | #1D1B20 | #038012 | #1A1A1A |
| supportingTextColor | color | #49454F | #666666 | #4A4A4A |
| dividerColor | color | #CAC4D0 | #999999 (20%) | #8A8A8A (20%) |
| hoverBackground | color | rgba(0,0,0,0.08) | rgba(3,128,18,0.08) | rgba(26,81,41,0.08) |
List Item Types
- One-line - Single line of text, minimal height
- Two-line - Headline with supporting text below
- Three-line - Headline, supporting text, and metadata or additional info
List Item Elements
- Leading - Icon, avatar, image, or checkbox
- Headline - Primary text content
- Supporting text - Secondary information
- Trailing - Text, icon, or control (switch, checkbox)
Usage Guidelines
- Use lists to present groups of related information
- Choose the appropriate list item height based on content density
- Include leading elements for visual scanning and recognition
- Use trailing elements for supplemental actions or information
- Apply dividers consistently - either all items or none
- Ensure touch targets are at least 48px for mobile interfaces