Open experiment
Interactive map hero
Introduces a location-based service through selectable regions and live availability summaries. Region buttons update coverage, response time, and CTA destination with keyboard parity. Makes geographic coverage the primary hero interaction rather than decorative locality copy.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<header class="cmp-interactive-map-hero cmp-atlas" data-state="idle" data-variant="1">
<div class="cmp-atlas__hero-copy">
<span>Luminous service map · 2026</span>
<h2>Interactive <em>map</em></h2>
<p>
Introduces a location-based service through selectable regions and live availability
summaries.
</p>
<div class="cmp-atlas__choices">
<button type="button" data-choice="0" aria-pressed="true">Discover</button
><button type="button" data-choice="1" aria-pressed="false">Compose</button
><button type="button" data-choice="2" aria-pressed="false">Launch</button>
</div>
<div>
<button
type="button"
class="cmp-atlas__primary"
data-primary
data-active-label="Reminder set"
aria-pressed="false"
>
Enter the experience</button
><small data-output>Chapter 01 · Signal</small>
</div>
<p data-status aria-live="polite">Discover mode selected</p>
</div>
<div class="cmp-atlas__hero-stage" aria-hidden="true">
<i></i><i></i><i></i><b>02</b><span>Interactive map</span>
</div>
</header>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Every interactive target is a labelled native control with a visible focus treatment.
- State changes are communicated through a polite text status and never by color alone.
- The contained visual effects stop when the user requests reduced motion.
License: MIT License for open-source use, modification, and distribution.