Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Text

Ordered List

Ordered lists make blocks of text easier to read, structuring sequential information into manageable, numbered items.

Status

Supported

Introduced

v0.2.0

View codeView StorybookView Design

Interactive demo

This demo allows you to preview the ordered list component, its variations, and configuration options.

  1. Prince Harry
  2. Meghan Markle
  3. Royal Family
Overrides
Style Preset Overrides
Margin Preset Overrides
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.

ItemNameDescriptionComponentOptional

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 ol element 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

Ordered list

The ordered list has a range of props that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired

Any prop valid on a ol The ordered list element is also valid on the ordered list component.

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?