Components / Motion / Stacking Cards

Stacking Cards beta

Cards that land on top of each other as you scroll, each sticking a little lower than the last.

Preview
01

Cast

Every part starts in the same mold: tokens, spacing, one accent.

02

Check

The mold inspects each casting — files, classes, colors, geometry.

03

Compose

Parts stack into blocks, blocks into pages, pages into products.

04

Ship

Copy the code and own it forever. No runtime, no phone-home.

Scroll the box — the cards deal themselves into a pile.

<div class="k-stack">
  <div class="k-stack-card" style="--i:0;background:var(--k-accent-bg)"><span class="n">01</span><h3>Cast</h3><p>Every part starts in the same mold: tokens, spacing, one accent.</p></div><div class="k-stack-card" style="--i:1;background:var(--k-amber-bg)"><span class="n">02</span><h3>Check</h3><p>The mold inspects each casting — files, classes, colors, geometry.</p></div><div class="k-stack-card" style="--i:2;background:var(--k-danger-bg)"><span class="n">03</span><h3>Compose</h3><p>Parts stack into blocks, blocks into pages, pages into products.</p></div><div class="k-stack-card" style="--i:3;background:var(--k-success-bg)"><span class="n">04</span><h3>Ship</h3><p>Copy the code and own it forever. No runtime, no phone-home.</p></div>
  <div class="k-stack-end"></div>
</div>
<p style="font-size:12.5px;color:var(--k-ink-3);margin-top:9px">Scroll the box — the cards deal themselves into a pile.</p>
/* KATA Stacking Cards — sticky deals the pile. */
.k-stack{height:296px;overflow:auto;border:1px solid var(--k-line);border-radius:14px;padding:14px;background:var(--k-bg-soft);font-family:var(--k-font);color:var(--k-ink)}
.k-stack-card{position:sticky;top:calc(6px + var(--i) * 11px);min-height:196px;border-radius:13px;padding:20px;margin-bottom:14px;border:1px solid var(--k-line)}
.k-stack-card .n{font-size:11.5px;font-weight:700;letter-spacing:.18em;color:var(--k-ink-3)}
.k-stack-card h3{font-size:19px;font-weight:650;letter-spacing:-.02em;margin:8px 0 6px}
.k-stack-card p{font-size:13px;line-height:1.75;color:var(--k-ink-2);max-width:340px}
.k-stack-end{height:70px}

Installation

CLI

node kata-ui.mjs add stacking-cards

Writes the part’s CSS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs.

Usage

The landing-page stack, without a library: each card is position sticky with a slightly deeper top offset, so scrolling deals them onto a pile. Pure CSS — the demo lives in a boxed scroller, but the same rules run a full page section. Four cards is a story; eight is a filing cabinet.

Accessibility

Sticky is layout, not trickery: reading order is document order, and every card is fully reachable by scrolling or by keyboard. Nothing is hidden, shrunk away, or conveyed only by the stacking.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-stackclass
.k-stack-cardclass
.nclass
.k-stack-endclass

Related parts

Accordion Gallery beta

Five scenes in a row; the one you touch opens up and tells its caption.

galleryaccordionexpandpanelshover

Aurora beta

A slow wash of color behind a hero — the accent and the core, drifting under glass.

gradientheroambient

Beam border beta

A single point of light travels the edge of a card. The beam is the core color — the one accent, in motion.

borderglowhighlightcard

Blur In beta

Words arrive out of focus and sharpen one after another, like eyes adjusting.

blurrevealtextfocusentrance
Previous
Spotlight