components

List (code)

Lists allow a visual representation of the start of a new area of content.

Do the dishes
Hang the laundy
Cuddle with the cats

import { List } from '@mediahuis/chameleon-react'

<List>
  <ListItem>Do the dishes</ListItem>
  <ListItem>Hang the laundy</ListItem>
  <ListItem>Cuddle with the cats</ListItem>
</List>

<List>
  <ListItem>Do the dishes</ListItem>
  <ListItem>Hang the laundy</ListItem>
  <ListItem>Cuddle with the cats</ListItem>
</List>

Props

List

Name	Type	Default	Required	Description
as	'ul''ol'	'ul'	-	Sets the List's html element. And visual appearance.
children	Node	-	-	Contents displayed within the List (Typically ListItem).

System Props

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

m, mb, ml, mr, mt, mx, my

float

position, bottom, left, right, top, zIndex

width, maxWidth

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

ListItem

Name	Type	Default	Required	Description
accessibilityLabel	String	''	-	Accessible friendly label. Will not be shown
children	Node	-	-	The content rendered within the ListItem
icon	FunctionNodeObject	-	-	The icon from the system.
iconColor	String	-	-	The color of the icon, based on tokens of the system.

System Props

This component does not allow any system props.

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

As

default: ul

Lists come in both unordered and ordered variants. Changing the as prop will switch functionality.

Do the dishes
Hang the laundy
Cuddle with the cats

Do the dishes
Hang the laundy
Cuddle with the cats

<List as="ul">
  <ListItem>Do the dishes</ListItem>
  <ListItem>Hang the laundy</ListItem>
  <ListItem>Cuddle with the cats</ListItem>
</List>
<List as="ol">
  <ListItem>Do the dishes</ListItem>
  <ListItem>Hang the laundy</ListItem>
  <ListItem>Cuddle with the cats</ListItem>
</List>

<List as="ul">
  <ListItem>Do the dishes</ListItem>
  <ListItem>Hang the laundy</ListItem>
  <ListItem>Cuddle with the cats</ListItem>
</List>
<List as="ol">
  <ListItem>Do the dishes</ListItem>
  <ListItem>Hang the laundy</ListItem>
  <ListItem>Cuddle with the cats</ListItem>
</List>

Icon

default: Bullet

Icons of a ListItem can be variated throughout a single list.

Do the dishes
Hang the laundy
Cuddle with the cats

<List as="ul">
  <ListItem icon={Checkmark}>Do the dishes</ListItem>
  <ListItem icon={Close}> Hang the laundy</ListItem>
  <ListItem icon={Close}>Cuddle with the cats</ListItem>
</List>

<List as="ul">
  <ListItem icon={Checkmark}>Do the dishes</ListItem>
  <ListItem icon={Close}> Hang the laundy</ListItem>
  <ListItem icon={Close}>Cuddle with the cats</ListItem>
</List>

IconColor

default: undefined

To further emphasize an icon's meaning, you can convey further information by changing its color.

Do the dishes
Hang the laundy
Cuddle with the cats

<List as="ul">
  <ListItem icon={Checkmark} iconColor="greenBase">
    Do the dishes
  </ListItem>
  <ListItem iconColor="primaryBase">Hang the laundy</ListItem>
  <ListItem icon={Close} iconColor="redBase">
    Cuddle with the cats
  </ListItem>
</List>

<List as="ul">
  <ListItem icon={Checkmark} iconColor="greenBase">
    Do the dishes
  </ListItem>
  <ListItem iconColor="primaryBase">Hang the laundy</ListItem>
  <ListItem icon={Close} iconColor="redBase">
    Cuddle with the cats
  </ListItem>
</List>