A photo stack card whose tucked prints fan out on hover for albums, galleries, and case studies.
The import and the props worth knowing about, in one place.
import { Card16 } from "@/components/beste/component/card16";
// First image sits on top; up to two more peek from behind.
<Card16
images={["/albums/offsite-1.jpg", "/albums/offsite-2.jpg", "/albums/offsite-3.jpg"]}
title="Studio offsite"
count="24 photos"
href="/albums/offsite"
/>
<Card16
images={["/albums/berlin-1.jpg", "/albums/berlin-2.jpg"]}
title="Berlin sprint"
tone="primary" // count chip: "light" (default) | "primary"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hover | The card lifts and the image scales inside its frame; `motion-reduce` turns the movement off. |
|---|
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
images* | string[] | — | Photo URLs; the first is on top, up to two more peek from behind |
title | string | — | Title over the bottom scrim |
count | string | — | Count chip in the top right (e.g. "24 photos") |
href | string | — | If set, the whole stack links to this href |
tone | "light" | "primary" | — | Count chip color |
className | string | — | Additional classes merged onto the root |
Identity, guidelines, and design tokens that scale across every touchpoint of your product.
