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

1 of 4

resources/views/blocks/portfolio-grid.blade.php Blade

@props([
    'eyebrow' => 'Selected work',
    'heading' => 'Crafted with intention',
    'subheading' => 'A showcase of recent projects spanning brand, product, and motion — each one shipped end to end.',
    'filters' => null,
    'projects' => null,
])

@php
    $filters ??= ['All', 'Branding', 'Web', 'Product', 'Motion'];

    $projects ??= [
        [
            'title' => 'Tideway brand system',
            'client' => 'Tideway — Identity & guidelines',
            'category' => 'Branding',
            'href' => '#',
            'gradient' => 'from-primary/20 via-muted to-accent',
        ],
        [
            'title' => 'Cadence marketing site',
            'client' => 'Cadence — Design & build',
            'category' => 'Web',
            'href' => '#',
            'gradient' => 'from-muted via-accent to-secondary',
        ],
        [
            'title' => 'Beacon mobile app',
            'client' => 'Beacon — Product design',
            'category' => 'Product',
            'href' => '#',
            'gradient' => 'from-accent via-muted to-primary/20',
        ],
        [
            'title' => 'Forge title sequence',
            'client' => 'Forge & Co — Motion',
            'category' => 'Motion',
            'href' => '#',
            'gradient' => 'from-secondary via-muted to-accent',
        ],
        [
            'title' => 'Northwind design system',
            'client' => 'Northwind — Component library',
            'category' => 'Product',
            'href' => '#',
            'gradient' => 'from-muted via-primary/20 to-accent',
        ],
        [
            'title' => 'Lumen launch campaign',
            'client' => 'Lumen — Brand & web',
            'category' => 'Branding',
            'href' => '#',
            'gradient' => 'from-accent via-secondary to-muted',
        ],
    ];
@endphp

<x-ui.section
    x-data="{ filter: 'All' }"
    space="xl" {{ $attributes }}
>
    <x-ui.container gutter="sm">
        <x-ui.section-heading align="center" overline-style="label" :overline="$eyebrow" :title="$heading" :subtitle="$subheading" />

        @if (!empty($filters))
            <x-ui.segmented-nav as="div" label="{{ __('Filter projects by category') }}" class="mt-8 flex-wrap justify-center">
                @foreach ($filters as $filter)
                    <x-ui.segmented-nav.item
                        x-active="filter === {{ Js::from($filter) }}"
                        x-on:click="filter = {{ Js::from($filter) }}"
                    >{{ __($filter) }}</x-ui.segmented-nav.item>
                @endforeach
            </x-ui.segmented-nav>
        @endif

        <ul role="list" class="mt-12 grid grid-cols-1 gap-6 sm:mt-14 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($projects as $project)
                <li
                    class="h-full"
                    x-show="filter === 'All' || filter === {{ Js::from($project['category'] ?? '') }}"
                    x-transition:enter="transition duration-200 ease-out"
                    x-transition:enter-start="opacity-0 scale-95"
                    x-transition:enter-end="opacity-100 scale-100"
                    x-transition:leave="transition duration-150 ease-in"
                    x-transition:leave-start="opacity-100 scale-100"
                    x-transition:leave-end="opacity-0 scale-95"
                >
                    <x-ui.card class="group relative h-full overflow-hidden p-0 transition-shadow hover:shadow-md">
                        <article class="flex h-full flex-col">
                            <div class="relative isolate m-2 aspect-[4/3] overflow-hidden rounded-lg bg-gradient-to-br {{ $project['gradient'] }}">
                                @if (!empty($project['category']))
                                    <x-ui.badge
                                        size="sm"
                                        class="absolute start-3 top-3 backdrop-blur supports-[backdrop-filter]:bg-card/80"
                                    >
                                        {{ __($project['category']) }}
                                    </x-ui.badge>
                                @endif

                                <div
                                    class="absolute inset-0 flex items-center justify-center bg-foreground/30 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none"
                                    aria-hidden="true"
                                >
                                    <x-ui.button
                                        size="sm"
                                        tabindex="-1"
                                        :with-arrow="true"
                                        class="translate-y-1 transition-transform duration-300 group-hover:translate-y-0 group-focus-within:translate-y-0 motion-reduce:transition-none"
                                    >
                                        {{ __('View project') }}
                                    </x-ui.button>
                                </div>
                            </div>

                            <div class="flex flex-1 flex-col gap-2 p-6">
                                <h3 class="text-sm font-semibold tracking-tight text-foreground">
                                    <a
                                        href="{{ $project['href'] ?? '#' }}"
                                        class="rounded outline-none after:absolute after:inset-0 focus-visible:underline focus-visible:underline-offset-4"
                                    >
                                        {{ __($project['title']) }}
                                    </a>
                                </h3>
                                <p class="text-sm text-muted-foreground">{{ __($project['client']) }}</p>
                            </div>
                        </article>
                    </x-ui.card>
                </li>
            @endforeach
        </ul>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/portfolio-grid

Installs these dependencies automatically:

badge button card container section section-heading segmented-nav

Registry contract

Install confidence

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

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

Registry dependencies

badge button card container section section-heading segmented-nav

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.

portfolio-grid.md

# Brok UI block: Portfolio (`portfolio-grid`)

A centered eyebrow, heading and subheading above a row of category filter chips and a responsive 2-to-3-column grid of project cards, each with a gradient media area, pinned category badge, title, client line, and a hover overlay revealing a View project button.

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-grid
```

## Render it

```blade
<x-blocks.portfolio-grid />
```

## Props

- `eyebrow` (string, default `Selected work`) — Small label shown above the heading.
- `heading` (string, default `Crafted with intention`) — Section headline.
- `subheading` (string, default `A showcase of recent projects spanning brand, product, and motion — each one shipped end to end.`) — Supporting copy under the heading.
- `filters` (mixed|null, default `null`) — Array of category filter labels; null falls back to a default set, an empty array hides the filter chips.
- `projects` (mixed|null, default `null`) — Array of project cards ({title, client, category, href, gradient}); null falls back to sample projects.

## Use when

- Showcasing projects in a responsive grid with Alpine-driven category filter chips above it.
- Wanting each project card to reveal a 'View project' overlay button on hover or focus.

## Avoid when

- Needing a dense, varied-height masonry wall (portfolio-masonry) or case-study rows with result metrics and descriptions (portfolio-case-studies-rows).

## Rules

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

Ask about Portfolio 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 projects in a responsive grid with Alpine-driven category filter chips above it.
Wanting each project card to reveal a 'View project' overlay button on hover or focus.

Avoid when

Needing a dense, varied-height masonry wall (portfolio-masonry) or case-study rows with result metrics and descriptions (portfolio-case-studies-rows).

Anti-patterns

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

Anatomy: section heading category filter chips project grid gradient media with hover overlay category badge project title/client

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.portfolio-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.