EngineeringShipping faster with a component registry
How we cut landing page build time from days to hours by treating sections as installable units.
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"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card16 } from "@/components/beste/component/card16";
<Card16
images={["https://images.unsplash.com/photo-1782174177406-d36704027953?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D","https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=800&auto=format&fit=crop","https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?q=80&w=800&auto=format&fit=crop"]}
title="Studio offsite"
count="24 photos"
href="#"
/>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 |
Summer in AlacatiAug 2026An instant photo card with masking tape, serif caption, and a tilt that straightens on hover for galleries.
Stereo / 33 RPM
A vinyl record card whose disc slides out of the sleeve and spins on hover for music and creative landings.
Identity, guidelines, and design tokens that scale across every touchpoint of your product.
A 3D flip card that rotates on hover to reveal details and a link for service and feature grids.
A portfolio card with a full bleed image, hover zoom, and gradient title overlay for work showcases.
EngineeringHow we cut landing page build time from days to hours by treating sections as installable units.
An article card with cover image, category chip, excerpt, and author row for blog and news grids.