Playlist

Ordered track list component. Semantic <ol> with framework-provided layout styles.

Basic Playlist

My Playlist

  1. Track One
    Artist Name
    3:42
  2. Track Two
    Another Artist
    4:15
  3. Track Three
    Third Artist
    2:58 
<div class="card">
  <header>
    <h3>My Playlist</h3>
  </header>
  <ol class="playlist">
    <li aria-current="true">
      <figure>
        <span class="axicon render" data-name="Music"></span>
        <figcaption>
          <strong>Track One</strong>
          <div class="muted"><small>Artist Name</small></div>
        </figcaption>
      </figure>
      <span>3:42</span>
    </li>
    <!-- More tracks... -->
  </ol>
</div>

With Controls

<div class="card">
  <header>
    <h3>Queue</h3>
    <menu class="actions">
        <li><button class="icon-only outline" aria-label="Shuffle">
          <span class="axicon render" data-name="Shuffle"></span>
        </button></li>
        <li><button class="icon-only outline" aria-label="Repeat">
          <span class="axicon render" data-name="Repeat"></span>
        </button></li>
      </menu>
  </header>
  <ol class="playlist">
    <!-- Tracks -->
  </ol>
</div>

Accessibility

  • Use <ol> — track order is meaningful
  • Active item should have aria-current="true"
  • Control buttons need aria-label — icons alone aren't sufficient
  • Announce track changes with aria-live="polite" on a status region

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 Playlist 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.