Syntax

List Style Image

Replacing the list item marker with an image.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
list-style:url()list-style-image: url();
list-style:linear-gradient()list-style-image: linear-gradient();
list-style:radial-gradient()list-style-image: radial-gradient();
list-style:repeating-linear-gradient()list-style-image: repeating-linear-gradient();
list-style:repeating-radial-gradient()list-style-image: repeating-radial-gradient();
list-style:conic-gradient()list-style-image: conic-gradient();

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="list-style-image:url():hover list-style-image:url()@sm list-style-image:url()@dark list-style-image:url()@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.