Lists

---

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.

Default

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

Ticked

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

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

Responsive divider

A responsive divider inserts divider lines between sections of content. On small screens (up to $breakpoint-medium), the divider lines appear horizontally. On screens bigger than \$breakpoint-medium, the divider lines appear vertically, centered in the column gutters.

View example of lists with a responsive divider

Inline

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

View example of the inline list pattern

Middot

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

Split

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

Import

To import just this base element into your project, copy the snippet below and include it in your main Sass file.

@import 'patterns_lists';
@include vf-p-lists;

To add dividers into your project, copy the snippet below and include it in your main Sass file.

@import 'patterns_divider';
@include vf-p-divider;

// grid column classes are used within divider component, so you need to include grid pattern as well
@import 'patterns_grid';
@include vf-p-grid;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.

Design

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

Related

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