Flip Cards

Open source

3D flip-card grids — icon/title fronts that flip to a description, stat and link.

resources/views/blocks/flip-cards-grid.blade.php Blade

@props([
    'heading' => null,
    'subheading' => null,
    'cards' => null,
])

@php
    $heading ??= 'Built for the way you work';
    $subheading ??= 'Hover any card to reveal the details — or tap it on touch.';
    $cards ??= [
        [
            'icon' => 'M13 2 3 14h7l-1 8 10-12h-7l1-8Z',
            'title' => 'Lightning fast',
            'teaser' => 'Ship in minutes, not weeks.',
            'description' => 'Copy a block into your app and it just works — no runtime, no lock-in, only editable Blade and CSS you own.',
            'stat' => 'Sub-50ms render',
            'href' => '#',
        ],
        [
            'icon' => 'M12 3 4 6v6c0 4.4 3.4 8.3 8 9.5 4.6-1.2 8-5.1 8-9.5V6l-8-3Z M9 12l2 2 4-4',
            'title' => 'Secure by default',
            'teaser' => 'Hardened, escaped, audited.',
            'description' => 'Every output is auto-escaped, CSP-friendly, and free of third-party scripts. Your data never leaves your stack.',
            'stat' => '0 external calls',
            'href' => '#',
        ],
        [
            'icon' => 'M4 5a2 2 0 0 1 2-2h9l5 5v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5Z M9 13h6 M9 17h4',
            'title' => 'Fully themeable',
            'teaser' => 'One token, every surface.',
            'description' => 'Light, dark, and brand themes flow from semantic tokens — change a value once and the whole system follows.',
            'stat' => '100% tokenized',
            'href' => '#',
        ],
        [
            'icon' => 'M12 3v18 M3 12h18 M5 5l14 14 M19 5 5 19',
            'title' => 'Accessible',
            'teaser' => 'WCAG 2.2 AA from day one.',
            'description' => 'Keyboard paths, focus states, RTL mirroring, and reduced-motion support are baked into every primitive.',
            'stat' => 'AA contrast',
            'href' => '#',
        ],
    ];
@endphp

<x-ui.section
    aria-labelledby="flip-cards-01-heading"
    data-slot="flip-cards-01"
    space="xl" {{ $attributes }}
