Component – List v3

A custom unordered list with icon bullets.Download + DemoView DemoDownload ComponentHow 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 {
–l…


This content originally appeared on CodyHouse and was authored by CodyHouse

A custom unordered list with icon bullets.List v3

Download + 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">
        <!-- ... -->
      </svg>
    </figure>

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


This content originally appeared on CodyHouse and was authored by CodyHouse


Print Share Comment Cite Upload Translate Updates
APA

CodyHouse | Sciencx (2022-03-09T08:55:04+00:00) Component – List v3. Retrieved from https://www.scien.cx/2022/03/09/component-list-v3/

MLA
" » Component – List v3." CodyHouse | Sciencx - Wednesday March 9, 2022, https://www.scien.cx/2022/03/09/component-list-v3/
HARVARD
CodyHouse | Sciencx Wednesday March 9, 2022 » Component – List v3., viewed ,<https://www.scien.cx/2022/03/09/component-list-v3/>
VANCOUVER
CodyHouse | Sciencx - » Component – List v3. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/09/component-list-v3/
CHICAGO
" » Component – List v3." CodyHouse | Sciencx - Accessed . https://www.scien.cx/2022/03/09/component-list-v3/
IEEE
" » Component – List v3." CodyHouse | Sciencx [Online]. Available: https://www.scien.cx/2022/03/09/component-list-v3/. [Accessed: ]
rf:citation
» Component – List v3 | CodyHouse | Sciencx | https://www.scien.cx/2022/03/09/component-list-v3/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts