Components / Motion / Accordion Gallery

Accordion Gallery beta

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

Preview
NorthThe night shift, distilled.
LagoonTeal, all the way down.
FogA landscape withholding.
EmberThe last warm hour.
VaultMostly shadow, some door.
<div class="k-gal">
  <div class="k-gal-p" tabindex="0" style="background:linear-gradient(165deg, var(--k-zinc-700), var(--k-zinc-950))"><span class="t">North</span><span class="c">The night shift, distilled.</span></div>
  <div class="k-gal-p" tabindex="0" style="background:linear-gradient(165deg, var(--k-accent), var(--k-zinc-950))"><span class="t">Lagoon</span><span class="c">Teal, all the way down.</span></div>
  <div class="k-gal-p" tabindex="0" style="background:linear-gradient(165deg, var(--k-zinc-400), var(--k-zinc-800))"><span class="t">Fog</span><span class="c">A landscape withholding.</span></div>
  <div class="k-gal-p" tabindex="0" style="background:linear-gradient(165deg, var(--k-amber-ink), var(--k-zinc-950))"><span class="t">Ember</span><span class="c">The last warm hour.</span></div>
  <div class="k-gal-p" tabindex="0" style="background:linear-gradient(165deg, var(--k-zinc-900), var(--k-zinc-950))"><span class="t">Vault</span><span class="c">Mostly shadow, some door.</span></div>
</div>
/* KATA Accordion Gallery — the touched panel takes the room. */
.k-gal{display:flex;gap:8px;height:238px;font-family:var(--k-font)}
.k-gal-p{position:relative;flex:1;border-radius:13px;overflow:hidden;transition:flex .55s cubic-bezier(.6,0,.2,1);cursor:pointer;outline-offset:2px}
.k-gal-p:hover,.k-gal-p:focus-visible{flex:3.1}
.k-gal-p .t{position:absolute;left:13px;bottom:12px;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--k-on-color);font-size:12.5px;font-weight:650;letter-spacing:.16em}
.k-gal-p .c{position:absolute;left:15px;bottom:13px;right:14px;color:var(--k-on-color);font-size:13.5px;font-weight:550;opacity:0;transition:opacity .3s .18s}
.k-gal-p:hover .c,.k-gal-p:focus-visible .c{opacity:1}
.k-gal-p:hover .t,.k-gal-p:focus-visible .t{opacity:0}
@media (prefers-reduced-motion:reduce){.k-gal-p{transition:none}.k-gal-p .c{transition:none}}

Installation

CLI

node kata-ui.mjs add accordion-gallery

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

A flex row where the hovered (or focused) panel takes three times the room and its caption fades in. The scenes here are gradients, but photographs slot straight in. A staple of landing pages because it shows five things and describes one — exactly the right ratio.

Accessibility

Panels are focusable and expand on focus as well as hover, so the keyboard gets the same gallery. Captions are real text inside each panel, present in the reading order whether or not the panel is open.

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-galclass
.k-gal-pclass
.tclass
.cclass

Related parts

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

Comparison Slider beta

Before and after, one image wide: drag the seam and the second state wipes over the first.

beforeafterimagecomparedrag
Previous
Typeset