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 >
Table below contains all types of the props available in List component.
Namedata-transfer-vertical Type Default Description children React.Node
The content of the List, normally ListItem
. 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.
spaceAfter "none"
"smallest"
"small"
"normal"
"medium"
"large"
"largest"
name "none"
null
"50"
2px
"100"
4px
"150"
6px
"200"
8px
"300"
12px
"400"
16px
"500"
20px
"600"
24px
"800"
32px
"1000"
40px
"1200"
48px
"1600"
64px
Table below contains all types of the props in ListItem component.
Namedata-transfer-vertical 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
size type "small"
"primary"
"normal"
"secondary"
"large"
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.