Lists
The Lists component helps organise related items, making content more structured and easy to scan. Lists can be simple bullet points, sets of links, or styled for specific newsletter formats.
Consistent list formatting improves readability and ensures information is accessible across devices and email clients.
When to use
Use a list when you need to:
- present multiple related items in a clear, structured way
- highlight navigation or references in a newsletter or update
- group content by icons, categories or themes
- provide a quick table of contents or issue summary.
When not to use
Avoid lists when:
- a single sentence or short paragraph is sufficient
- the content is highly detailed – use Cards or Features instead for better presentation.
Variations
The Lists component offers several layout options to suit different content needs. You can choose from simple unordered lists for basic grouping, link-based lists for navigation, and structured formats for newsletters and reports. Each variation is designed to improve readability and accessibility. Choose the right variation based on whether your list is intended for scanning, linking or presenting structured information across columns.
Bullet list
Simple bullet list for short grouped content and plain-language summaries.
Nested list
Indented list structure for hierarchy, steps and grouped details.
Link list
List of links for navigation, resources or grouped destinations.
Icon list
Icon-led list for faster scanning and clearer categorisation.
2-column justified list
Balanced 2-column list for structured summaries and comparisons.
In this issue
Newsletter-style contents list that helps readers jump to key sections.
2-column feature list
Two-column list with headings and supporting text for balanced updates.
Date list, day divider
Date-led list grouped by day under month headings for schedules and timelines.
Date list, full date
Chronological date list that makes month, day and year explicit.
Linked content list
Stacked list of linked updates with headings, supporting text and dividers.
Linked content list without headings
Simplified linked update list for short announcements that do not need item headings.
Linked content list with button
Linked update list that ends with a stronger call to action.
Payment summary list
Structured payment breakdown for transactional and billing messages.
Design guidance
- Keep list items short and scannable – aim for one line where possible.
- Use icons sparingly to support meaning, not just decoration.
- Maintain consistent spacing for readability.
- Avoid mixing multiple list types in the same email unless it improves clarity.