List v3

A custom unordered list with icon bullets.

How to

The List v3 component is a custom unordered list displaying icons as bullets.

Use the component custom properties to modify some basic settings:

.list-v3 {
  --list-v3-gap: var(--space-md);

  /* icon wrapper */
  --list-v3-figure-size: 48px;
  --list-v3-icon-size: 24px;
}

The icon color depends on the color utility class applied to the .list-v3__figure element. If you're using your own icons, make sure to replace the fill and stroke SVG values with currentColor. Alternatively, you can use a tool like Nucleo to import your icons and export SVG code compatible with CodyFrame.

<ul class="list-v3">
  <li class="list-v3__item">
    <figure class="list-v3__figure color-primary"> <!-- 👈 -->
      <svg class="list-v3__icon icon" viewBox="0 0 24 24">
        <!-- ... -->
      </svg>
    </figure>

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

Categories

• Data Display > List

Bug report & feedback

Component Github page ↗