About this component
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"
/>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
Brand systems
Brand systems
Identity, guidelines, and design tokens that scale across every touchpoint of your product.
