If you want to display lists in a way that is more visually distinctive than the
<ul>, we have 7 list styles at your disposal.
Use the class
.p-list for a list without bullets and more spacing between
items than the basic lists.
.is-crossed classes to each list item to display tick/cross icons.
Use the class
.p-list--divided to add horizontal lines between the items.
Ticked with horizontal divider
You can combine both
.p-list--divided to style a
list with horizontal dividers and tick icons.
A responsive divider inserts divider lines between sections of content. On small screens (up to
$breakpoint-large), the divider lines appear horizontally. On screens bigger than
$breakpoint-large, the divider lines appear vertically, centered in the column gutters.
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.
The utility class
.is-dark can also be applied to a middot list:
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
When the steps don't have headings use
<p> paragraph as
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
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.
The responsive divider is available in a light and a dark theme. The colours used by both themes in the colour settings file. Overriding the colours of individual elements of the responsive is discouraged, as this may lead to accessibility issues, or inconsistencies with other components that use the same theme.
By default, the responsive divider uses the light theme. To change the global default, set
To change the appearance of an individual instance of the responsive divider pattern, you can use the
For more details about themes in Vanilla refer to the Color theming section of the documentation.
How it works
Lists provide orientation for users by letting them know when a collection of items are related, and whether or not the items are sequential. They also let screen reader users know how many items are in each list, and allow users to jump between lists within the content.
This component strives to follow WCAG 2.1 (level AA) guidelines, and care must be taken to ensure this effort is maintained when the component is implemented across other projects. This section offers advice to that effect:
Be sure to use the correct list type for your content:
- Unordered lists (
<ul>) can be used when the order of the content isn’t relevant.
- Ordered lists (
<ol>) are sequential, and are enumerated by the browser.
It’s important to make sure that all content which is visibly a list has the correct HTML structure. Avoid making paragraphs look like lists by using bullet symbols or numbers, as these will not be read out as related content. Similarly, avoid using lists for indentation or layout purposes.
- WAI-ARIA practices: Lists
- Web Accessibility Initiatives (WAI) page on the structure of Web content
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 add dividers 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-divider; // grid column classes are used within divider component, so you need to include grid pattern as well // import Vanilla and include base mixins // this only needs to happen once in a given project @import '../vanilla'; @include vf-base; @include vf-p-grid;
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
For a more interactive layered lists style view the list tree component.