List

Basic List

  • Cat
  • Dog
  • Bird

Sm Tight List with Style

  • Cat
  • Dog
    • Labrador
    • Westie
    • Poodle
  • Bird

Loose List

  • Occaecat deserunt excepteur pariatur aute amet ea in.
  • Culpa reprehenderit magna nisi nulla adipisicing.
  • Mollit amet pariatur consectetur sint sunt elit officia ullamco sunt labore consectetur.

Markup
 <List>
    <ListItem>Item A</ListItem>
    <ListItem>Item B</ListItem>
    <ListItem>Item C</ListItem>
  </List>
Custom CSS Properties
--list-margin-top
--list-margin-bottom
--list-margin-left
--list-margin-right
Props
Title Value
class string
fontSize "xs" | "sm" | "lg" | "xl"
margin "top" | "bottom" | "left" | "right" | "none"
listStyle "circle" | "disc" | "square" | "decimal" | "lower-latin" | "upper-latin"
density "tight" | "loose"
16 px
Base size on small viewports
1.125
Ratio between steps for small viewports
22 px
Base size on larger viewports
1.333
Ratio between steps for larger viewports