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

3 of 4

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

@props([
    'eyebrow'    => 'Case studies',
    'heading'    => 'Work that moves the needle',
    'subheading' => 'Deep-dives into the strategy, design, and engineering behind our most impactful engagements.',
    'projects'   => null,
])

@php
    $projects ??= [
        ['category' => 'E-commerce', 'title' => 'Revamped checkout for Bask & Co.', 'client' => 'Bask & Co.', 'description' => 'A ground-up redesign of the purchase funnel focused on reducing friction and lifting conversion on mobile.', 'metrics' => ['+38% conversion', '2.1s load', '−22% abandonment'], 'href' => '#', 'gradient' => 'from-primary/20 via-muted to-accent/30'],
        ['category' => 'SaaS', 'title' => 'Meridian dashboard overhaul', 'client' => 'Meridian Analytics', 'description' => 'Rebuilt a fragile reporting suite into a modern, accessible data platform with real-time filters and shareable views.', 'metrics' => ['4× faster queries', '91 Lighthouse', '+55 NPS'], 'href' => '#', 'gradient' => 'from-accent/25 via-muted to-secondary/40'],
        ['category' => 'Fintech', 'title' => 'Onboarding re-architecture for Vault', 'client' => 'Vault Financial', 'description' => 'Streamlined a 14-step KYC flow into a progressive, document-smart sequence that passes WCAG 2.2 AA out of the box.', 'metrics' => ['−49% drop-off', '100% a11y pass', '3 min avg.'], 'href' => '#', 'gradient' => 'from-secondary/30 via-muted to-primary/20'],
        ['category' => 'Healthcare', 'title' => 'Patient portal for Helix Health', 'client' => 'Helix Health', 'description' => 'A bilingual patient portal covering scheduling, results, and secure messaging with a native-quality mobile experience.', 'metrics' => ['+62% engagement', '< 1s TTFB', '2 languages'], 'href' => '#', 'gradient' => 'from-muted via-accent/20 to-primary/30'],
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <div class="mx-auto max-w-5xl px-4">
        <div class="mx-auto max-w-2xl text-center">
            @if ($eyebrow)<p class="text-sm font-semibold uppercase tracking-widest text-primary">{{ __($eyebrow) }}</p>@endif
            <h2 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-xl text-muted-foreground">{{ __($subheading) }}</p>@endif
        </div>

        <ul role="list" class="mt-14 divide-y divide-border sm:mt-16">
            @foreach ($projects as $project)
                <li class="py-10 first:pt-0 last:pb-0">
                    <article class="grid gap-6 sm:grid-cols-[200px_1fr]">
                        <div class="aspect-[4/3] w-full rounded-lg bg-gradient-to-br {{ $project['gradient'] }}" aria-hidden="true"></div>
                        <div class="flex flex-col justify-center gap-4">
                            <div><x-ui.badge variant="secondary" size="sm">{{ __($project['category']) }}</x-ui.badge></div>
                            <div class="space-y-2">
                                <h3 class="text-xl font-bold tracking-tight text-foreground sm:text-2xl">{{ __($project['title']) }}</h3>
                                <p class="text-sm font-medium text-muted-foreground">{{ __($project['client']) }}</p>
                            </div>
                            <p class="text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($project['description']) }}</p>
                            @if (! empty($project['metrics']))
                                <x-ui.check-list layout="row" size="sm" class="font-semibold" aria-label="{{ __('Key results') }}">
                                    @foreach ($project['metrics'] as $metric)
                                        <x-ui.check-list.item>{{ __($metric) }}</x-ui.check-list.item>
                                    @endforeach
                                </x-ui.check-list>
                            @endif
                            <div class="mt-2">
                                <x-ui.button variant="outline" size="sm" :href="$project['href'] ?? '#'" :with-arrow="true">{{ __('Read case study') }}</x-ui.button>
                            </div>
                        </div>
                    </article>
                </li>
            @endforeach
        </ul>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/portfolio-case-studies-rows

Installs these dependencies automatically:

badge button check-list section

Registry contract

Install confidence

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

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

Registry dependencies

badge button check-list section

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.

portfolio-case-studies-rows.md

# Brok UI block: Portfolio List (`portfolio-case-studies-rows`)

A portfolio section as case-study rows — each with a thumbnail, title, client, result metrics 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/portfolio-case-studies-rows
```

## Render it

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

## Props

- `eyebrow` (string, default `Case studies`) — Small label shown above the heading.
- `heading` (string, default `Work that moves the needle`) — Section headline.
- `subheading` (string, default `Deep-dives into the strategy, design, and engineering behind our most impactful engagements.`) — Supporting copy under the heading.
- `projects` (mixed|null, default `null`) — Array of case-study rows ({category, title, client, description, metrics, href, gradient}); null falls back to sample case studies.

## Use when

- Presenting a small set of case studies as detailed rows, each with a thumbnail, description and result metrics.
- Giving each case study a 'Read case study' link rather than linking an entire grid card.

## Avoid when

- Needing a uniform filterable grid (portfolio-grid) or a dense masonry image wall (portfolio-masonry) instead of detailed rows.

## Rules

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

Ask about Portfolio List 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 small set of case studies as detailed rows, each with a thumbnail, description and result metrics.
Giving each case study a 'Read case study' link rather than linking an entire grid card.

Avoid when

Needing a uniform filterable grid (portfolio-grid) or a dense masonry image wall (portfolio-masonry) instead of detailed rows.

Anti-patterns

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

Anatomy: section heading case-study row list thumbnail category badge title/client/description result metrics checklist read-case-study link

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.portfolio-case-studies-rows />

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.