Text
Ordered List
Ordered lists make blocks of text easier to read, structuring sequential information into manageable, numbered items.
Interactive demo
This demo allows you to preview the ordered list component, its variations, and configuration options.
- Prince Harry
- Meghan Markle
- Royal Family
1import React from 'react';
2import { OrderedList } from 'newskit';
3
4export default () => (
5 <OrderedList
6 overrides={{
7 content: {
8 typographyPreset: 'editorialParagraph010',
9 stylePreset: 'inkBase',
10 },
11 counter: {
12 typographyPreset: 'editorialParagraph010',
13 stylePreset: 'inkBase',
14 },
15 spaceInline: 'space010',
16 }}
17 />
18);
19
Anatomy
The ordered list contains two required elements.
| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
1 | Content | The content of the ordered list | ||
2 | Counter | The counter applied to the content of the ordered list | CSS |
Options
The ordered list has options that can be used to provide an appropriate experience for different use cases.
Counter
The counter applied to the content of the ordered list can be overridden to use any typography preset.
Counter
The counter applied to the content of the ordered list can be overridden to use any typography preset.
Usage
Here’s how and when to use the ordered list:
Do use for numerically ordered lists
Ordered list items are numbered, so use them in instances where items need to appear in numerical order.
Do use to break up sequential information
Use ordered lists to break up blocks of sequential information into manageable numbered items.
Accessibility considerations
The ordered list has the following accessibility considerations:
The
olelement is for grouping a collection of items that appear in sequential numerical order.Ordered lists 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 ordered 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 or strings to populate the ordered list component. Note - if the node is a react element, a unique key must be given to each element within the array. |
Any prop valid on a ol The ordered list element is also valid on the ordered list component.