Shop the Look

Open source

Shoppable lifestyle imagery — hotspot pins on a photo that reveal product popovers.

2 of 2

resources/views/blocks/shop-the-look-lookbook.blade.php Blade

@props([
    'heading' => 'The lookbook',
    'subheading' => 'In use, in motion, and fully packed — explore each scene, then tap a pin to shop the pieces.',
    'looks' => null,
    'products' => null,
    'currency' => 'USD',
])

{{--
    shop-the-look-02 — "Editorial lookbook" sibling of shop-the-look-01.
    Distinct layout: instead of one image + a side list, an asymmetric gallery of
    full-bleed lifestyle scenes (token `bg-muted aspect-*` placeholders, no external
    image), each scrimmed with a bottom-start eyebrow/title/shop-now caption and its
    own interactive hotspot pins. A single section-level Alpine root keeps one pin
    open at a time (composite scene-pin key) and closes on Escape; pins expose
    `:aria-expanded`. Below, a highlights rail of <x-ui.product-card> tiles.
    Composes <x-ui.product-card>, <x-ui.price>, <x-ui.card>, <x-ui.button>.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
@php
    $looks ??= [
        [
            'eyebrow' => 'New Arrivals',
            'title' => 'In motion',
            'href' => '#',
            'span' => 'feature',
            'pins' => [
                ['title' => 'Suede Mini Satchel', 'price' => '128', 'x' => '38%', 'y' => '34%'],
                ['title' => 'Wide Base Leather Tote', 'price' => '148', 'x' => '62%', 'y' => '66%'],
            ],
        ],
        [
            'eyebrow' => 'Core Carry',
            'title' => 'Everyday structure',
            'href' => '#',
            'span' => 'tall',
            'pins' => [
                ['title' => 'Curved Mini Bag', 'price' => '96', 'x' => '52%', 'y' => '44%'],
            ],
        ],
        [
            'eyebrow' => 'Travel Ready',
            'title' => 'Packed for movement',
            'href' => '#',
            'span' => 'wide',
            'pins' => [
                ['title' => 'Structured Weekender', 'price' => '214', 'x' => '44%', 'y' => '56%'],
            ],
        ],
    ];

    $products ??= [
        ['title' => 'Suede Mini Satchel', 'price' => '128', 'compareAt' => '145', 'tag' => 'Sale'],
        ['title' => 'Curved Mini Bag', 'price' => '96', 'compareAt' => null, 'tag' => 'New'],
        ['title' => 'Wide Base Leather Tote', 'price' => '148', 'compareAt' => null, 'tag' => null],
        ['title' => 'Structured Weekender', 'price' => '214', 'compareAt' => null, 'tag' => 'Limited'],
    ];

    $spanClasses = [
        'feature' => 'sm:col-span-2 sm:row-span-2 aspect-[4/5] sm:aspect-auto',
        'tall' => 'aspect-[3/4]',
        'wide' => 'sm:col-span-2 aspect-[4/3] sm:aspect-[16/9]',
    ];
@endphp

<x-ui.section
    x-data="{ active: null }"
    x-on:keydown.escape.window="active = null"
    data-slot="shop-the-look-01"
    space="lg" {{ $attributes }}
>
    <x-ui.container gutter="sm">
        <div class="max-w-2xl">
            <h2 class="text-pretty font-heading text-3xl font-normal tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            <p class="mt-4 text-pretty text-sm leading-relaxed text-muted-foreground sm:text-base">{{ __($subheading) }}</p>
        </div>

        {{-- ── Editorial scene gallery — each scene shoppable via hotspot pins ── --}}
        <div class="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:auto-rows-fr">
            @foreach ($looks as $look)
                @php $sceneIndex = $loop->index; @endphp
                <article class="group relative isolate overflow-hidden rounded-lg border border-border bg-muted {{ $spanClasses[$look['span'] ?? 'tall'] ?? $spanClasses['tall'] }}">
                    {{-- Lifestyle placeholder --}}
                    <div
                        role="img"
                        aria-label="{{ __('Lifestyle photo for the :title look', ['title' => __($look['title'])]) }}"
                        class="flex size-full items-center justify-center text-muted-foreground/60"
                    >
                        <svg class="size-14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <rect x="3" y="3" width="18" height="18" rx="2" />
                            <circle cx="9" cy="9" r="2" />
                            <path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" />
                        </svg>
                    </div>

                    {{-- Legibility scrim --}}
                    <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-foreground/75 via-foreground/20 to-transparent" aria-hidden="true"></div>

                    {{-- Caption — bottom start --}}
                    <div class="absolute inset-x-0 bottom-0 flex flex-col items-start gap-2 p-6 text-background sm:p-6">
                        <p class="font-body text-sm uppercase tracking-[0.25em] text-background/80">{{ __($look['eyebrow']) }}</p>
                        <h3 class="font-heading text-xl font-normal leading-tight tracking-tight sm:text-2xl">{{ __($look['title']) }}</h3>
                        <x-ui.button :href="$look['href'] ?? '#'" variant="secondary" size="sm" :withArrow="true" class="mt-2">
                            {{ __('Shop now') }}
                        </x-ui.button>
                    </div>

                    {{-- Hotspot pins + popovers --}}
                    @foreach ($look['pins'] as $pin)
                        @php $pinKey = $sceneIndex.'-'.$loop->index; @endphp
                        <div
                            class="absolute -translate-x-1/2 -translate-y-1/2"
                            style="inset-inline-start: {{ $pin['x'] }}; top: {{ $pin['y'] }}"
                        >
                            <button
                                type="button"
                                x-on:click="active = active === '{{ $pinKey }}' ? null : '{{ $pinKey }}'"
                                :class="active === '{{ $pinKey }}' ? 'bg-primary text-primary-foreground' : 'bg-background text-foreground'"
                                class="relative flex size-7 items-center justify-center rounded-full border border-border shadow-md ring-ring transition focus-visible:outline-none focus-visible:ring-2"
                                :aria-expanded="active === '{{ $pinKey }}'"
                                aria-label="{{ __('View :title', ['title' => __($pin['title'])]) }}"
                            >
                                <span class="absolute inline-flex size-full animate-ping rounded-full bg-primary/40 motion-reduce:animate-none" aria-hidden="true"></span>
                                <span class="relative size-2 rounded-full bg-current" aria-hidden="true"></span>
                            </button>

                            {{-- Product popover --}}
                            <div
                                x-show="active === '{{ $pinKey }}'"
                                x-transition
                                x-cloak
                                class="absolute top-full z-10 mt-4 w-60 -translate-x-1/2"
                                style="inset-inline-start: 50%"
                            >
                                <x-ui.card class="overflow-hidden p-4 text-foreground shadow-xl">
                                    <div class="flex items-center gap-4">
                                        <span class="flex size-14 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
                                            <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
                                                <path d="M3 6h18" />
                                                <path d="M16 10a4 4 0 0 1-8 0" />
                                            </svg>
                                        </span>
                                        <div class="min-w-0">
                                            <h4 class="truncate text-sm font-semibold tracking-tight text-foreground">{{ __($pin['title']) }}</h4>
                                            <x-ui.price :amount="$pin['price']" :currency="$currency" size="sm" class="mt-0.5" />
                                        </div>
                                    </div>
                                    <div class="mt-4 flex items-center gap-2">
                                        <x-ui.button size="sm" class="flex-1">{{ __('Add to cart') }}</x-ui.button>
                                        <x-ui.button variant="outline" size="sm" class="flex-1">{{ __('View') }}</x-ui.button>
                                    </div>
                                </x-ui.card>
                            </div>
                        </div>
                    @endforeach
                </article>
            @endforeach
        </div>

        {{-- ── Highlights rail — shoppable without interaction, primary on mobile ── --}}
        <div class="mt-12">
            <div class="flex items-end justify-between gap-4">
                <h3 class="font-heading text-xl font-normal tracking-tight sm:text-2xl">{{ __('Highlights') }}</h3>
                <a href="#" class="shrink-0 text-sm font-medium text-muted-foreground underline-offset-4 transition hover:text-foreground hover:underline">{{ __('View all') }}</a>
            </div>

            <ul role="list" class="mt-6 grid grid-cols-2 gap-4 lg:grid-cols-4">
                @foreach ($products as $product)
                    @php
                        $card = [
                            'name' => $product['title'],
                            'href' => $product['href'] ?? '#',
                            'price' => $product['price'],
                            'compareAt' => $product['compareAt'] ?? null,
                            'badge' => $product['tag'] ?? null,
                            'badgeVariant' => 'secondary',
                        ];
                    @endphp
                    <li>
                        <x-ui.product-card :product="$card" heading-level="h4" :currency="$currency" :show-rating="false" :show-wishlist="false" />
                    </li>
                @endforeach
            </ul>
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/shop-the-look-lookbook

Installs these dependencies automatically:

button card container price product-card section

Registry contract

Install confidence

php artisan ui:add blocks/shop-the-look-lookbook 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/shop-the-look-lookbook.blade.php

Registry dependencies

button card container price product-card 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.

shop-the-look-lookbook.md

# Brok UI block: Shop the Look Lookbook (`shop-the-look-lookbook`)

An editorial shop-the-look lookbook — an asymmetric gallery of full-bleed lifestyle scenes, each scrimmed with an overlaid eyebrow/title/shop-now caption and interactive hotspot pins whose pulsing halos open a small product popover card (thumbnail, name, price, view and add buttons), with one pin open at a time and Escape to close, above a highlights rail of product cards.

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/shop-the-look-lookbook
```

## Render it

```blade
<x-blocks.shop-the-look-lookbook />
```

## Props

- `heading` (string, default `The lookbook`) — Section heading.
- `subheading` (string, default `In use, in motion, and fully packed — explore each scene, then tap a pin to shop the pieces.`) — Supporting copy under the heading.
- `looks` (mixed|null, default `null`) — Lifestyle scenes, each with a title, span size and tagged pins; null falls back to sample data.
- `products` (mixed|null, default `null`) — Highlights rail product cards shown below the gallery; null falls back to sample data.
- `currency` (string, default `USD`) — Currency symbol or code used to format prices.

## Use when

- Presenting an editorial lookbook of several full-bleed lifestyle scenes, each with its own shoppable hotspot pins.
- Wanting the story to span multiple images rather than one hero photo.

## Avoid when

- Tagging products on a single lifestyle image; use shop-the-look-hotspots instead.

## Rules

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

Ask about Shop the Look Lookbook 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 an editorial lookbook of several full-bleed lifestyle scenes, each with its own shoppable hotspot pins.
Wanting the story to span multiple images rather than one hero photo.

Avoid when

Tagging products on a single lifestyle image; use shop-the-look-hotspots instead.

Anti-patterns

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

Anatomy: root shop-the-look-hotspots

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.shop-the-look-lookbook />

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.