Data Display
List
A list is a component used to organize and display a continuous collection of related items in a structured, scannable format
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features4 checks
- Semantic HTML list elements
- Proper nesting structure
- Adequate spacing
- Clear visual hierarchy
When to use this component
✓Do's
- •Ordered or unordered item lists
- •Checklists with status indicators
- •Navigation link lists
- •Simple data displays
✗Don'ts
- •For structured data, use Table.
- •For card-based layouts, use Card grid.
- •For key-value pairs, use DescriptionList.
- •For complex items, use Card.
Do's and Don'ts
✓ Do's
Use consistent icon + label + trailing layout for all items in a list. It lets users scan quickly and find what they need.
✗ Don'ts
Aadhaar Card
Address Proof, Required document for verification (please upload a valid copy)
Photo
Don't mix item sizes, fonts, or content density, inconsistent layouts slow down scanning and look unpolished.
✓ Do's
Choose a single size (S/M/L) and stick with it for the entire list, size matches the screen density and use case.
✗ Don'ts
Aadhaar Card
Address Proof
Passport Photo
Don't mix sizes or omit icons on only some items, it creates uneven rhythm and looks broken.