All Patterns

Pill Carousel

Pill Carousel

Infinite scrolling marquee with pill-shaped tags. Each row operates independently with its own configuration.

Section Data Attributes

Set these on the .pill-carousel section element:

Attribute Default Description
data-show-pause false Set to true to show a pause/play button
aria-label — Describe the section content for screen readers

Row Data Attributes

Set these on each .pill-carousel__row element via the Attributes Bar (Cmd+K):

Attribute Default Description
data-direction ltr ltr (left to right) or rtl (right to left)
data-speed 30000 Animation duration in milliseconds. Higher = slower.
data-pause-hover false Set to true to pause animation on hover.
data-fade true Edge fade effect. Set to false to disable.

Accessibility Features

  • prefers-reduced-motion: Animation stops completely for users who prefer reduced motion
  • Pause/Play button: Optional keyboard-accessible control (enable with data-show-pause="true")
  • Screen reader support: Duplicated content marked aria-hidden, tracks use role="marquee"
  • Section label: aria-label describes the section purpose (customize as needed)

Usage Tips

  • Each row is independent — mix directions and speeds for visual interest
  • Default setup: Row 1 (LTR), Row 2 (RTL), Row 3 (LTR)
  • Add or remove rows as needed
  • Add or remove pills within each track
  • Update the section aria-label to match your content

Styling

Uses ACSS variables directly. Customize via Etch styles:

  • Section background: var(--neutral-ultra-light)
  • Pill text: var(--text-l), var(--black)
  • Pill border: 1.5px solid var(--black)
  • Spacing: var(--space-s), var(--space-m)