List
List is used to display list items, it renders a <ul> by default.
Import#
Unordered List#
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
Editable Example
Ordered List#
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
Editable Example
Unstyled List with icon#
Add nice icons to the list item by using the ListIcon component. You can pass
the name of the icon or custom icons. The icon is sized relative to the font
size of the list item.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- Assumenda, quia temporibus eveniet a libero incidunt suscipit
- Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
- Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
Editable Example
Props#
List Props#
| Name | Type | Default | Description |
|---|---|---|---|
| styleType | string | none | The CSS value for list-style-type |
| stylePos | string | inside | The CSS value for list-style-position |
| spacing | StyledSystem.MarginBottomProps | The space between each list item |
List Item Props#
ListItem composes PseudoBox so you pass all style props, and pseudo style props.