Lists
guidelines 
Overview
There are six styles of list using three different HTML markup techniques – unordered lists, ordered lists and description lists.
Visit the Guidance section of a Component page to find out which types of content can be included.
Unordered lists
There are three styles of Unordered list – the familiar bullet style list and two decorative styles.
Use the Unordered list element <ul> as the parent element and a List item <li> for each line.
Bullet list
class="ul-bullet"
Bullet lists can be nested up to four levels deep.
Decorative list
Decorative lists display different bullet styles. These comprise a ticked list and a crossed list.
Ticked list
class="ul-ticked"
Crossed list
class="ul-crossed"
Accessibility considerations
When using these Decorative lists to represent services or features that are either available or not available, it’s important to present this list with a heading identifying this.
Screenreaders and assistive technologies will see a Decorative list as either an unordered list <ul> or an ordered list <ol>. The style of the bullet does not convey meaning to assistive technology – this could be very misleading and confusing, which is why a heading is so important.
Ensure that the heading level is correct. For example, use an <h3>, not an <h4> if the previous heading is an <h2>. Heading levels should only increase by one.
Ordered lists
An ordered list is used when the order is important or if there’s a need to identify or refer to an individual list item within a list.
Use the Ordered list element <ol> as the parent element and a List item <li> for each line.
Numbered list
class="ol-numbered"
Numbered lists will display an incremental number alongside each list item. A Numbered list can be nested up to four levels deep.
start="xx"
reversed
Description list
Displaying data alongside its accompanying label is accomplished using the Description list element <dl> and its children <dt> and <dd> wrapped in a <div>.
There are two types of Description list – dl-row and dl-stack.
Description list row
class="dl-row"
Description list stack
class="dl-stack"
Last updated: