📝 List Styles Demo - Quill Kit

🎯 How to Use List Styles

Create a List: Click the bullet list (●) or numbered list (1.) button
Add Content: Type your list items
Select a Style: Place cursor inside the list and choose from:
- Bullet Styles: Disc (●), Circle (○), Square (■), or None
- Numbering Styles: 1,2,3 | a,b,c | A,B,C | i,ii,iii | I,II,III | None

✨ Available Features

✅ Create unordered (bullet) lists
✅ Create ordered (numbered) lists
✅ Multiple bullet styles: Disc, Circle, Square, None
✅ Multiple numbering styles: Decimal, Lower/Upper Alpha, Lower/Upper Roman, None
✅ Easy style switching without recreating lists
✅ Works with rich text formatting

Editor

<h2>Welcome to the List Styles Demo!</h2>

<p>Try creating different types of lists with various styles:</p>

<h3>Example: Bullet List with Disc Style</h3>
<ul style="list-style-type: disc;">
    <li>First item with disc bullet</li>
    <li>Second item with disc bullet</li>
    <li>Third item with disc bullet</li>
</ul>

<h3>Example: Bullet List with Circle Style</h3>
<ul style="list-style-type: circle;">
    <li>First item with circle bullet</li>
    <li>Second item with circle bullet</li>
    <li>Third item with circle bullet</li>
</ul>

<h3>Example: Bullet List with Square Style</h3>
<ul style="list-style-type: square;">
    <li>First item with square bullet</li>
    <li>Second item with square bullet</li>
    <li>Third item with square bullet</li>
</ul>

<h3>Example: Numbered List with Decimal Style</h3>
<ol style="list-style-type: decimal;">
    <li>First numbered item</li>
    <li>Second numbered item</li>
    <li>Third numbered item</li>
</ol>

<h3>Example: Numbered List with Lower Alpha Style</h3>
<ol style="list-style-type: lower-alpha;">
    <li>First item (a)</li>
    <li>Second item (b)</li>
    <li>Third item (c)</li>
</ol>

<h3>Example: Numbered List with Upper Alpha Style</h3>
<ol style="list-style-type: upper-alpha;">
    <li>First item (A)</li>
    <li>Second item (B)</li>
    <li>Third item (C)</li>
</ol>

<h3>Example: Numbered List with Lower Roman Style</h3>
<ol style="list-style-type: lower-roman;">
    <li>First item (i)</li>
    <li>Second item (ii)</li>
    <li>Third item (iii)</li>
</ol>

<h3>Example: Numbered List with Upper Roman Style</h3>
<ol style="list-style-type: upper-roman;">
    <li>First item (I)</li>
    <li>Second item (II)</li>
    <li>Third item (III)</li>
</ol>

<h3>Try It Yourself!</h3>
<p>Create your own lists and experiment with different styles using the dropdown menus in the toolbar.</p>