Skip to content




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


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


Crossed list


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


Numbered lists will display an incremental number alongside each list item. A Numbered list can be nested up to four levels deep.

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


Description list stack


Last updated: