Design
When to use it (and when not to)
Section titled “When to use it (and when not to)”Use the Simple List when you need to:
- Display groups of related items, such as options or categories.
- Present content that doesn’t require complex interaction beyond item selection or viewing.
- Integrate a list inside other container components like dropdowns (e.g. lists of options) or modals and side panels (lists of actions or links).
Do not use this component for tabular or multi-column data — in those cases, use a Data Table or similar component.
Properties
Section titled “Properties”Simple List
List
Type: Simple List
Show Scroll Bar: true
Has bottom cta: true
.item/List-Options
Type: Text
State: Rested
Has left icon: true
Has right icon: true
Has WLTP: true
Has line: true
Multiselect
List
Type: Multiselect
Show Scroll Bar: true
Has bottom cta: true
Checkbox
Size: Small
State: Default
Show item count: true
Layout and spacing
Section titled “Layout and spacing”Type: Simple List
Section titled “Type: Simple List”List
List
Direction: Horizontal
Alignment: Top left
Vertical resizing: Hug
Horizontal resizing: Fixed 455px
Simple List
Simple List
Direction: Vertical
Alignment: Top left
Vertical resizing: Fill
Horizontal resizing: Fill
Type: Multiselect
Section titled “Type: Multiselect”List
List
Direction: Horizontal
Alignment: Top left
Vertical resizing: Fixed
Horizontal resizing: Fixed
Frame (Checkbox List + CTA)
Frame 1171276204
Direction: Vertical
Alignment: Bottom left
Vertical resizing: Fill
Horizontal resizing: Fill
Item spacing: 16
Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
color-foreground-neutral-default | Text color | List option label |
color-foreground-neutral-default | Text color | List option label |
color-foreground-neutral-subtle | Text color | List option (hover) |
color-foreground-neutral-subtle | Text color | List option (hover) |
color-foreground-contrast-default | Text color | List option link (contrast) |
color-foreground-contrast-default | Text color | List option link (contrast) |
color-surface-neutral-subtle | Background color | List option (hover / selected) |
color-surface-neutral-subtle | Background color | List option (hover / selected) |
color-border-contrast-default | Border color | Divider line |
color-border-contrast-default | Border color | Divider line |
color-border-neutral-default | Border color | Divider line (hover) |
color-border-neutral-default | Border color | Divider line (hover) |
color-border-focus-neutral-default | Border color | List option (focus) |
color-border-focus-neutral-default | Border color | List option (focus) |
Spacing
Section titled “Spacing”| Name | Applied as | Applied to |
|---|---|---|
spacing-04 | Gap / Padding block | List option |
spacing-04 | Gap / Padding block | List option |
spacing-08 | Padding block / Padding inline / Gap | List option (no image) |
spacing-08 | Padding block / Padding inline / Gap | List option (no image) |
spacing-10 | Padding inline | Checkbox control |
spacing-10 | Padding inline | Checkbox control |
Guidance on how to use a component.
- Keep list item labels concise. Aim for short, scannable text that fits naturally on one line.
- Ensure each item contains only one line of text. The component is designed for single-line labels to maintain clarity and visual consistency.
- Use clear and meaningful wording. Each label should communicate its purpose without extra detail or filler.
- Review long labels individually. If an item requires more characters, evaluate it in isolation to determine whether truncation is appropriate for that specific case.
- Use the List only for simple, straightforward options. It should present clear choices without additional descriptions or metadata.
Guidance on what to avoid when using a component.
- Don’t include two lines of text. Multi-line labels break the component layout and the intended interaction patterns.
- Don’t truncate by default. Truncation should be an exception, not the rule. Avoid shortening content unless absolutely necessary and approved case by case.
- Don’t overload items with extra information. Only use sublabels, icons, tags, or any secondary text when needed.
- Don’t rely on the List to communicate complex messages. If the content is too long or detailed, consider a different component or content strategy.
- Don’t use inconsistent wording lengths. Excessively long items next to very short ones create visual imbalance — keep content harmonised.
Usage guidelines
Section titled “Usage guidelines”Guidance on where this component has been used
Use the List component to display a set of simple, scannable options — typically within other components such as dropdowns, menus, or selection patterns. Each item should present a clear, single-line label that helps users quickly read and compare choices.
Keep the content concise to avoid layout issues and ensure a smooth browsing experience. If an item requires more text than usual, review it individually to determine whether truncation is appropriate or whether the content should be rephrased or moved to a different component.
Lists work best when presenting straightforward choices without additional metadata or complexity.