>
    <x-ui.container gutter="sm">
        <div class="mx-auto max-w-2xl text-center">
            <h2 id="flip-cards-01-heading" class="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
                {{ __($heading) }}
            </h2>
            <p class="mt-4 text-pretty text-sm text-muted-foreground sm:text-base">
                {{ __($subheading) }}
            </p>
        </div>

        <ul role="list" class="mt-12 grid grid-cols-1 gap-6 sm:mt-16 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($cards as $card)
                <li
                    x-data="{ flipped: false }"
                    class="group [perspective:1000px]"
                >
                    {{-- Inner: rotates on hover (desktop) and on toggle (touch/keyboard) --}}
                    <div
                        class="relative h-72 w-full transition-transform duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)] motion-reduce:transition-none"
                        :class="flipped ? '[transform:rotateY(180deg)]' : ''"
                    >
                        {{-- Front face: inert while the card is flipped, so its "Hover to
                             flip" control drops out of the tab order and the AT tree. --}}
                        <x-ui.card x-bind:inert="flipped" x-bind:aria-hidden="flipped" class="absolute inset-0 flex h-full flex-col p-6 [backface-visibility:hidden]">
                            <x-ui.icon.tile size="lg">
                                <svg
                                    class="size-6"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="1.75"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                >
                                    <path d="{{ $card['icon'] }}" />
                                </svg>
                            </x-ui.icon.tile>

                            <h3 class="mt-6 text-lg font-semibold tracking-tight text-foreground">
                                {{ __($card['title']) }}
                            </h3>
                            <p class="mt-2 text-pretty text-sm text-muted-foreground">
                                {{ __($card['teaser']) }}
                            </p>

                            <button
                                type="button"
                                @click="flipped = ! flipped"
                                :aria-pressed="flipped ? 'true' : 'false'"
                                class="mt-auto inline-flex items-center gap-2 self-start rounded-md text-sm font-medium text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                            >
                                <span>{{ __('Hover to flip') }}</span>
                                <svg
                                    class="size-4 transition-transform group-hover:translate-x-0.5 rtl:-scale-x-100"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    aria-hidden="true"
                                >
                                    <path d="M5 12h14 M13 6l6 6-6 6" />
                                </svg>
                            </button>
                        </x-ui.card>

                        {{-- Back face: inert until the card is flipped, so its "Learn more"
                             link and "Back" button drop out of the tab order and the AT tree. --}}
                        <x-ui.card x-bind:inert="! flipped" x-bind:aria-hidden="! flipped" class="absolute inset-0 flex h-full flex-col border-transparent bg-primary p-6 text-primary-foreground [backface-visibility:hidden] [transform:rotateY(180deg)]">
                            <div class="flex items-start justify-between gap-4">
                                <h3 class="text-lg font-semibold tracking-tight">
                                    {{ __($card['title']) }}
                                </h3>
                                @if (! empty($card['stat']))
                                    <x-ui.badge variant="secondary" class="shrink-0">
                                        {{ __($card['stat']) }}
                                    </x-ui.badge>
                                @endif
                            </div>

                            <p class="mt-4 text-pretty text-sm text-primary-foreground/90">
                                {{ __($card['description']) }}
                            </p>

                            <div class="mt-auto flex items-center justify-between gap-4 pt-4">
                                <x-ui.button
                                    :href="$card['href'] ?? '#'"
                                    variant="secondary"
                                    size="sm"
                                >
                                    {{ __('Learn more') }}
                                </x-ui.button>

                                <button
                                    type="button"
                                    @click="flipped = ! flipped"
                                    :aria-pressed="flipped ? 'true' : 'false'"
                                    class="inline-flex items-center gap-2 rounded-md text-sm font-medium text-primary-foreground/90 hover:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-primary"
                                >
                                    <svg
                                        class="size-4 rtl:-scale-x-100"
                                        viewBox="0 0 24 24"
                                        fill="none"
                                        stroke="currentColor"
                                        stroke-width="2"
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        aria-hidden="true"
                                    >
                                        <path d="M9 14 4 9l5-5 M4 9h11a5 5 0 0 1 0 10h-3" />
                                    </svg>
                                    <span>{{ __('Back') }}</span>
                                </button>
                            </div>
                        </x-ui.card>
                    </div>
                </li>
            @endforeach
        </ul>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/flip-cards-grid

Installs these dependencies automatically:

badge button card container icon section

Registry contract

Install confidence

php artisan ui:add blocks/flip-cards-grid 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.3
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/flip-cards-grid.blade.php

Registry dependencies

badge button card container icon section

Package dependencies

composer: jml/brok:^0.2

npm: alpinejs

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.

flip-cards-grid.md

# Brok UI block: Flip Cards (`flip-cards-grid`)

A marketing feature grid of 3D flip cards: a centered heading and subheading above a responsive 1-to-2-to-3-column grid. Each card's front face shows a tokened icon tile, a title, a short teaser, and a 'Hover to flip' chevron hint; the back face flips in on a distinct primary surface with a fuller description, a stat badge, and a 'Learn more' button. Cards flip on hover for pointers and on click or Enter for touch and keyboard, with aria-pressed toggles, equal-height faces, RTL-aware chevrons, and reduced-motion support.

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/flip-cards-grid
```

## Render it

```blade
<x-blocks.flip-cards-grid />
```

## Props

- `heading` (mixed|null, default `null`)
- `subheading` (mixed|null, default `null`)
- `cards` (mixed|null, default `null`)

## Use when

- Presenting a feature grid of 3D flip cards where each card's back reveals a fuller description and stat badge.
- Flipping on hover for pointer users and on click or Enter for touch and keyboard users, with equal-height faces.

## Avoid when

- Use features-grid or features-cards for a plain, non-flipping feature card grid instead.

## Rules

- Render the installed block with `<x-blocks.flip-cards-grid />` 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/flip-cards-grid
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/flip-cards-grid.json

Ask about Flip Cards 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

Presenting a feature grid of 3D flip cards where each card's back reveals a fuller description and stat badge.
Flipping on hover for pointer users and on click or Enter for touch and keyboard users, with equal-height faces.

Avoid when

Use features-grid or features-cards for a plain, non-flipping feature card grid instead.

Anti-patterns

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

Anatomy: root flip-cards-01

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.flip-cards-grid />

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.