List

Custom unordered/ordered list component.

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: 0.375em; // vertical gaps
  --list-offset: 1em;  // sublist horizontal offset
  --list-line-height-multiplier: 1; // line-height multiplier
}

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: 26px; // ⚠️ use px or rem units - circle width and height
  --list-bullet-margin-right: 6px; // ⚠️ use px or rem units - gap between circle and content
  --list-bullet-font-size: 14px; // ⚠️ use px or rem units - bullet font size
}

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>

Categories

• Data Display > List

Bug report & feedback

Component Github page ↗