Receipt Card

Beste Studio

INV-2026-0142 * Jul 02

Landing page$1,900
Brand refresh$2,400
Rush delivery$350
Total$4,650

* Thank you, see you again *

INV-2026-0142
About this component

Receipt Card

A thermal receipt card with itemized dotted rows, a torn zigzag edge, and a barcode for pricing recaps.

Usage

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

import { Card14 } from "@/components/beste/component/card14";

<Card14
  store="Beste Studio"
  meta="INV-2026-0142 * Jul 02"
  items={[
    { label: "Landing page", value: "$1,900" },
    { label: "Brand refresh", value: "$2,400" },
  ]}
  total="$4,300"
  note="* Thank you, see you again *"
  code="INV-2026-0142"   // seeds the barcode; omit to hide it
/>

<Card14
  store="Order summary"
  items={[{ label: "Pro plan", value: "$19" }]}
  total="$19"
  totalLabel="Due today"
  tone="primary"    // accents: "ink" (default) | "primary"
  tilted={false}    // disable the paper rotation
/>

Playground

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

Beste Studio

INV-2026-0142 * Jul 02

Landing page$1,900
Brand refresh$2,400
Rush delivery$350
Total$4,650

* Thank you, see you again *

INV-2026-0142
Usage
import { Card14 } from "@/components/beste/component/card14";

<Card14
  store="Beste Studio"
  meta="INV-2026-0142 * Jul 02"
  items={[{"label":"Landing page","value":"$1,900"},{"label":"Brand refresh","value":"$2,400"},{"label":"Rush delivery","value":"$350"}]}
  total="$4,650"
  note="* Thank you, see you again *"
  code="INV-2026-0142"
/>

Props

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

PropTypeDefaultDescription
store*string—Store or studio name, printed uppercase at the top
metastring—Muted line under the store name (e.g. an invoice number or date)
items*Card14Item[]—Itemized rows
total*string—Total row value
totalLabelstring—Total row label (defaults to "Total")
notestring—Centered footer note
codestring—Seeds the barcode at the bottom; omit to hide it
tone"ink" | "primary"—Accent on the store name and total
tiltedboolean—Slight paper rotation (defaults to on)
classNamestring—Additional classes merged onto the root

More Card components

View all Card

Wish you were here. The water is unreal and the studio ideas keep coming.

With love, Selin

Alacati, TR

The Beste team

Postcard

A postcard back with a serif message, dashed stamp, postmark, and address lines for personal storytelling sections.

Studio offsite24 photosStudio offsite

Photo Stack Card

A photo stack card whose tucked prints fan out on hover for albums, galleries, and case studies.

Article Card

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

Summer in AlacatiSummer in AlacatiAug 2026

Polaroid Card

An instant photo card with masking tape, serif caption, and a tilt that straightens on hover for galleries.

Admit one

Beste Conf 2027

Selin Aksoy

Date
Mar 14
Seat
A12
Gate
03
BST-0421

Event Ticket Card

An event ticket card with punched notches, a perforated barcode stub, and detail columns for launches and conferences.

Orbit One

Orbit One

$189

Shop now

Product Overlay Card

A product card with a full bleed photo, overlaid name and price, and a floating pill button.