NewsKit Mobile Logo

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

{
  spaceStack: "space040",
  content: {
    stylePreset: "inkBase",
    typographyPreset: "editorialParagraph010"
  },
  marker: {
    stylePreset: "inkBase",
    spaceInline: "space020",
    size: "iconSize005"
  }
}

Playground

  • Prince Harry

  • Meghan Markle

  • Royal Family

Props
List Data
List Item Marker
Marker Size
Style Preset Overrides
Typography Preset Overrides
Margin Preset Overrides
import React from 'react';
import { UnorderedList } from 'newskit';

export default () => (
  <UnorderedList
    overrides={{
      marker: {
        size: 'iconSize005',
        stylePreset: 'inkBase',
        spaceInline: 'space020'
      },
      content: {
        stylePreset: 'inkBase',
        typographyPreset: 'editorialParagraph010'
      },
      spaceStack: 'space040'
    }}
  >
    {['Prince Harry', 'Meghan Markle', 'Royal Family']}
  </UnorderedList>
);

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