Newskit Logo

Getting started

Design overview

Popular searches

View GitHub

Text

Unordered List

Unordered lists make blocks of related text easier to read, structuring information of equal value into manageable bulleted items.

Status

Supported

Introduced

v0.2.0

View codeView StorybookView Design

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

List Data
List Item Marker
Marker Align
Marker Size
Margin Preset Overrides
Overrides
Style Preset Overrides
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.

ItemNameDescriptionComponentOptional

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

Unordered list

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

NameTypeDefaultDescriptionRequired

Any prop valid on an ul The unordered list element, is also valid on the unordered list component.

Need Help?

Cant find what you are looking for?

Get In Touch

Need Help?

Cant find what you are looking for?