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:

:root {
  --list-space-y: var(--space-xxs); // vertical gaps
  --list-offset: var(--space-xs); // sublist horizontal offset
  --list-line-height: var(--body-line-height); // items line-height
}

Edit the --list-space-y multiplier to increase/decrease the vertical gap between the list items. Update the --list-offset multiplier to increase/decrease the horizontal offset of the sub-lists.

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

.list--ol { // ordered list
  --list-bullet-size: 1.25em; // circle width and height
  --list-bullet-margin-right: var(--space-xxxs); // gap between circle and content
  --list-bullet-font-size-multiplier: 0.75; // control bullet font size - use unitless value
}

In the --ul, --ol, --icons variations, the horizontal offset is automatically calculated using the bullet size.

Example:

.list--ul, .list--ol {
  --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right));
}

To change the font-size of a list item, make sure to target the <li> element (to preserve the icon-text alignment).

Example:

<ul class="list list--icons">
  <li class="text-lg"> <!-- 👈 -->
    <svg class="list__icon icon color-primary" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="12" opacity="0.2"/><path d="M9.5,17a1,1,0,0,1-.707-.293l-3-3a1,1,0,0,1,1.414-1.414L9.5,14.586l7.293-7.293a1,1,0,1,1,1.414,1.414l-8,8A1,1,0,0,1,9.5,17Z"/></svg>
    
    <p>List item</p>
  </li>

  <!-- ... -->
</ul>