Anatomy
- Connect your data source
- Map your fields
- Launch the sync
- Required
- Optional
| # | Required | Element | Description |
|---|---|---|---|
| 1 | Container | Renders as an ordered or unordered list and holds the items. | |
| 2 | No | Marker | The bullet or number preceding each item. Can be hidden for an Icon. |
| 3 | Item | Renders as a list item (li) and holds a single entry's content. |
Guidelines
When to use
The List component is used to present an ordered (ol) or unordered (ul) group of items within semantic HTML markup. Lists are best used to organize a related group of items by recommendation, requirements, steps, or other.
List vs DescriptionList
Both List and DescriptionList are components that organize a group of items. However, it's important to understand the underlying difference as they are not interchangeable:
- List displays a set of items with no inherent pairing between them.
- DescriptionList pairs each term with a corresponding description or definition in a key-value relationship.
Best practices
Markers
Hide default markers when using a leading icon to better communicate meaning associated with the item, such as a checkmark to denote a completed step.
- Improved filters
- Faster rendering
- Improved filters
- Faster rendering
Sequence
Use an ordered list when the items are important to display in sequential order.
- Open a profile from the People page.
- Choose Invite test user from the profile Options menu.
- Confirm the invite to send it.
- Improved filters
- Faster rendering
- New export options
Types
- Connect your data source
- Map your fields
- Launch the sync
Ordered lists are used to communicate a series of steps or ranking, where the item's position carries meaning.
- Custom fields
- Webhooks
- Single sign-on
Unordered lists do not have an inherent order and can be used for items like features or requirements.
Appearance
Gap
Items are displayed with the default amount of gap space between them. Consider adding more space when items wrap to multiple lines so each item is clearly distinct from the others.
- Custom fields for tracking account-specific attributes
- Webhooks for syncing changes to external systems
- Single sign-on for centralized authentication
Additional gap space helps readability for longer list items.
- Custom fields
- Webhooks
- Single sign-on
No gap is best suited for shorter list items.
Marker style
Marker style sets the bullet or number marker preceding each item, regardless of whether the List is ordered or unordered.
- disc
- circle
- square
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- none
Marker style can be set independently of the underlying list element.
Behaviors
Rich content
List items are compatible with rich text. Icons, Links, any other contextual elements may be added for emphasis.
- Verify your sending domain in domain settings
- Delivery limits reset every 24 hours.
Icons, Links, and nested inline formatting can appear within a single item alongside plain text.
Content
Parallel structure
When writing list items, be consistent on grammatical structure. If one item begins with a verb, others should follow suit. This helps reader easily scan items and lessens cognitive load.
- Open a profile from the People page.
- Choose Invite test user from the profile Options menu.
- Confirm the invite to send it.
- Open a profile from the People page.
- A test user invite is sent from the Options menu.
- Confirming the invite.