If you want to display lists in a way that is more visually distinctive than the standard <ol> and <ul>, we have 7 list styles at your disposal.


Use the class .p-list for a list without bullets and more spacing between items than the basic lists.

View example of the list pattern


Add the class .is-ticked to each list item to display tick icons.

Note:The color of the tick icon is set by the $color-accent variable in settings.scss.

View example of the ticked list pattern

Horizontal divider

Use the class .p-list--divided to add horizontal lines between the items.

View example of the divided list pattern

Ticked with horizontal divider

You can combine both .is-ticked and .p-list--divided to style a list with horizontal dividers and tick icons.

View example of the ticked divided list pattern

Vertical divider

A divider is used to separate related content items.

View example of lists with a vertical divider


Apply the class .p-inline-list to display all the list items in one line.

View example of the inline list pattern


Apply the class .p-inline-list--middot to add a middot character between inline list items.

View example of the middot list pattern

Vertical stepped

If you want to display a list of items that form a set of steps — like a tutorial or instructions — you can use the class .p-stepped-list.

View example of the stepped list pattern

Horizontal stepped

The stepped list should be used for step by step instructions. This pattern is best used on a .p-strip--light as the description sections are displayed in a white box.

View example of the pattern stepped list detailed


If you wish to split the items in a list into two columns above $breakpoint-medium, you can do so by adding the class is-split to the list element.

View example of the patterns list split


For more information view the lists design spec, which includes the specification in markdown format and a PNG image.

For a more interactive layered lists style view the list tree component.