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