This content originally appeared on CodyHouse and was authored by CodyHouse
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
![](https://www.radiofree.org/wp-content/plugins/print-app/icon.jpg)
CodyHouse | Sciencx (2022-03-09T08:55:04+00:00) Component – List v3. Retrieved from 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.