List

To implement List component into your project you’ll need to add the import:

import List, { ListItem } from "@kiwicom/orbit-components/lib/List";

After adding import into your project you can use it simply like:

<List>
  <ListItem>Hello world!</ListItem>
</List>

For accessibility, you can associate the List with a heading using ariaLabelledby:

<Heading id="flights-heading">Affected flights</Heading>
<List ariaLabelledby="flights-heading">
  <ListItem>Flight ABC123</ListItem>
  <ListItem>Flight DEF456</ListItem>
</List>

Props

Table below contains all types of the props available in List component.

Name	Type	Default	Description
children	`React.Node`		The content of the List, normally `ListItem`.
ariaLabelledby	`string`		Optional prop for setting `aria-labelledby` attribute.
dataTest	`string`		Optional prop for testing purposes.
id	`string`		Set `id` for `List`.
size	`enum`	`"normal"`	The size of the List.
spaceAfter	`enum`		Additional `margin-bottom` after component.
type	`enum`	`"primary"`	The color type of the List.
spacing	`spacing`	`"100"`	The spacing between List children.

enum

spaceAfter
`"none"`
`"smallest"`
`"small"`
`"normal"`
`"medium"`
`"large"`
`"largest"`

spacing

name
`"none"`
`"50"`
`"100"`
`"150"`
`"200"`
`"300"`
`"400"`
`"500"`
`"600"`
`"800"`
`"1000"`
`"1200"`
`"1600"`

ListItem Props

Table below contains all types of the props in ListItem component.

Name	Type	Default	Description
children	`React.Node`		The content of the ListItem.
dataTest	`string`		Optional prop for testing purposes.
icon	`React.Node`	`"CircleSmall"`	The displayed Icon or CarrierLogo component. See Functional specs
label	`Translation`		Adds a label to ListItem

enum

size	type
`"small"`	`"primary"`
`"normal"`	`"secondary"`
`"large"`

Functional specs

You can color your icon if you pass some value into color or customColor prop of the Icon. Be aware of using other components, because they are not styled by default.