DIF-04
Untriaged Marquee statement
One statement at a size nothing else on the page reaches, and almost nothing else in the section. Used as a hinge between two dense sections.
Use it when
One statement at a size nothing else on the page reaches, and almost nothing else in the section. Used as a hinge between two dense sections.
- Category
- Difference
- Layout archetype
- Marquee
- Page position
- middle (derived)
- Purpose
- compare (derived)
- Field
- light (derived)
- Interaction
- static (derived)
- Motifs
- Quiet field
Content it requires
- A two-part statement under twelve words
- Two short footer facts and one link, unless showFoot is off
Do not use it when
- Once per page. A second marquee makes the first one ordinary.
- Must sit between two dense sections. On its own it reads as a gap in the page.
- If the statement needs a qualifier to be true, it is not a marquee statement.
- Past about twelve words the xl scale runs longer than a viewport. Pass size="lg" for a longer statement, and accept that it reads as a section rather than a marquee.
- showFoot={false} leaves the statement with nothing under it and no onward link. Use it only where the surrounding sections already carry the next step.
Variants
None. Colour swaps and mirrored alignment do not count as variants.
Implementation
src/components/patterns/DiffMarquee.astro
---
import DiffMarquee from '../components/patterns/DiffMarquee.astro';
---
<DiffMarquee />Import directly. Do not route production through patternComponents.
Production usage
Not yet used on a production page. Nothing here has been proven in front of a customer.
Accessibility
- Verified at 360, 768, 1024, and 1440 with no horizontal overflow.
- No interactive controls beyond links and buttons inherited from the design system.
- Colour never carries meaning alone: every state marker is paired with text.
- Motion respects prefers-reduced-motion.