Newskit Logo
View Github

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.
paddingInlineMQ<string>
It can take one space token to specify the logical inline start and end padding of the container. This space token can also be used on breakpoints.
paddingInlineStartMQ<string>
It can take one space token to specify the logical inline start padding of the container. This space token can also be used on breakpoints.
paddingInlineEndMQ<string>
It can take one space token to specify the logical inline end padding of the container. This space token can also be used on breakpoints.
paddingBlockMQ<string>
It can take one space token to specify the logical block start and end padding of the container. This space token can also be used on breakpoints.
paddingBlockStartMQ<string>
It can take one space token to specify the logical block start padding of the container. This space token can also be used on breakpoints.
paddingBlockEndMQ<string>
It can take one space token to specify the logical block end padding of the container. This space token can also be used on breakpoints.
marginInlineMQ<string>
It can take one space token to specify the logical inline start and end margin of the container. This space token can also be used on breakpoints.
marginInlineStartMQ<string>
It can take one space token to specify the logical inline start margin of the container. This space token can also be used on breakpoints.
marginInlineEndMQ<string>
It can take one space token to specify the logical inline end margin of the container. This space token can also be used on breakpoints.
marginBlockMQ<string>
It can take one space token to specify the logical block start and end margin of the container. This space token can also be used on breakpoints.
marginBlockStartMQ<string>
It can take one space token to specify the logical block start margin of the container. This space token can also be used on breakpoints.
marginBlockEndMQ<string>
It can take one space token to specify the logical block end margin of the container. This space token can also be used on breakpoints.

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