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.
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. 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.