An instant photo card with masking tape, serif caption, and a tilt that straightens on hover for galleries.
The import and the props worth knowing about, in one place.
import { Card12 } from "@/components/beste/component/card12";
// The whole polaroid becomes a link when href is set.
<Card12
src="/photos/alacati.jpg"
caption="Summer in Alacati"
date="Aug 2026"
href="/gallery/alacati"
/>
<Card12
src="/photos/team.jpg"
caption="The whole crew"
untaped // hide the tape strip
tone="sky" // tape: "sand" (default) | "sky" | "rose"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card12 } from "@/components/beste/component/card12";
<Card12
src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=800&auto=format&fit=crop"
caption="Summer in Alacati"
date="Aug 2026"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
src* | string | — | Photo URL |
caption | string | — | Caption written under the photo |
date | string | — | Small muted line under the caption (e.g. a date or place) |
href | string | — | If set, the whole polaroid links to this href |
untaped | boolean | — | Hide the masking tape strip |
tone | "sand" | "sky" | "rose" | — | Tape color |
className | string | — | Additional classes merged onto the root |
A photo stack card whose tucked prints fan out on hover for albums, galleries, and case studies.
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 modular controller for creative tools, machined from a single block of aluminum.
A 3D tilt card that rotates in perspective toward the cursor with a moving glare for product showcases.
A portfolio card with a full bleed image, hover zoom, and gradient title overlay for work showcases.