About this component
Flip Card
A 3D flip card that rotates on hover to reveal details and a link for service and feature grids.
Usage
The import and the props worth knowing about, in one place.
import { Card13 } from "@/components/beste/component/card13";
import { Palette } from "lucide-react";
// Hover (or keyboard focus) flips the card to the detail face.
<Card13
title="Brand systems"
description="Identity, guidelines, and design tokens that scale."
href="/services/brand"
linkLabel="Explore service"
/>
<Card13
icon={Palette} // front icon (default: Layers)
title="Art direction"
description="Campaign visuals from moodboard to final delivery."
href="/services/art"
tone="primary" // back face: "dark" (default) | "primary"
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
icon | LucideIcon | — | Front face icon (defaults to Layers) |
title* | string | — | Title, shown on both faces |
description* | string | — | Back face body text |
href | string | — | Back face link |
linkLabel | string | — | Back face link label (defaults to "Learn more") |
tone | "dark" | "primary" | — | Back face surface |
className | string | — | Additional classes merged onto the root |
