List

Interface of List
🏗 Coming Soon

By default a <List /> component will render as an unordered list, <ul> tag, with no marker. Each item in the list should be wrapped in the <ListItem /> component. Below is an example of creating a list of links using the default list behavior.

List Types

Often times you want to have a marker before each item in your list, you can use the type property to change list marker and also the semantic html tag used to wrap the list.

  • An unordered list
  • Wraps in a <ul> tag
  • No marker
  • An unordered list
  • Wraps in a <ul> tag
  • Bullet marker
  1. An orderd list
  2. Wraps in a <ol> tag
  3. Number marker
  1. An ordered list
  2. Wraps in a <ol> tag
  3. Alpha marker

Hiding the List marker

If for semantic reasons you need an ordered list but do not want to display the marker, you can control that with the nomarker property.

  1. I am an ordered list
  2. But I do not have a marker
  3. That is neat

List Item

Interface of ListItem
🏗 Coming Soon

This component renders an <li> tag inside of a list