Lists

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

Simple list

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

List with icon

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

View example of the ticked list pattern

List with dividers

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

View example of the divided list pattern

List with icons and dividers

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

Inline list

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

View example of the inline list pattern

Middot-separated inline list

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

View example of the middot list pattern

Stepped list

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-list-step.

View example of the stepped list pattern

Stepped list: detailed

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

Ticked list

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

View example of the pattern list ticked

Split list

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