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.
Take a look at this example of the
ns-editorial which can display these lists ns-editorial content guidance.
Further examples of components which are designed to contain 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.
A Bullet list can be nested up to four levels deep.
To see a more complex example of the Bullet list visit Storybook.
Decorative lists display different bullet styles, we have a ticked list and a crossed list.
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.
Here is an example of how the Ticked list should be used within
To see a more complex example of the Ticked list visit Storybook.
Here is an example of how the Crossed list should be used within
To see a more complex example of the Crossed list visit Storybook.
A Decorative list can be nested up to four levels deep.
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.
The Numbered list will display an incremental number alongside each list item.
A Numbered list can be nested up to four levels deep.
To see a more complex example of the Numbered list visit Storybook.
Displaying data alongside it's accompanying label is accomplished using the Description List element
<dl> and it's children
<dd> wrapped in a
There are two types of description lists which we have called
To see a more complex example of the description list row visit Storybook.
To see a more complex example of the description list stack visit Storybook.
The following components have been designed to use lists:
A popular use of the
dl-row list is to playback data captured during a journey.
Here is an example: