Product Category

Open source

Category pages — a banner with a faceted filter sidebar (categories, price, swatches) and a product grid.

resources/views/blocks/product-category-editorial.blade.php Blade

@props([
    'eyebrow'    => 'Shop the edit',
    'heading'    => 'Authentic Bags for Any Occasion',
    'subheading' => 'Browse the house categories — each piece considered, each material chosen to last.',
    'ctaLabel'   => 'View all categories',
    'ctaHref'    => '#',
    'categories' => null,
])

{{--
    product-category-03 — "Editorial" Monogram shop-by-category image-link grid.
    Distinct from product-category-mosaic (asymmetric overlay mosaic) and
    product-category-filtered (faceted filter page): a calm, equal 3-up editorial grid
    of image-link cards. Each card is a token `bg-muted` aspect-[4/5] placeholder
    (decorative SVG, no external image) with a soft hover-scale, and a caption
    set BELOW the image — a `font-heading` category name, an item count, and a
    quiet uppercase wide-tracked "Shop" cue with an RTL-aware chevron. A
    full-card link makes the whole tile a single accessible target. Mostly
    static Blade. Composes <x-ui.button>.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe, reduced-motion.
--}}
@php
    $categories ??= [
        ['name' => 'Totes',      'count' => 48, 'href' => '#'],
        ['name' => 'Crossbody',  'count' => 36, 'href' => '#'],
        ['name' => 'Top Handle', 'count' => 27, 'href' => '#'],
        ['name' => 'Clutches',   'count' => 19, 'href' => '#'],
        ['name' => 'Backpacks',  'count' => 22, 'href' => '#'],
        ['name' => 'Travel',     'count' => 14, 'href' => '#'],
    ];
@endphp

<section
    {{ $attributes->merge(['class' => 'bg-background py-16 text-foreground sm:py-20 lg:py-24']) }}
    data-slot="product-category-03"
    aria-label="{{ __($heading) }}"
>
    <div class="mx-auto max-w-7xl px-6 sm:px-8 lg:px-12">

        {{-- ── Section header ── --}}
        <div class="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
            <div class="max-w-2xl">
                @if ($eyebrow)
                    <p class="font-body text-sm uppercase tracking-[0.3em] text-muted-foreground">
                        {{ __($eyebrow) }}
                    </p>
                @endif
                <h2 class="mt-4 font-heading text-3xl font-normal leading-[1.1] tracking-tight text-balance sm:text-4xl lg:text-5xl">
                    {{ __($heading) }}
                </h2>
                @if ($subheading)
                    <p class="mt-4 max-w-md font-body text-sm leading-relaxed text-muted-foreground text-pretty">
                        {{ __($subheading) }}
                    </p>
                @endif
            </div>

            @if ($ctaLabel)
                <div class="hidden shrink-0 sm:block">
                    <x-ui.button :href="$ctaHref" variant="outline" :withArrow="true">
                        {{ __($ctaLabel) }}
                    </x-ui.button>
                </div>
            @endif
        </div>

        {{-- ── Category image-link grid ── --}}
        <ul role="list" class="mt-12 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($categories as $category)
                <li class="group relative">
                    {{-- Image placeholder --}}
                    <div class="relative aspect-[4/5] w-full overflow-hidden rounded-lg bg-muted">
                        <div
                            class="absolute inset-0 transition-transform duration-500 ease-out motion-safe:group-hover:scale-105"
                            aria-hidden="true"
                        >
                            <svg
                                class="size-full text-muted-foreground/15"
                                viewBox="0 0 400 500"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="1"
                                preserveAspectRatio="xMidYMid slice"
                            >
                                <circle cx="200" cy="250" r="70" stroke-width="0.8" />
                                <circle cx="200" cy="250" r="120" stroke-width="0.5" />
                                <line x1="-40" y1="0" x2="440" y2="500" />
                                <line x1="-40" y1="120" x2="440" y2="620" />
                                <line x1="-40" y1="-120" x2="440" y2="380" />
                            </svg>
                        </div>
                    </div>

                    {{-- Caption --}}
                    <div class="mt-6 flex items-start justify-between gap-4">
                        <div class="min-w-0">
                            <h3 class="font-heading text-lg font-normal tracking-tight text-foreground">
                                {{ __($category['name']) }}
                            </h3>
                            <p class="mt-2 font-body text-sm text-muted-foreground">
                                {{ trans_choice(':count piece|:count pieces', $category['count'], ['count' => $category['count']]) }}
                            </p>
                        </div>

                        <span class="mt-2 inline-flex shrink-0 items-center gap-2 font-body text-sm uppercase tracking-[0.2em] text-muted-foreground transition-colors group-hover:text-foreground">
                            {{ __('Shop') }}
                            <svg class="size-4 transition-transform motion-safe:group-hover:translate-x-0.5 rtl:rotate-180" 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" /><path d="m12 5 7 7-7 7" />
                            </svg>
                        </span>
                    </div>

                    {{-- Full-tile accessible link --}}
                    <a
                        href="{{ $category['href'] ?? '#' }}"
                        class="absolute inset-0 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                    >
                        <span class="sr-only">{{ __('Shop :category', ['category' => $category['name']]) }}</span>
                    </a>
                </li>
            @endforeach
        </ul>

        {{-- ── Mobile CTA (header button is hidden < sm) ── --}}
        @if ($ctaLabel)
            <div class="mt-12 sm:hidden">
                <x-ui.button :href="$ctaHref" variant="outline" :withArrow="true" class="w-full">
                    {{ __($ctaLabel) }}
                </x-ui.button>
            </div>
        @endif

    </div>
