Unordered List

Overview

Usage

An unordered list can be used to produce a list of related content prefixed with no bullets as default, this can be optionally overridden with a custom icon.

Props

childrenArray<React.ReactNode>

An array of react nodes to populate the list components. If the node is a react element an unique key must be given to each element within the array.

listItemMarkerIconComponent

Optional icon component to override the list style.

markerAlign'start' | 'center' | 'end' = center

Vertically align the listItemMarker when the list takes more than one line.

overridesobject

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

spaceStackMQ<string

If provided, this overrides the space between the list items.

content

stylePresetMQ<string>

If provided, this overrides the style preset applied to content.

typographyPresetMQ<string>

If provided, this overrides the typography preset applied to content.

marker

stylePresetMQ<string>

If provided, this overrides the style preset applied to the marker.

spaceInlineMQ<string>

If provided, this overrides the space between the marker and the content.

sizestring

If provided, this overrides the marker icon size.

Note: You can also set the icon size by passing it directly as a size prop to the icon, but by doing this you will override the iconSize passed from overrides. We discourage this approach but we will keep the functionality in case it is needed.

Refer to the defaults below for the full object structure:

1{
2  spaceStack: "space040",
3  content: {
4    stylePreset: "inkBase",
5    typographyPreset: "editorialParagraph010"
6  },
7  marker: {
8    stylePreset: "inkBase",
9    spaceInline: "space020",
10    size: "iconSize005"
11  }
12}

Playground

Prince Harry
Meghan Markle
Royal Family

1import React from 'react';
2import { UnorderedList } from 'newskit';
3
4export default () => (
5  <UnorderedList
6    overrides={{
7      marker: {
8        size: 'iconSize005',
9        stylePreset: 'inkBase',
10        spaceInline: 'space020',
11      },
12      content: {
13        stylePreset: 'inkBase',
14        typographyPreset: 'editorialParagraph010',
15      },
16      spaceStack: 'space040',
17    }}
18  >
19    {['Prince Harry', 'Meghan Markle', 'Royal Family']}
20  </UnorderedList>
21);
22

For more information on overriding component defaults, see the docs here.