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--divided to add horizontal lines between the items and
.has-bullet to add bullets.
This is meant to be the new default list style please use this going forward.
You can omit the .has-bullet class to style a list without them but keep in mind that the bulleted version is to be used as the default.
You can use the class .p-list--divided to style an ordered list.
Note:
You can combine both .is-ticked and .p-list--divided to style a
list with horizontal dividers and tick icons.
Use the class .p-list for a list without bullets and more spacing between
items than the basic lists.
Deprecated:
If you want nested ordered lists to have numbers based on their parents, you can add the class p-list--nested-counter to the ordered list element.
Note:
Add the .is-ticked or .is-crossed classes to each list item to display tick/cross icons.
Apply the class .p-inline-list to display all the list items in one line.
Apply the class .p-inline-list--middot to add a middot character between
inline list items.
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.
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.
When the steps don't have headings use <p> paragraph as .p-stepped-list__title.
The stepped list should be used for step-by-step instructions.
The stepped list can be combined with a .p-list--divided list to provide more
granular step-by-step instructions.
Note:
If you wish to split the items in a list into two columns above $breakpoint-small, you can do so by adding the class is-split to the list element.
To display a list of items that flow horizontally in a grid, use .p-list--horizontal-section-wrapper .p-list--horizontal-section.
By default, the horizontal section splits items 25/25/25/25 on large, 50/50 on medium and 100% on small screens.
The horizontal section's column layout is responsive to the size of the .p-list--horizontal-section-wrapper container,
and does not use the grid breakpoints.
It uses container queries
to adjust the layout based on the container's width. The following table shows the number of columns for different
container widths:
| Container width | Number of columns |
|---|---|
| < 66ch | 1 |
| 66ch <= width < 100ch | 2 |
| >= 100ch | 4 |
For optimal behaviour, you should use at least 4 list items to fit at least 1 row on all screen sizes.
You can also add the .is-25-75 modifier to reserve 25% space at the start of the list and place the remaining items in the remaining 75% space.
This is especially effective when a section heading precedes the list.
For optimal behaviour, you should use at least 3 list items to fit at least 1 row on all screen sizes.
To separate non-list content with a responsive divider, see our Divider component.
For a more interactive layered lists style view the list tree component.
To import list patterns into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import '../vanilla';
@include vf-base;
@include vf-p-lists;
To include individual list patterns you need to include the vf-p-list-placeholders mixin first.
// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;
@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.
You can use lists in React by installing our react-component library and importing List component.