Sliders & carousels

<section
  class="sl-slider"
  aria-roledescription="carousel"
  aria-label="Featured stories"
>
  <div
    class="sl-slider__track"
    id="featured-track"
    tabindex="0"
    role="group"
    aria-label="Featured slides. Use arrow keys or swipe."
  >
    <article
      class="sl-slide sl-stack"
      id="featured-1"
      tabindex="-1"
      role="group"
      aria-roledescription="slide"
      aria-label="1 of 3"
    >
      <div class="sl-slide-art" aria-hidden="true"></div>
      <span class="sl-badge">01 / 03</span>
      <h3 class="sl-text-xl">Start with structure</h3>
      <p class="sl-text-muted">
        A flexible foundation for your next idea. This is illustrative carousel content.
      </p>
      <nav class="sl-cluster sl-justify-between" aria-label="Slide 1 controls">
        <a href="#featured-3" aria-label="Previous slide, 3">← Previous</a
        ><a href="#featured-2" aria-label="Next slide, 2">Next →</a>
      </nav>
    </article>
    <article
      class="sl-slide sl-stack"
      id="featured-2"
      tabindex="-1"
      role="group"
      aria-roledescription="slide"
      aria-label="2 of 3"
    >
      <div class="sl-slide-art sl-slide-art--warm" aria-hidden="true"></div>
      <span class="sl-badge">02 / 03</span>
      <h3 class="sl-text-xl">Add a little expression</h3>
      <p class="sl-text-muted">
        A flexible foundation for your next idea. This is illustrative carousel content.
      </p>
      <nav class="sl-cluster sl-justify-between" aria-label="Slide 2 controls">
        <a href="#featured-1" aria-label="Previous slide, 1">← Previous</a
        ><a href="#featured-3" aria-label="Next slide, 3">Next →</a>
      </nav>
    </article>
    <article
      class="sl-slide sl-stack"
      id="featured-3"
      tabindex="-1"
      role="group"
      aria-roledescription="slide"
      aria-label="3 of 3"
    >
      <div class="sl-slide-art sl-slide-art--mint" aria-hidden="true"></div>
      <span class="sl-badge">03 / 03</span>
      <h3 class="sl-text-xl">Make it yours</h3>
      <p class="sl-text-muted">
        A flexible foundation for your next idea. This is illustrative carousel content.
      </p>
      <nav class="sl-cluster sl-justify-between" aria-label="Slide 3 controls">
        <a href="#featured-2" aria-label="Previous slide, 2">← Previous</a
        ><a href="#featured-1" aria-label="Next slide, 1">Next →</a>
      </nav>
    </article>
  </div>
  <nav class="sl-slider__nav" aria-label="Choose a featured slide">
    <a href="#featured-1" aria-label="Go to slide 1">1</a
    ><a href="#featured-2" aria-label="Go to slide 2">2</a
    ><a href="#featured-3" aria-label="Go to slide 3">3</a>
  </nav>
</section>

<section class="sl-slider sl-slider--cards" aria-label="Project card rail">
  <div
    class="sl-slider__track"
    tabindex="0"
    role="group"
    aria-label="Project cards. Swipe or use arrow keys."
  >
    <article class="sl-slide sl-stack" id="rail-1" tabindex="-1">
      <span class="sl-badge">Example 01</span>
      <h3 class="sl-text-xl">Notebook</h3>
      <p class="sl-text-muted">A composable card, in a native scroll-snap rail.</p>
      <a href="/components/cards/">Explore card patterns ↗</a>
    </article>
    <article class="sl-slide sl-stack" id="rail-2" tabindex="-1">
      <span class="sl-badge">Example 02</span>
      <h3 class="sl-text-xl">Field notes</h3>
      <p class="sl-text-muted">A composable card, in a native scroll-snap rail.</p>
      <a href="/components/cards/">Explore card patterns ↗</a>
    </article>
    <article class="sl-slide sl-stack" id="rail-3" tabindex="-1">
      <span class="sl-badge">Example 03</span>
      <h3 class="sl-text-xl">The studio</h3>
      <p class="sl-text-muted">A composable card, in a native scroll-snap rail.</p>
      <a href="/components/cards/">Explore card patterns ↗</a>
    </article>
    <article class="sl-slide sl-stack" id="rail-4" tabindex="-1">
      <span class="sl-badge">Example 04</span>
      <h3 class="sl-text-xl">New chapter</h3>
      <p class="sl-text-muted">A composable card, in a native scroll-snap rail.</p>
      <a href="/components/cards/">Explore card patterns ↗</a>
    </article>
  </div>
  <nav class="sl-slider__nav" aria-label="Choose a rail slide">
    <a href="#rail-1" aria-label="Go to slide 1">1</a
    ><a href="#rail-2" aria-label="Go to slide 2">2</a
    ><a href="#rail-3" aria-label="Go to slide 3">3</a
    ><a href="#rail-4" aria-label="Go to slide 4">4</a>
  </nav>
</section>

<section class="sl-slider" aria-label="Illustrative quote slider">
  <div class="sl-slider__track" tabindex="0" role="group" aria-label="Quote slides">
    <figure class="sl-slide sl-stack" id="quote-1" tabindex="-1">
      <blockquote class="sl-text-xl">“Leave space for the idea.”</blockquote>
      <figcaption class="sl-help">Illustrative design note · 1 of 3</figcaption>
    </figure>
    <figure class="sl-slide sl-stack" id="quote-2" tabindex="-1">
      <blockquote class="sl-text-xl">“Build the structure once.”</blockquote>
      <figcaption class="sl-help">Illustrative design note · 2 of 3</figcaption>
    </figure>
    <figure class="sl-slide sl-stack" id="quote-3" tabindex="-1">
      <blockquote class="sl-text-xl">“Let your content lead.”</blockquote>
      <figcaption class="sl-help">Illustrative design note · 3 of 3</figcaption>
    </figure>
  </div>
  <nav class="sl-slider__nav" aria-label="Choose a quote slide">
    <a href="#quote-1" aria-label="Go to slide 1">1</a
    ><a href="#quote-2" aria-label="Go to slide 2">2</a
    ><a href="#quote-3" aria-label="Go to slide 3">3</a>
  </nav>
