Components / Artwork & collections
Marquee
Faded-edge proof lanes with a static, scrollable reduced-motion fallback.
Basic structure
div.marquee > div.marquee-line > div.marquee-setExample 1
Illustrative proof, not a real endorsement.
Example 2
Illustrative proof, not a real endorsement.
Example 3
Illustrative proof, not a real endorsement.
Example 4
Illustrative proof, not a real endorsement.
Example 5
Illustrative proof, not a real endorsement.
Example 6
Illustrative proof, not a real endorsement.
Example 7
Illustrative proof, not a real endorsement.
Example 8
Illustrative proof, not a real endorsement.
HTML
<div class="marquee" data-marquee tabindex="0" role="region" aria-label="Example proof"><div class="marquee-line"><div class="marquee-set"><div class="proof-item"><strong>Example 1</strong><p>Illustrative proof, not a real endorsement.</p></div><div class="proof-item"><strong>Example 2</strong><p>Illustrative proof, not a real endorsement.</p></div><div class="proof-item"><strong>Example 3</strong><p>Illustrative proof, not a real endorsement.</p></div><div class="proof-item"><strong>Example 4</strong><p>Illustrative proof, not a real endorsement.</p></div><div class="proof-item"><strong>Example 5</strong><p>Illustrative proof, not a real endorsement.</p></div><div class="proof-item"><strong>Example 6</strong><p>Illustrative proof, not a real endorsement.</p></div><div class="proof-item"><strong>Example 7</strong><p>Illustrative proof, not a real endorsement.</p></div><div class="proof-item"><strong>Example 8</strong><p>Illustrative proof, not a real endorsement.</p></div></div></div></div>Options
| Class or attribute | What it does |
|---|---|
is-reversed | Reverse the lane direction; default duration is 60s. |
marquee-set.is-stacked | Two-row composition. |
span-2 | On an individual tile: two tile widths plus the intervening gap, in stacked or single-row sets. |
row-span-2 | On an individual tile: span both rows in a stacked set; no effect in a single row. |
--proof-item-width | Base single-row proof tile width; 260px by default. Stacked sets use 160px grid columns. |
data-marquee | Optional continuous motion, including short sets; synchronized duplicates are inert and hidden from assistive technology. |