Newskit Logo

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

  1. Prince Harry
  2. Meghan Markle
  3. 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