Skip to main content

Lists

Bullet List

The standard unordered list as the editor produces it - no extra class needed. Nested levels keep the same look.

  • First item in a plain bullet list
  • Second item
    • Nested item
    • Another nested item
  • Third item with a longer text that wraps onto a second line to show the indent

Sample Code

<ul>
  <li>First item</li>
  <li>Second item
    <ul>
      <li>Nested item</li>
    </ul>
  </li>
  <li>Third item</li>
</ul>

Empty Template

<ul>
  <li>XXX</li>
  <li>XXX</li>
  <li>XXX</li>
</ul>

Numbered List

The standard ordered list - numbers come from the browser, the look from the theme. Use it for steps and rankings.

  1. First step in the process
  2. Second step
    1. Nested sub-step
    2. Another sub-step
  3. Third step with a longer text that wraps onto a second line to show the indent

Sample Code

<ol>
  <li>First step</li>
  <li>Second step
    <ol>
      <li>Nested sub-step</li>
    </ol>
  </li>
  <li>Third step</li>
</ol>

Empty Template

<ol>
  <li>XXX</li>
  <li>XXX</li>
  <li>XXX</li>
</ol>

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-06">
  <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

  1. First step in the process
  2. Second step - numbers are white on gradient
  3. Third step with detailed explanation
  4. 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-06">
    <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 gradient-18">
    <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 gradient-18">
    <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

  • 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 gradient-18">
    <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 gradient-18">
    <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 and Overlay Options

Markers come in three sizes and two overlay strengths. Add the modifier class to the list element; it works with circles, numbered and timeline lists.

Small Markers

  • Item 1
  • Item 2
  • Item 3

Large Markers, Numbered

  1. Item 1
  2. Item 2
  3. Item 3

Softer Overlay

  • Item 1
  • Item 2
  • Item 3

Pure Gradient, No Overlay

  • Item 1
  • Item 2
  • Item 3

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-11">
    <li>Eintrag mit Verlaufs-Kreis</li>
</ul>

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