Ticket/receipt styled card with a perforated CSS divider.
Mimics a physical receipt or ticket: a card with a header section (amount, status), a perforated divider (dashed border + side notches), a body section (rows of label/value pairs), and an optional footer (QR code, action).
Sub-components
| Component | Purpose |
|---|---|
receipt_card/1 | Outer card with header, divider, body, footer slots |
receipt_row/1 | Single label/value row for the body section |
How the perforated divider works
Two rounded-full circles (colored bg-background) are positioned
half-inside, half-outside the card at each end of the dashed horizontal line.
The circles visually "punch through" the card border, simulating the
tear-perforations on a physical ticket. No JavaScript — pure CSS.
Examples
<%!-- Payment receipt --%>
<.receipt_card>
<:header>
<div class="text-center">
<p class="text-muted-foreground text-sm">Amount paid</p>
<p class="text-4xl font-bold">$99.00</p>
</div>
</:header>
<:body>
<.receipt_row label="Date" value="March 5, 2026" />
<.receipt_row label="Method" value="Visa •••• 4242" />
<.receipt_row label="Reference" value="TXN-8821" />
</:body>
<:footer>
<div class="flex justify-center">
<%!-- QR code component or image --%>
</div>
</:footer>
</.receipt_card>
<%!-- Ticket / voucher --%>
<.receipt_card class="max-w-sm">
<:header>
<h2 class="text-lg font-semibold">VIP Access Pass</h2>
</:header>
<:body>
<.receipt_row label="Event" value="ElixirConf 2026" />
<.receipt_row label="Seat" value="A-14" />
</:body>
</.receipt_card>Summary
Functions
Renders a receipt/ticket card with a perforated divider.
Renders a single label/value row for use inside a receipt_card/1 body slot.
Functions
Renders a receipt/ticket card with a perforated divider.
Example
<.receipt_card>
<:header>$49.00</:header>
<:body>
<.receipt_row label="Plan" value="Pro" />
</:body>
</.receipt_card>Attributes
class(:string) - Additional CSS classes for the root element. Defaults tonil.- Global attributes are accepted. HTML attributes forwarded to the root
<div>element.
Slots
header(required) - Top section — amount, status badge, title, etc.body- Middle section — typically a list ofreceipt_row/1components.footer- Bottom section — QR code, barcode, or a call-to-action button.
Renders a single label/value row for use inside a receipt_card/1 body slot.
Example
<.receipt_row label="Order ID" value="#8812-XZ" />Attributes
label(:string) (required) - Row label (left-aligned, muted foreground).value(:string) (required) - Row value (right-aligned, medium weight).class(:string) - Additional CSS classes for the row element. Defaults tonil.- Global attributes are accepted. HTML attributes forwarded to the row
<div>element.