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:

• First item
• Second item
• Third item

Styled with .af-list:

• First item
• Second item
• Third item

<!-- 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:

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

Styled with .af-list:

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

<!-- 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:

Term 1

Definition for term 1

Term 2

Definition for term 2

Styled with .af-list:

Term 1

Definition for term 1

Term 2

Definition for term 2

<!-- 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>

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