Text
Unordered List
Unordered lists make blocks of related text easier to read, structuring information of equal value into manageable bulleted items.
Interactive demo
This demo allows you to preview the unordered list component, its variations, and configuration options.
NewsKit provides components, guidelines and standards to enable digital product teams to create high-quality, consistent products quickly. NewsKit is built on modular design principles and backed by best practice guidance for design and development.
Unordered list items are not numbered, so use them in instances where ordering is not a factor. Where items are required to appear in numerical order use an ordered list.
Use unordered lists to break up blocks of related content into manageable bulleted items to make the information easier for users to read
1import React from 'react';
2import { UnorderedList } from 'newskit';
3
4export default () => (
5 <UnorderedList
6 overrides={{
7 marker: {
8 size: 'iconSize005',
9 spaceInline: 'space020',
10 stylePreset: 'inkBase',
11 },
12 spaceStack: 'space040',
13 content: {
14 typographyPreset: 'editorialParagraph010',
15 stylePreset: 'inkBase',
16 },
17 }}
18 >
19 {[
20 'NewsKit provides components, guidelines and standards to enable digital product teams to create high-quality, consistent products quickly. NewsKit is built on modular design principles and backed by best practice guidance for design and development.',
21 'Unordered list items are not numbered, so use them in instances where ordering is not a factor. Where items are required to appear in numerical order use an ordered list.',
22 'Use unordered lists to break up blocks of related content into manageable bulleted items to make the information easier for users to read',
23 ]}
24 </UnorderedList>
25);
26
Anatomy
The unordered list contains one required element and one optional element.
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
1 | Content | The content of the unordered list | ||
2 | Marker | The marker applied to the content of the unordered list |
Options
The unordered list has options that can be used to provide an appropriate experience for different use cases.
Marker
The marker applied to the content of the unordered list can be overridden to use any icon.
Marker alignment
The marker can be aligned at the centre, start, or end of the unordered list content.
Marker
The marker applied to the content of the unordered list can be overridden to use any icon.
Marker alignment
The marker can be aligned at the centre, start, or end of the unordered list content.
Usage
Here’s how and when to use the unordered list:
Do use for non-sequential lists
Unordered list items are not numbered, so use them in instances where ordering is not a factor. Where items are required to appear in numerical order use an ordered list.
Don't use for numerically ordered lists
Avoid unordered lists in instances where items are required to appear in numerical order. Instead use an ordered list.
Do use for bulleted lists that are easier to read
Use unordered lists to break up blocks of related content into manageable bulleted items to make the information easier for users to read.
Accessibility considerations
The unordered list has the following accessibility considerations:
The ul element is for grouping a collection of items that don't need to be in a specific numerical order.
Unordered list are not keyboard operable unless the list items themselves are operable e.g. with links.
Using unordered lists purely as a means of indenting text is discouraged. Refer to Lists in HTML documents 10.2 in WCAG 2.1 This is a stylistic issue and indenting of text can be achieved using the text block component.
API
The unordered list has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|---|---|---|---|
| children | Array<React.ReactNode> | An array of react nodes to populate the unordered list component. Note - if the node is a react element an unique key must be given to each element within the array. | ||
| listItemMarker | IconComponent | Optional icon component to override the list style. | ||
| markerAlign | start center end | center | Vertically aligns the listItemMarker when the list has more than one line. |
Any prop valid on an ul The unordered list element, is also valid on the unordered list component.