List

Semantic list components. Native <ul> and <ol> with framework styling. No extra classes for basic lists.

Unordered List

  • Semantic HTML first
  • One class per component
  • Design tokens throughout
  • Zero BEM classes
<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Ordered List

  1. Install via npm or CDN
  2. Write semantic HTML
  3. Add one root class per component
  4. Ship — no build step needed
<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

With Icons

  • Accessible by default
  • 15.3 KB gzipped
  • WCAG 2.1 AA
  • Zero dependencies
<ul>
  <li>
    <span class="axicon render" data-name="Check-Circle"></span>
    Accessible by default
  </li>
</ul>

Nested

  • Frontend
    • HTML & CSS
    • JavaScript
  • Backend
    • Node.js
    • Python
<ul>
  <li>Parent item
    <ul>
      <li>Child item</li>
    </ul>
  </li>
</ul>

Unstyled (nav lists)

Navigation lists need no bullets. The framework handles list-style: none automatically on nav ul, header ul, and footer ul.

<nav aria-label="Main">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>

Accessibility

  • Use <ul> for unordered items, <ol> when sequence matters
  • Never use lists purely for layout spacing
  • Icon-only list items need descriptive text for screen readers
  • For interactive lists (menus), use role="listbox" or role="menu"

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The List component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.