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