Go to homepage

Projects /

List v3

A custom unordered list with icon bullets.

View Demo

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">
        <!-- ... -->

    <!-- ... -->
  <!-- ... -->


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.