</section>

<section class="sl-slider sl-slider--vertical" aria-label="Vertical chapter slider">
  <div
    class="sl-slider__track"
    id="vertical-track"
    tabindex="0"
    role="group"
    aria-label="Vertical chapters. Use up and down arrows."
  >
    <article class="sl-slide sl-stack" id="vertical-1" tabindex="-1">
      <span class="sl-badge">Chapter 1</span>
      <h3 class="sl-text-xl">The beginning</h3>
      <p>
        A vertical slide with a comfortable reading area. There is no automatic
        movement.
      </p>
    </article>
    <article class="sl-slide sl-stack" id="vertical-2" tabindex="-1">
      <span class="sl-badge">Chapter 2</span>
      <h3 class="sl-text-xl">A different perspective</h3>
      <p>
        A vertical slide with a comfortable reading area. There is no automatic
        movement.
      </p>
    </article>
    <article class="sl-slide sl-stack" id="vertical-3" tabindex="-1">
      <span class="sl-badge">Chapter 3</span>
      <h3 class="sl-text-xl">What comes next</h3>
      <p>
        A vertical slide with a comfortable reading area. There is no automatic
        movement.
      </p>
    </article>
  </div>
  <nav class="sl-slider__nav" aria-label="Choose a vertical slide">
    <a href="#vertical-1" aria-label="Go to slide 1">1</a
    ><a href="#vertical-2" aria-label="Go to slide 2">2</a
    ><a href="#vertical-3" aria-label="Go to slide 3">3</a>
  </nav>
</section>

<div class="sl-stack">
  <div class="sl-field">
    <label class="sl-label" for="slider-intensity">Intensity</label
    ><input
      id="slider-intensity"
      class="sl-range"
      type="range"
      min="0"
      max="100"
      value="40"
      step="5"
    />
    <p class="sl-help">0–100, in steps of 5. Use the arrow keys.</p>
  </div>
  <div class="sl-field">
    <label class="sl-label" for="slider-disabled">Disabled example</label
    ><input
      id="slider-disabled"
      class="sl-range"
      type="range"
      min="0"
      max="100"
      value="60"
      disabled
    />
  </div>
</div>

<section
  class="sl-slider"
  aria-label="Sample testimonials"
  aria-roledescription="carousel"
>
  <div
    class="sl-slider__track"
    tabindex="0"
    role="group"
    aria-label="Testimonial slides. Swipe or focus here and use arrow keys."
  >
    <figure
      class="sl-slide sl-stack sl-gap-6"
      id="customer-testimonial-1"
      tabindex="-1"
      role="group"
      aria-roledescription="slide"
      aria-label="1 of 3"
    >
      <p class="sl-help">Sample testimonial</p>
      <blockquote>
        <p>
          “The spacing and typography gave our prototype a clear rhythm from the very
          first screen.”
        </p>
      </blockquote>
      <figcaption class="sl-cluster sl-gap-4">
        <span class="sl-badge" aria-hidden="true">MC</span>
        <div>
          <p><strong>Maya Chen</strong></p>
          <p class="sl-help">Product designer · North Studio</p>
        </div>
      </figcaption>
    </figure>
    <figure
      class="sl-slide sl-stack sl-gap-6"
      id="customer-testimonial-2"
      tabindex="-1"
      role="group"
      aria-roledescription="slide"
      aria-label="2 of 3"
    >
      <p class="sl-help">Sample testimonial</p>
      <blockquote>
        <p>
          “I could compose a clean interface with familiar HTML and just the CSS modules
          I needed.”
        </p>
      </blockquote>
      <figcaption class="sl-cluster sl-gap-4">
        <span class="sl-badge" aria-hidden="true">AM</span>
        <div>
          <p><strong>Alex Morgan</strong></p>
          <p class="sl-help">Frontend developer · Fieldwork</p>
        </div>
      </figcaption>
    </figure>
    <figure
      class="sl-slide sl-stack sl-gap-6"
      id="customer-testimonial-3"
      tabindex="-1"
      role="group"
      aria-roledescription="slide"
      aria-label="3 of 3"
    >
      <p class="sl-help">Sample testimonial</p>
      <blockquote>
        <p>
          “The same cards feel considered in both themes, with room for our own visual
          identity.”
        </p>
      </blockquote>
      <figcaption class="sl-cluster sl-gap-4">
        <span class="sl-badge" aria-hidden="true">PS</span>
        <div>
          <p><strong>Priya Shah</strong></p>
          <p class="sl-help">Creative lead · Paper & Form</p>
        </div>
      </figcaption>
    </figure>
  </div>
  <nav class="sl-slider__nav" aria-label="Choose a testimonial">
    <a
      href="#customer-testimonial-1"
      aria-label="Read sample testimonial from Maya Chen"
      >1</a
    ><a
      href="#customer-testimonial-2"
      aria-label="Read sample testimonial from Alex Morgan"
      >2</a
    ><a
      href="#customer-testimonial-3"
      aria-label="Read sample testimonial from Priya Shah"
      >3</a
    >
  </nav>
</section>