Gift Card

Open source

Gift-card purchase layouts — a live gradient card preview beside an amount/recipient/message form.

2 of 2

resources/views/blocks/gift-card-balance.blade.php Blade

@props([
    'action'     => '#',
    'showResult' => true,
    'balance'    => '47.50',
    'lastFour'   => '8312',
    'expiry'     => '06 / 2027',
])

@php
    $balanceFormatted = '$'.number_format((float) $balance, 2);
@endphp

<x-ui.section space="md" {{ $attributes }}>
    <div class="mx-auto max-w-xl px-4">
        <x-ui.card>
            <x-ui.card.header>
                <div class="mb-2 flex size-10 items-center justify-center rounded-md bg-muted text-muted-foreground">
                    <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="7" width="20" height="14" rx="2" /><path d="M2 11h20" /><path d="M12 7s-3-5-5.5-3.5S8 7 12 7Zm0 0s3-5 5.5-3.5S16 7 12 7Z" /></svg>
                </div>
                <x-ui.card.title>{{ __('Check your gift card balance') }}</x-ui.card.title>
                <x-ui.card.description>{{ __('Enter your gift card number and PIN to see your remaining balance.') }}</x-ui.card.description>
            </x-ui.card.header>
            <x-ui.card.content>
                <form method="POST" action="{{ $action }}" class="flex flex-col gap-6">
                    @csrf
                    <x-ui.field>
                        <x-ui.label for="gcb-number" required>{{ __('Gift card number') }}</x-ui.label>
                        <x-ui.input id="gcb-number" type="text" name="card_number" autocomplete="off" inputmode="numeric" maxlength="19" required placeholder="xxxx xxxx xxxx xxxx" />
                    </x-ui.field>
                    <x-ui.field>
                        <x-ui.label for="gcb-pin" required>{{ __('PIN') }}</x-ui.label>
                        <x-ui.input id="gcb-pin" type="password" name="pin" autocomplete="off" inputmode="numeric" maxlength="8" required placeholder="{{ __('4–8 digit PIN') }}" />
                    </x-ui.field>
                    <x-ui.button type="submit" size="lg" class="w-full">{{ __('Check balance') }}</x-ui.button>
                </form>
            </x-ui.card.content>
            @if ($showResult)
                <x-ui.card.footer class="flex-col items-stretch gap-4 border-t border-border pt-6">
                    <div class="flex flex-col gap-4 rounded-lg bg-muted px-6 py-6" role="status">
                        <div class="flex items-baseline justify-between gap-2">
                            <span class="text-sm font-medium text-muted-foreground">{{ __('Available balance') }}</span>
                            <span class="text-3xl font-bold tabular-nums tracking-tight text-foreground">{{ $balanceFormatted }}</span>
                        </div>
                        <x-ui.separator />
                        <dl class="flex flex-col gap-2">
                            <div class="flex items-center justify-between gap-4"><dt class="text-sm text-muted-foreground">{{ __('Card number') }}</dt><dd class="font-mono text-sm font-medium tabular-nums text-foreground">•••• {{ $lastFour }}</dd></div>
                            <div class="flex items-center justify-between gap-4"><dt class="text-sm text-muted-foreground">{{ __('Expires') }}</dt><dd class="font-mono text-sm font-medium tabular-nums text-foreground">{{ $expiry }}</dd></div>
                        </dl>
                    </div>
                    <x-ui.button variant="default" size="lg" class="w-full" href="#checkout">
                        <x-slot:icon><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="21" r="1" /><circle cx="20" cy="21" r="1" /><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" /></svg></x-slot:icon>
                        {{ __('Use in checkout') }}
                    </x-ui.button>
                </x-ui.card.footer>
            @endif
        </x-ui.card>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/gift-card-balance

Installs these dependencies automatically:

button card field input label section separator

Registry contract

Install confidence

php artisan ui:add blocks/gift-card-balance writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.1.2
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/gift-card-balance.blade.php

Registry dependencies

button card field input label section separator

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

gift-card-balance.md

# Brok UI block: Gift Card Balance (`gift-card-balance`)

A gift-card balance checker — a card-number and PIN form with a result panel showing the available balance and card details.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/gift-card-balance
```

## Render it

```blade
<x-blocks.gift-card-balance />
```

## Props

- `action` (string, default `#`) — Form action URL the balance-check form posts to.
- `show-result` (bool, default `true`) — Whether the balance result panel is rendered below the form.
- `balance` (string, default `47.50`) — Available balance amount, formatted as currency in the result panel.
- `last-four` (string, default `8312`) — Last four digits of the card number shown in the result panel.
- `expiry` (string, default `06 / 2027`) — Card expiry date shown in the result panel.

## Use when

- Letting a visitor check a gift card's remaining balance with a card number and PIN form.
- Showing the resulting balance, masked card number, and expiry alongside a use-in-checkout action.

## Avoid when

- Use gift-card-purchase instead when selling a new gift card rather than checking an existing one.

## Rules

- Render the installed block with `<x-blocks.gift-card-balance />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/gift-card-balance
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/gift-card-balance.json

Ask about Gift Card Balance in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Letting a visitor check a gift card's remaining balance with a card number and PIN form.
Showing the resulting balance, masked card number, and expiry alongside a use-in-checkout action.

Avoid when

Use gift-card-purchase instead when selling a new gift card rather than checking an existing one.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: card icon card number field PIN field check balance button balance result panel

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.gift-card-balance />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.