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.
Ticked
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
.
Horizontal divider
Use the class .p-list--divided
to add horizontal lines between the items.
Ticked with horizontal divider
You can combine both .is-ticked
and .p-list--divided
to style a
list with horizontal dividers and tick icons.
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.
Inline
Apply the class .p-inline-list
to display all the list items in one line.
Middot
Apply the class .p-inline-list--middot
to add a middot character between
inline list items.
Inline stretched
New
Apply the class .p-inline-list--stretch
to stretch the list items to fill the full width of the parent container.
You can use the align utilities to align the content of individual items.
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
.
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.
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.
Import
To import list patterns 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;
To include individual list patterns you need to include the vf-p-list-placeholders
mixin first.
@import 'patterns_lists';
@include vf-p-list-placeholders;
// choose individual list patterns to include
@include vf-p-list;
@include vf-p-list-divided;
@include vf-p-list-item-state;
@include vf-p-inline-list;
@include vf-p-inline-list-middot;
@include vf-p-inline-list-stretch;
@include vf-p-stepped-list;
@include vf-p-stepped-list-detailed;
@include vf-p-list-split;
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.