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:
An error occurred loading this code example.
Playground
Prince Harry
Meghan Markle
Royal Family
List Data
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.