</section>

Installation

terminal

php artisan ui:add blocks/product-category-editorial

Installs these dependencies automatically:

button

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/product-category-editorial.blade.php

Registry dependencies

button

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.

product-category-editorial.md

# Brok UI block: Product Category Editorial (`product-category-editorial`)

An editorial shop-by-category section in the Monogram language: an uppercase wide-tracked eyebrow and a light font-heading title above a calm equal 3-up grid of image-link cards. Each card is a token bg-muted aspect-[4/5] placeholder with a subtle reduced-motion-safe hover-scale and a caption set below the image (font-heading category name, item count, and a quiet RTL-aware Shop cue).

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/product-category-editorial
```

## Render it

```blade
<x-blocks.product-category-editorial />
```

## Props

- `eyebrow` (string, default `Shop the edit`) — Small uppercase label shown above the heading.
- `heading` (string, default `Authentic Bags for Any Occasion`) — Section heading.
- `subheading` (string, default `Browse the house categories — each piece considered, each material chosen to last.`) — Supporting copy under the heading.
- `cta-label` (string, default `View all categories`) — Label for the "view all categories" button; falsy hides the button.
- `cta-href` (string, default `#`) — Destination for the view-all-categories button.
- `categories` (mixed|null, default `null`) — Array of {name, count, href} category entries rendered as image-link cards.

## Use when

- Presenting a calm, equal 3-up editorial grid of image-link category cards in the Monogram design language, each with a caption below the image showing the category name, item count and a quiet "Shop" cue.
- Wanting a simple visual index into categories, with no filters, products or asymmetric hero tile.

## Avoid when

- Needing a dominant hero tile in an asymmetric overlay mosaic; use product-category-mosaic instead.

## Rules

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

Ask about Product Category Editorial 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 calm, equal 3-up editorial grid of image-link category cards in the Monogram design language, each with a caption below the image showing the category name, item count and a quiet "Shop" cue.
Wanting a simple visual index into categories, with no filters, products or asymmetric hero tile.

Avoid when

Needing a dominant hero tile in an asymmetric overlay mosaic; use product-category-mosaic instead.

Anti-patterns

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

Anatomy: section header eyebrow heading subheading cta button category grid category card image placeholder caption

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.product-category-editorial />

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.