Mark · Patterns

Marquee

The scrolling band — repeated items on an infinite track, the post-hero energy strip. Pure CSS motion — pauses on hover, honors reduced motion, freezes deterministically.

These are full-width bands, so the specimens below are cramped by the documentation column. Use Full page preview on any example to see it own the viewport.

Banner

Full page preview ↗
Composable partialsTwo starter themesSkins flip liveLight and dark, no flash 
<div class="mk-marquee mk-marquee--banner">
  <div class="mk-marquee__track">
    <span class="mk-marquee__item">
      Composable partials
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item">
      Two starter themes
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item">
      Skins flip live
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item">
      Light and dark, no flash
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item" aria-hidden="true">
      Composable partials
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item" aria-hidden="true">
      Two starter themes
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item" aria-hidden="true">
      Skins flip live
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item" aria-hidden="true">
      Light and dark, no flash
      <span class="mk-marquee__dot"></span>
    </span>
  </div>
</div>
items: [4 items]

Plain

Full page preview ↗
TokensComponentsPatternsChrome 
<div class="mk-marquee">
  <div class="mk-marquee__track" style="--mk-marquee-duration: 32s">
    <span class="mk-marquee__item">
      Tokens
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item">
      Components
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item">
      Patterns
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item">
      Chrome
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item" aria-hidden="true">
      Tokens
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item" aria-hidden="true">
      Components
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item" aria-hidden="true">
      Patterns
      <span class="mk-marquee__dot"></span>
    </span>
    <span class="mk-marquee__item" aria-hidden="true">
      Chrome
      <span class="mk-marquee__dot"></span>
    </span>
  </div>
</div>
surface: plain
speed: 32
items: [4 items]
Fields (4)
FieldTypeNotes
items repeater
surface text banner (accent band) or plain (bordered, body colors)
speed text Seconds per loop — default 24; higher is slower
class_names text
On this page