Skip to Content
Sponsor

List

List is used to display list items. It renders a <ul> element 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#

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
Editable Example

Unstyled List with icon#

Add icons to the list items by using the ListIcon component. You can pass the name of the icon or use custom icons. The size of the icon is 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#

NameTypeDefaultDescription
styleTypestringnoneThe CSS value for list-style-type
stylePositionstringinsideThe CSS value for list-style-position
spacingStyledSystem.MarginBottomPropsThe space between each list item

List Item Props#

ListItem composes Box so you can pass all style and pseudo style props.

Edit this page