# `PhiaUi.Components.ReceiptCard`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/cards/receipt_card.ex#L1)

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>

# `receipt_card`

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 to `nil`.
* 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 of `receipt_row/1` components.
* `footer` - Bottom section — QR code, barcode, or a call-to-action button.

# `receipt_row`

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 to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the row `<div>` element.

---

*Consult [api-reference.md](api-reference.md) for complete listing*