Bullet lists

Create simple and easily scannable lists with these list and nested list styles.

Other lists

Use link list styling when the list items are clickable. An un-styled list has no bullets, ticks or icons.

List item spacing

Use a large spaced list when you have interactive elements. This can be used to increase the affordance for touch devices.

User experience

Use lists to highlight product benefits, list downloadable assets, provide links to other pages or screens and much more.

When creating lists that sit next to one another, ensure the right amount of spacing between otherwise it can become difficult for users to scan and find information.

Visual design

Lists are arguably the most common UI element on the web so it’s important to have a flexible, robust and well-crafted solution.

We’ve extended the browsers default list styling and provided the option to use custom bullets or icons in any configuration. Although this provides more options and more flexibility it’s still important to adhere to the design system requirements, particularly when creating list items that are hyperlinks.

The Design system uses Primary (accent) colour to define hyperlinks etc. As a result the List Link component uses a (Primary) Arrow Right icon. Similarly if you needed a list of downloadable PDF’s you could use the Icon List component and assign a (Primary) PDF icon to each item in the list to indicate that these are links.

On the flip side, if you just need a basic Tick List or Bullet List where the items are not hyperlinks we’d recommend using an alternate icon colour to Primary so as not to confuse the customer.

Put simply. If it’s a hyperlink use Primary. If it’s not, use a different colour.

Lists also have 2 spacing options. For example, when designing for touch screens a list of links may require more affordance so we’ve added an option which increases the space between each list item.