Portfolio

Open source

Creative-work showcases — a filterable grid of project cards with gradient media and a hover-revealed view action, plus divided-row and card-grid case-study layouts.

Add to page builder

4 of 4

resources/views/blocks/case-studies.blade.php Blade

@props([
    'eyebrow' => 'Customer stories',
    'heading' => 'Results that compound',
    'subheading' => 'Real teams, real outcomes. See how organizations ship faster and grow further on a system they own.',
    'studies' => null,
])

@php
    // Seeded sample content — replace with your own case studies.
    $studies ??= [
        [
            'category' => 'Fintech',
            'client' => 'Northwind Capital',
            'metric' => '+240%',
            'label' => 'Revenue growth',
            'excerpt' => 'A token-driven rebuild cut their release cycle from weeks to days and doubled trial-to-paid conversion.',
            'href' => '#',
        ],
        [
            'category' => 'E-commerce',
            'client' => 'Acme Inc.',
            'metric' => '−38%',
            'label' => 'Support tickets',
            'excerpt' => 'Consolidating on one accessible component library cut UI-related support volume in a single quarter.',
            'href' => '#',
        ],
        [
            'category' => 'Healthcare',
            'client' => 'Beacon Health',
            'metric' => '4.9×',
            'label' => 'Faster shipping',
            'excerpt' => 'Reusable blocks let a four-person team launch a patient portal in six weeks instead of two quarters.',
            'href' => '#',
        ],
        [
            'category' => 'SaaS',
            'client' => 'Cadence Labs',
            'metric' => '+62',
            'label' => 'NPS improvement',
            'excerpt' => 'A consistent, RTL-ready interface lifted satisfaction across twelve markets without a redesign.',
            'href' => '#',
        ],
    ];
@endphp

<x-ui.section
    space="xl" {{ $attributes }}
    aria-labelledby="case-studies-01-heading"
    data-slot="case-studies"
>
    <x-ui.container gutter="sm">
        <div class="max-w-2xl">
            @if ($eyebrow)
                <p class="text-sm font-semibold uppercase tracking-wide text-primary">{{ __($eyebrow) }}</p>
            @endif
            <h2 id="case-studies-01-heading" class="mt-4 text-balance text-3xl font-bold tracking-tight sm:text-4xl">
                {{ __($heading) }}
            </h2>
            @if ($subheading)
                <p class="mt-4 text-pretty text-lg text-muted-foreground">{{ __($subheading) }}</p>
            @endif
        </div>

        <ul role="list" class="mt-12 grid grid-cols-1 gap-6 sm:mt-14 sm:grid-cols-2 lg:grid-cols-2">
            @foreach ($studies as $study)
                <li class="h-full">
                    <x-ui.card
                        class="group relative flex h-full flex-col p-6 transition-all duration-200 hover:-translate-y-1 hover:border-primary/40 hover:shadow-md focus-within:border-primary/40 motion-reduce:transition-none motion-reduce:hover:translate-y-0"
                    >
                        <div class="flex items-center gap-2">
                            <x-ui.badge variant="secondary">{{ __($study['category']) }}</x-ui.badge>
                        </div>

                        <div class="mt-6">
                            <x-ui.stat
                                :value="$study['metric']"
                                :label="__($study['label'])"
                                class="border-0 bg-transparent p-0 text-card-foreground"
                            />
                        </div>

                        <p class="mt-4 flex-1 text-pretty text-sm text-muted-foreground">
                            {{ __($study['excerpt']) }}
                        </p>

                        <div class="mt-6 flex items-center justify-between gap-4 border-t border-border pt-4">
                            <p class="truncate text-sm font-medium text-foreground">{{ __($study['client']) }}</p>
                            <x-ui.button
                                :href="$study['href']"
                                variant="link"
                                size="sm"
                                :with-arrow="true"
                                arrow-class="rtl:-scale-x-100"
                                class="shrink-0 outline-none after:absolute after:inset-0 focus-visible:underline focus-visible:underline-offset-4"
                            >
                                {{ __('Read case study') }}
                                <span class="sr-only">{{ __('about :client', ['client' => $study['client']]) }}</span>
                            </x-ui.button>
                        </div>
                    </x-ui.card>
                </li>
            @endforeach
        </ul>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/case-studies

Installs these dependencies automatically:

badge button card container section stat

Registry contract

Install confidence

php artisan ui:add blocks/case-studies 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.0.4
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/case-studies.blade.php

Registry dependencies

badge button card container section stat

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.

case-studies.md

# Brok UI block: Case Studies (`case-studies`)

A case-studies grid with heading and lead above responsive cards, each showing a category badge, a headline result metric, an excerpt, the client name, and a Read case study link.

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/case-studies
```

## Render it

```blade
<x-blocks.case-studies />
```

## Props

- `eyebrow` (string, default `Customer stories`)
- `heading` (string, default `Results that compound`)
- `subheading` (string, default `Real teams, real outcomes. See how organizations ship faster and grow further on a system they own.`)
- `studies` (mixed|null, default `null`)

## Use when

- Showcasing customer case studies as a card grid, each led by a headline result metric (e.g. '+240% revenue growth').
- Naming the client and category per card with a Read case study link out to the full story.

## Avoid when

- Use awards for third-party recognition or compliance for certifications instead of outcome-based customer proof.

## Rules

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

Ask about Case Studies 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

Showcasing customer case studies as a card grid, each led by a headline result metric (e.g. '+240% revenue growth').
Naming the client and category per card with a Read case study link out to the full story.

Avoid when

Use awards for third-party recognition or compliance for certifications instead of outcome-based customer proof.

Anti-patterns

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

Anatomy: root case-studies

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.case-studies />

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.