Lists

Bulleted Lists

Use .quanta-list-bullets to render a custom bullet list. Add modifiers like .check or .dash for ✔ or – bullets.

<ul class="quanta-list quanta-list-bullets check">
  <li>Success step</li>
  <li>Another success</li>
</ul>

Success step
Another success
Final ✔ item

Numbered Lists

Use .quanta-list-numbers for numbered lists. Use .roman or .alpha for uppercase Roman or Alpha.

<ol class="quanta-list quanta-list-numbers roman">
  <li>First step</li>
  <li>Second step</li>
</ol>

First step
Second step
Third step

List Group

Use .quanta-list-group with .quanta-list-group-item for boxed list items.

<div class="quanta-list-group">
  <div class="quanta-list-group-item">Item One</div>
  <div class="quanta-list-group-item">Item Two</div>
</div>

Item One

Item Two

Item Three

List Item Icons

Prepend icons using .quanta-list-item-icon within an inline list.

<ul class="quanta-list quanta-list-bullets">
  <li>< span class="quanta-list-item-icon">📁</span>Files</li>
  <li>< span class="quanta-list-item-icon">🔒</span>Secure</li>
</ul>

📁Files
🔒Secure
⚙️Settings

Tags & Badges

Attach badges to items with .quanta-list-tag.

<ul class="quanta-list quanta-list-bullets">
  <li>New Feature <span class="quanta-list-tag">Beta</span></li>
</ul>

New Feature Beta
Updated Docs v2.0

Utility Mods

Control spacing or indentation with: .quanta-list-spaced, .quanta-list-no-indent.

<ul class="quanta-list quanta-list-bullets quanta-list-spaced no-indent">
  <li>Spaced & No indent</li>
</ul>

Spaced & no indent item
Another spaced item