Open experiment
Layered case study card
Reveals problem, intervention, and measured outcome as three tactile card layers. Layer tabs and arrow keys move between story phases while the key metric remains visible. Structures a case study as phased evidence rather than a generic profile or product card.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<article class="cmp-layered-case-study-card cmp-atlas" data-state="idle" data-variant="3">
<div class="cmp-atlas__content-art" aria-hidden="true"><i></i><i></i><i></i><b>Lcs</b></div>
<div class="cmp-atlas__content-body">
<span>Case studies</span>
<h3>Layered case study</h3>
<p>Reveals problem, intervention, and measured outcome as three tactile card layers.</p>
<div class="cmp-atlas__choices">
<button type="button" data-choice="0" aria-pressed="true">Signal</button
><button type="button" data-choice="1" aria-pressed="false">Story</button
><button type="button" data-choice="2" aria-pressed="false">Proof</button>
</div>
<div class="cmp-atlas__content-foot">
<small data-output>Chapter 01 · 2 min</small
><button
type="button"
class="cmp-atlas__primary"
data-primary
data-active-label="Paused"
aria-pressed="false"
>
Explore
</button>
</div>
<p data-status aria-live="polite">Signal chapter selected</p>
</div>
</article>
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.