Lists

Gradient Circles

First item with gradient circle marker
Second item - markers have a subtle white overlay
Third item - hover to see the scale animation
Longer text wraps nicely under the marker

<ul class="gradient-list-circles gradient-heide-rubin">
  <li>First item with gradient circle marker</li>
  <li>Second item - markers have a subtle white overlay</li>
  <li>Third item - hover to see the scale animation</li>
  <li>Longer text wraps nicely under the marker</li>
</ul>

Gradient Numbered

First step in the process
Second step - numbers are white on gradient
Third step with detailed explanation
Fourth step

<ol class="gradient-list-numbered">
  <li>First step in the process</li>
  <li>Second step - numbers are white on gradient</li>
  <li>Third step with detailed explanation</li>
  <li>Fourth step</li>
</ol>

Gradient Timeline

2020 — Company founded
2021 — Launched first product
2022 — International expansion
2023 — 1 million customers

<ul class="gradient-list-timeline">
  <li><strong>2020</strong> — Company founded</li>
  <li><strong>2021</strong> — Launched first product</li>
  <li><strong>2022</strong> — International expansion</li>
  <li><strong>2023</strong> — 1 million customers</li>
</ul>

Dashes

First item with gradient circle marker
Second item - markers have a subtle white overlay
Third item - hover to see the scale animation
Longer text wraps nicely under the marker

<ul class="gradient-list-dashes gradient-heide-rubin">
    <li>
        First item with gradient circle marker
    </li>
    <li>
        Second item - markers have a subtle white overlay
    </li>
    <li>
        Third item - hover to see the scale animation
    </li>
    <li>
        Longer text wraps nicely under the marker
    </li>
</ul>

Bars

First item with gradient circle marker
Second item - markers have a subtle white overlay
Third item - hover to see the scale animation
Longer text wraps nicely under the marker

<ul class="gradient-list-bars smaragd-aquamarin">
    <li>
        First item with gradient circle marker
    </li>
    <li>
        Second item - markers have a subtle white overlay
    </li>
    <li>
        Third item - hover to see the scale animation
    </li>
    <li>
        Longer text wraps nicely under the marker
    </li>
</ul>

Rings

First item with gradient circle marker
Second item - markers have a subtle white overlay
Third item - hover to see the scale animation
Longer text wraps nicely under the marker

<ul class="gradient-list-rings smaragd-aquamarin">
    <li>
        First item with gradient circle marker
    </li>
    <li>
        Second item - markers have a subtle white overlay
    </li>
    <li>
        Third item - hover to see the scale animation
    </li>
    <li>
        Longer text wraps nicely under the marker
    </li>
</ul>

Checkmarks

TITLE

First item with gradient circle marker
Second item - markers have a subtle white overlay
Third item - hover to see the scale animation
Longer text wraps nicely under the marker

<ul class="gradient-list-checks smaragd-aquamarin">
    <li>
        First item with gradient circle marker
    </li>
    <li>
        Second item - markers have a subtle white overlay
    </li>
    <li>
        Third item - hover to see the scale animation
    </li>
    <li>
        Longer text wraps nicely under the marker
    </li>
</ul>

Arrows

First item with gradient circle marker
Second item - markers have a subtle white overlay
Third item - hover to see the scale animation
Longer text wraps nicely under the marker

<ul class="gradient-list-arrows smaragd-aquamarin">
    <li>
        First item with gradient circle marker
    </li>
    <li>
        Second item - markers have a subtle white overlay
    </li>
    <li>
        Third item - hover to see the scale animation
    </li>
    <li>
        Longer text wraps nicely under the marker
    </li>
</ul>

Size Variants

<!-- Small -->
<ul class="gradient-list-circles gradient-list-sm">...</ul>

<!-- Large -->
<ol class="gradient-list-numbered gradient-list-lg">...</ol>

Overlay Options

<!-- Softer (more white overlay) -->
<ul class="gradient-list-circles gradient-list-overlay-white">...</ul>

<!-- Pure gradient (no overlay) -->
<ul class="gradient-list-circles gradient-list-overlay-none">...</ul>