### 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="list--unstyled">
                <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="list--inline">
                <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="list--emoji">
                <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="list--icons">
                <li>
                    <span class="icon">★</span>
                    Featured item
                </li>
                <li>
                    <span class="icon">♦</span>
                    Diamond item
                </li>
                <li>
                    <span class="icon">●</span>
                    Circle item
                </li>
            </ul>

### Checklist

Interactive checkbox lists for tasks and to-dos.

#### Basic Checklist

- Buy groceries
- Clean the house
- Call mom

HTML

    <ul class="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="list--divided">
                <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>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!