Lists
guidelines Overview
We have 6 styles of lists using the 3 different HTML markup techniques. Unordered lists, ordered lists and description lists.
Some components are specifically designed to include these lists. To find out which, visit the Content guidance section of the component and you’ll find the types of content that can be included.
Unordered lists
There are three list styles that can be with an unordered list. The familiar bullet list and the two decorative list 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 list can be nested up to four levels deep.
Decorative lists
Decorative lists display different bullet styles, we have a ticked list and a crossed list.
Ticked list
class="ul-ticked"
Crossed list
class="ul-crossed"
Accessibility considerations
When using the 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 fact.
Screenreaders and assistive technologies will see a Decorative list as either an unordered list or an ordered list, depending on if it’s marked up with an <ul> or an <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"
The Numbered list will display an incremental number alongside each list item. A Numbered list can be nested up to four levels deep.
start="xx"
reverse
Description list
Displaying data alongside it’s accompanying label is accomplished using the Description List element <dl> and it’s children <dt> and <dd> wrapped in a <div>.
There are two types of description lists which we have called dl-row and dl-stack.
Description list row
class="dl-row"
Description list stack
class="dl-stack"