Skip to content

List

Status: Stable

Latest released: March 2020

Current version: v1.8.0

Storybook
GitHub

Standard list component. Lists can help make content really scannable within a long article or complex layout. Choose to display ordered or unordered lists of information as it makes sense to your use case.


Best practices

  • Keep list items brief and scannable avoiding long sentences
  • Ideally list items are a few words or one short sentence
  • Avoid using lists within tables (spacing will be enough to differentiate items)

Variants

Ordered

  1. Currencies
  2. Cryptocurrencies

Unordered

  • Currencies
  • Cryptocurrencies

Development

import List, { Li } from '@nerdwallet/react-list';
<List>
<Li>Item 1</Li>
<Li>Item 2</Li>
<Li>Item 3</Li>
</List>;

Props

<List>

ordered

boolean

Creates a ordered, numbered list.


spacing

= 2

0 | 1 | 2 | 3 | 4 | 5 | '0' | '1' | '2' | '3' | '3-half' | '4' | '5'

Controls spacing between list elements (NDS value)


component

elementType

Allows you to provide a React component or other HTML element, overriding the default `ul` and `ol` options.


children

node

Children inside the <ul> or <ol>. Should be <Li> elements.


className

string

<Li>

children

node


className

string