Ordered List

Overview

Usage

An ordered list can be used to produce a list of related content prefixed with incrementing numbers.

Props

childrenArray<React.ReactNode|string>

An array of react nodes or strings to populate the list items with.

overridesobject

If provided, overrides the respective presets for the component and provided elements.

spaceInlineMQ<string>

If provided, overrides the "space" token which defines the vertical distance between each item list.

contentobject

stylePresetMQ<string>

If provided, this overrides the style preset applied to the list items.

typographyPresetMQ<string>

If provided, this overrides the typography preset applied to the list items.

counter

stylePresetMQ<string>

If provided, this overrides the style preset applied to the list counter.

typographyPresetMQ<string>

If provided, this overrides the typography preset applied to the list counter.

minWidthMQ<string>

If provided, overrides the "sizing" token which defines the distance between counter and list content.

Playground

Prince Harry
Meghan Markle
Royal Family

List Data

1import React from 'react';
2import { OrderedList } from 'newskit';
3
4export default () => (
5  <OrderedList>
6    {['Prince Harry', 'Meghan Markle', 'Royal Family']}
7  </OrderedList>
8);
9