List

How to

The List component is used to display a list or related items.

The component includes a set of CSS custom properties to help you customize the list:

.list {
  --list-v-space: 1; // control vertical space
  --list-offset: 1;  // control offset of sublists
}

Edit the --list-v-space multiplier to increase/decrease the space between list items. Update the --list-offset multiplier to increase/decrease the offset of the sub-lists.

For the unordered/ordered lists, edit the CSS variables to modify the size of the bullet elements and the gap between the bullet and content:

.list--ul { // unordered list
  --bullet-size: 7px; // dot width and height
  --bullet-margin-right: var(--space-xxs); // gap between bullet and content
}