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
orcustomColor
prop of the Icon. Be aware of using other components, because they are not styled by default.