Book Cover Card

Beste StudioThe Component HandbookSecond edition
About this component

Book Cover Card

A 3D book cover card that swings open on hover to reveal page edges for ebooks, guides, and lead magnets.

Usage

The import and the props worth knowing about, in one place.

import { Card19 } from "@/components/beste/component/card19";

// The cover swings open on hover; the whole book links when href is set.
<Card19
  title="The Component Handbook"
  author="Beste Studio"
  note="Second edition"
  href="/handbook"
/>

<Card19
  title="Design Tokens Field Guide"
  author="Selin Aksoy"
  src="/covers/tokens.jpg"   // optional cover art
  tone="paper"               // cover: "ink" (default) | "primary" | "paper"
/>

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

Beste StudioThe Component HandbookSecond edition
Usage
import { Card19 } from "@/components/beste/component/card19";

<Card19
  title="The Component Handbook"
  author="Beste Studio"
  note="Second edition"
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

PropTypeDefaultDescription
title*string—Book title
authorstring—Author line above the title
notestring—Small line at the bottom of the cover (e.g. "Second edition")
srcstring—Cover art URL; the cover stays typographic when omitted
hrefstring—If set, the whole book links to this href
tone"ink" | "primary" | "paper"—Cover color
classNamestring—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.

Explore service

Flip Card

A 3D flip card that rotates on hover to reveal details and a link for service and feature grids.

Article Card

An article card with cover image, category chip, excerpt, and author row for blog and news grids.

Meet the Atlas Deck
Hardware

Meet the Atlas Deck

A modular controller for creative tools, machined from a single block of aluminum.

3D Tilt Card

A 3D tilt card that rotates in perspective toward the cursor with a moving glare for product showcases.

Nordwind StudioBrand identityNordwind Studio

Portfolio Card

A portfolio card with a full bleed image, hover zoom, and gradient title overlay for work showcases.

Atlas Field Watch-22%

Atlas Field Watch

4.8
$249$320

Product Card

A product card with image, price, discount badge, wishlist toggle, and add to cart action for shop grids.

Deniz Arslan

Deniz Arslan

Creative Director

Leads brand systems for venture backed startups. Previously at North & Co.

View profile

Team Reveal Card

A team member card with a grayscale portrait that gains color on hover while a bio drawer slides up.