Vinyl Record Card
A vinyl record card whose disc slides out of the sleeve and spins on hover for music and creative landings.
Usage
The import and the props worth knowing about, in one place.
import { Card17 } from "@/components/beste/component/card17";
// The disc peeks out at rest and slides out spinning on hover.
<Card17
title="Midnight Frequencies"
artist="Aurora Fields"
catalog="BST-004"
/>
<Card17
title="Field Notes, Vol. 2"
artist="Beste Studio"
src="/covers/field-notes.jpg" // optional cover art
tone="sand" // sleeve: "ink" (default) | "primary" | "sand"
/>Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
Midnight Frequencies
Stereo / 33 RPM
import { Card17 } from "@/components/beste/component/card17";
<Card17
title="Midnight Frequencies"
artist="Aurora Fields"
catalog="BST-004"
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Album title on the sleeve |
artist | string | — | Artist line above the title |
catalog | string | — | Catalog number in the sleeve corner (e.g. "BST-004") |
src | string | — | Cover art URL; the sleeve stays typographic when omitted |
tone | "ink" | "primary" | "sand" | — | Sleeve color |
className | string | — | Additional classes merged onto the root |
More Card components
View all Card
Photo Stack Card
A photo stack card whose tucked prints fan out on hover for albums, galleries, and case studies.
Summer in AlacatiAug 2026Polaroid Card
An instant photo card with masking tape, serif caption, and a tilt that straightens on hover for galleries.
Brand systems
Brand systems
Identity, guidelines, and design tokens that scale across every touchpoint of your product.
Flip Card
A 3D flip card that rotates on hover to reveal details and a link for service and feature grids.
Customer satisfaction
vs last quarter
Stat Card
A minimal stat card with a bold value, label, and optional trend delta for metrics rows.
