Expanding Cards

A horizontal strip of panels that expand on click/focus — one stays wide while the others stay slim. Use ← → when a panel is focused. Great for featured galleries and showcases where you want one focal item at a time.

Photo strip

Uses a background image on each .vd-expanding-card via --vd-expanding-card-bg.

Quiet cove

Dock and lily pads

Lakeside glow

Sun through the trees

Sunlit forest

Rays through the canopy

Forest floor

Moss and wild strawberry

Reindeer lichen

Pale coral on pine needles

<div class="vd-expanding-cards" data-vd-expanding-cards>
  <div class="vd-expanding-card is-active"
       style="--vd-expanding-card-bg: url(/images/expanding/0.jpg);">
    <div class="vd-expanding-card-shadow"></div>
    <div class="vd-expanding-card-label">
      <div class="vd-expanding-card-icon"><i class="ph ph-waves"></i></div>
      <div class="vd-expanding-card-info">
        <div class="vd-expanding-card-title">Quiet cove</div>
        <div class="vd-expanding-card-subtitle">Dock and lily pads</div>
      </div>
    </div>
  </div>
  <!-- …more .vd-expanding-card children… -->
</div>

Solid brand colors

Set --vd-expanding-card-bg to a flat color (and --vd-expanding-card-bg-default so the icon circle matches).

Design

Tokens & themes

Quality

A11y & tests

Ship

Release cadence

Docs

Guides & API

Issues

Triage & fixes

Attribution

Interaction and layout are adapted from the MIT-licensed CodePen “Expanding flex cards” by Zed Dash. Vanduo adds prefixed class names, documentation, optional keyboard navigation, and reduced-motion handling. Photo strip images are Vanduo demo assets.

Engine wiring

import { ref } from 'vue';
import { useExpandingCards } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
useExpandingCards(root);   // wires every [data-vd-expanding-cards] inside root

API Reference

Class / Variable	Description
`.vd-expanding-cards`	Container. Add data-vd-expanding-cards to enable it.
`.vd-expanding-card`	A panel. The active one expands; others slim down.
`.vd-expanding-card.is-active`	Sets the initially expanded card.
`--vd-expanding-card-bg`	Per-card background (url(...) or a color).
`--vd-expanding-card-bg-default`	Icon-circle background for solid-color cards.
`.vd-expanding-card-label`	Overlay holding the icon + title + subtitle.

Accessibility

Each card is focusable; arrow keys move between cards and Enter/Space expand the focused card.
The active card carries aria-pressed="true"; the others aria-pressed="false".
Background photos are decorative — the title/subtitle provide the accessible label.