List Style Types

Different bullet and numbering styles for lists.

Disc, Circle, Square

  • Disc style (default)
  • Another item
  • Circle style
  • Another item
  • Square style
  • Another item
HTML 
<ul style="list-style-type: disc">
            <li>Disc style (default)</li>
            <li>Another item</li>
        </ul>
        <ul style="list-style-type: circle">
            <li>Circle style</li>
            <li>Another item</li>
        </ul>
        <ul style="list-style-type: square">
            <li>Square style</li>
            <li>Another item</li>
        </ul>

Numbered Variations

  1. Decimal (1, 2, 3)
  2. Second item
  1. Decimal leading zero (01, 02, 03)
  2. Second item
  1. Lower roman (i, ii, iii)
  2. Second item
  1. Upper roman (I, II, III)
  2. Second item
HTML 
<ol style="list-style-type: decimal">
            <li>Decimal (1, 2, 3)</li>
            <li>Second item</li>
        </ol>
        <ol style="list-style-type: decimal-leading-zero">
            <li>Decimal leading zero (01, 02, 03)</li>
            <li>Second item</li>
        </ol>
        <ol style="list-style-type: lower-roman">
            <li>Lower roman (i, ii, iii)</li>
            <li>Second item</li>
        </ol>
        <ol style="list-style-type: upper-roman">
            <li>Upper roman (I, II, III)</li>
            <li>Second item</li>
        </ol>

Alphabetic Variations

  1. Lower alpha (a, b, c)
  2. Second item
  1. Upper alpha (A, B, C)
  2. Second item
  1. Lower greek (α, β, γ)
  2. Second item
HTML 
<ol style="list-style-type: lower-alpha">
            <li>Lower alpha (a, b, c)</li>
            <li>Second item</li>
        </ol>
        <ol style="list-style-type: upper-alpha">
            <li>Upper alpha (A, B, C)</li>
            <li>Second item</li>
        </ol>
        <ol style="list-style-type: lower-greek">
            <li>Lower greek (α, β, γ)</li>
            <li>Second item</li>
        </ol>

Unstyled Lists

Lists without default browser styling.

No List Style

  • First item without bullet
  • Second item without bullet
  • Third item without bullet
HTML 
<ul class="ss-c-list-group">
            <li>First item without bullet</li>
            <li>Second item without bullet</li>
            <li>Third item without bullet</li>
        </ul>

Inline List

  • Home
  • About
  • Services
  • Contact
HTML 
<ul class="ss-c-list-group--horizontal">
            <li>Home</li>
            <li>About</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>

Custom Markers

Lists with custom bullet characters using CSS.

Emoji Markers

  • Completed task
  • In progress
  • Pending task
HTML 
<ul class="ss-c-list-group">
            <li data-marker="✓">Completed task</li>
            <li data-marker="→">In progress</li>
            <li data-marker="○">Pending task</li>
        </ul>

Icon Markers

  • ★ Featured item
  • ♦ Diamond item
  • ● Circle item
HTML 
<ul class="ss-c-list-group">
            <li>
                <span class="ss-c-icon">★</span>
                Featured item
            </li>
            <li>
                <span class="ss-c-icon">♦</span>
                Diamond item
            </li>
            <li>
                <span class="ss-c-icon">●</span>
                Circle item
            </li>
        </ul>

Checklist

Interactive checkbox lists for tasks and to-dos.

Basic Checklist

HTML 
<ul class="ss-c-checklist">
            <li>
                <label>
                    <input type="checkbox" checked />
                    Buy groceries
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" />
                    Clean the house
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" />
                    Call mom
                </label>
            </li>
        </ul>

Divided Lists

Lists with separators between items.

List with Dividers

  • First item with separator below
  • Second item with separator below
  • Third item with separator below
  • Last item without separator
HTML 
<ul class="ss-c-list-group--flush">
            <li>First item with separator below</li>
            <li>Second item with separator below</li>
            <li>Third item with separator below</li>
            <li>Last item without separator</li>
        </ul>

Custom Markers

  • ■ Accent square marker
  • → Arrow marker for action items
  • ✓ Check marker for completed items
  • ✕ Cross marker for removed items
  1. 01 Numbered with leading-zero markers
  2. 02 Editorial numbering in accent
HTML 
<ul style="list-style: none; padding-left: 0">
        <li style="padding-left: 1.5em; text-indent: -1.5em">
            <span style="color: var(--ss-color-accent)">■</span>
            Accent square marker
        </li>
        <li style="padding-left: 1.5em; text-indent: -1.5em">
            <span style="color: var(--ss-color-accent)">→</span>
            Arrow marker for action items
        </li>
        <li style="padding-left: 1.5em; text-indent: -1.5em">
            <span style="color: var(--ss-color-success)">✓</span>
            Check marker for completed items
        </li>
        <li style="padding-left: 1.5em; text-indent: -1.5em">
            <span style="color: var(--ss-color-error)">✕</span>
            Cross marker for removed items
        </li>
    </ul>
    <ol style="list-style: none; counter-reset: item; padding-left: 0">
        <li
            style="counter-increment: item; padding-left: 2em; text-indent: -2em"
        >
            <span
                style="
                    display: inline-block;
                    width: 1.5em;
                    font-weight: 700;
                    color: var(--ss-color-accent);
                "
                >01</span
            >
            Numbered with leading-zero markers
        </li>
        <li
            style="counter-increment: item; padding-left: 2em; text-indent: -2em"
        >
            <span
                style="
                    display: inline-block;
                    width: 1.5em;
                    font-weight: 700;
                    color: var(--ss-color-accent);
                "
                >02</span
            >
            Editorial numbering in accent
        </li>
    </ol>