Lists

Lists are unstyled by default to give you full control. Use the .af-list class to apply styling (bullets, numbers, spacing).

Unordered list

<!-- Unstyled (no bullets, no spacing) -->
<ul>
  <li>
    First item
  </li>
  <li>
    Second item
  </li>
  <li>
    Third item
  </li>
</ul>
<!-- Styled with bullets and spacing -->
<ul class="af-list">
  <li>
    First item
  </li>
  <li>
    Second item
  </li>
  <li>
    Third item
  </li>
</ul>

Ordered list

<!-- Unstyled (no numbers, no spacing) -->
<ol>
  <li>
    First step
  </li>
  <li>
    Second step
  </li>
  <li>
    Third step
  </li>
</ol>
<!-- Styled with numbers and spacing -->
<ol class="af-list">
  <li>
    First step
  </li>
  <li>
    Second step
  </li>
  <li>
    Third step
  </li>
</ol>

Definition list

<!-- Unstyled (no spacing, no special formatting) -->
<dl>
  <dt>
    Term 1
  </dt>
  <dd>
    Definition for term 1
  </dd>
  <dt>
    Term 2
  </dt>
  <dd>
    Definition for term 2
  </dd>
</dl>
<!-- Styled with spacing and formatting -->
<dl class="af-list">
  <dt>
    Term 1
  </dt>
  <dd>
    Definition for term 1
  </dd>
  <dt>
    Term 2
  </dt>
  <dd>
    Definition for term 2
  </dd>
</dl>

Live example

Unstyled Lists (Default)

Unordered:

• First item
• Second item
• Third item

Ordered:

1. First step
2. Second step
3. Third step

Definition:

Term 1

Definition for term 1

Term 2

Definition for term 2

Styled Lists (with .af-list)

Unordered:

• First item
• Second item
• Third item

Ordered:

1. First step
2. Second step
3. Third step

Definition:

Term 1

Definition for term 1

Term 2

Definition for term 2

Why unstyled by default?

Lists are often used in navigation, menus, and other UI patterns where you don’t want default bullets or numbers. By making lists unstyled by default, you have full control:

• Navigation menus (.af-navbar-nav, .af-menu-list) work without needing to override styles
• Custom list layouts are easier to build
• When you need traditional list styling, just add .af-list