Lists | Upmarkit

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>

Checks Circle

Häkchen-Liste mit gefülltem Kreis — der Look der Service-Liste aus dem Case-Study-Dossier, seit 2026-08-26 freistehend nutzbar. Default-Farbe ist das dunkle Primär-Teal; mit einer gradient-<name>-Klasse übernimmt der Kreis den Verlauf aus der Skin-Palette. gradient-list-divided ergänzt Trennlinien (mit jeder Listen-Variante kombinierbar), gradient-list-xs verkleinert die Kreise.

Erster Eintrag mit Häkchen-Kreis und Trennlinie
Zweiter Eintrag — Default-Farbe Primary-Deep
Dritter Eintrag

Variante mit Verlauf aus der Skin-Palette (himmel-rubin)
Ohne Trennlinien

<ul class="gradient-list-checks-circle gradient-list-divided">
    <li>Erster Eintrag</li>
    <li>Zweiter Eintrag</li>
</ul>

<!-- Kreis-Farbe aus der Skin-Palette: -->
<ul class="gradient-list-checks-circle gradient-himmel-rubin">
    <li>Eintrag mit Verlaufs-Kreis</li>
</ul>

<!-- Modifier: gradient-list-divided (Trennlinien, auch fuer andere
     Listen-Varianten), gradient-list-xs (kleinere Kreise) -->