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
import React from 'react';
import { OrderedList } from 'newskit';

export default () => (
  <OrderedList>
    {['Prince Harry', 'Meghan Markle', 'Royal Family']}
  </OrderedList>
);