Store Hero

Open source

Storefront heroes — an editorial collection opener with headline, supporting copy and call-to-action over a dominant product image.

Add to page builder

1 of 3

resources/views/blocks/store-hero.blade.php Blade

@props([
    'badge'        => 'Autumn sale −30%',
    'headline'     => 'The autumn collection',
    'subcopy'      => 'Refined silhouettes, natural fabrics, and enduring style — curated for the season ahead.',
    'fromPrice'    => 'From $49',
    'primaryCta'   => ['label' => 'Shop now',      'href' => '#'],
    'secondaryCta' => ['label' => 'View lookbook',  'href' => '#'],
    'featuredName'  => 'Brushed Wool Coat',
    'featuredPrice' => '$249',
    'trust' => [
        'Free returns',
        '2-year warranty',
    ],
])

{{--
    store-hero — Editorial two-column product hero.
    LEFT: badge, headline, subcopy, from-price, dual CTAs, trust row.
    RIGHT: dominant product placeholder + floating price chip + "Add to cart" button
           + two secondary product tiles for an editorial collage.
    Composes <x-ui.badge> and <x-ui.button>.
    Semantic tokens only, RTL-safe logical props, WCAG AA.
--}}
<x-ui.section space="none" {{ $attributes }}>
    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
        <div class="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">

            {{-- ── LEFT: editorial copy ── --}}
            <div class="flex flex-col items-start gap-6">

                {{-- Sale badge --}}
                <x-ui.badge variant="success">{{ __($badge) }}</x-ui.badge>

                {{-- Headline --}}
                <h1 class="text-4xl font-bold leading-tight tracking-tight sm:text-5xl lg:text-6xl">
                    {{ __($headline) }}
                </h1>

                {{-- Subcopy --}}
                <p class="max-w-md text-sm leading-relaxed text-muted-foreground">
                    {{ __($subcopy) }}
                </p>

                {{-- From price --}}
                <p class="text-2xl font-semibold text-primary">{{ $fromPrice }}</p>

                {{-- CTAs --}}
                <div class="flex flex-wrap items-center gap-4">
                    <x-ui.button href="{{ $primaryCta['href'] }}" :withArrow="true">
                        {{ __($primaryCta['label']) }}
                    </x-ui.button>
                    <x-ui.button href="{{ $secondaryCta['href'] }}" variant="outline">
                        {{ __($secondaryCta['label']) }}
                    </x-ui.button>
                </div>

                {{-- Trust row --}}
                <ul class="flex flex-wrap items-center gap-4" role="list">
                    @foreach ($trust as $item)
                        <li class="flex items-center gap-2 text-sm text-muted-foreground">
                            {{-- Check icon --}}
                            <svg class="size-4 shrink-0 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            {{ __($item) }}
                        </li>
                    @endforeach
                </ul>
            </div>

            {{-- ── RIGHT: product collage ── --}}
            <div class="relative flex items-end gap-4">

                {{-- Dominant featured product --}}
                <div class="relative flex-1">
                    <div class="relative overflow-hidden rounded-lg bg-muted">
                        {{-- Aspect ratio 4:5 placeholder --}}
                        <div class="aspect-[4/5] w-full"></div>

                        {{-- Floating price tag chip --}}
                        <div class="absolute end-3 top-3">
                            <span class="inline-flex items-center rounded-full border border-border bg-card px-4 py-2 text-sm font-semibold text-foreground shadow-sm">
                                {{ $featuredPrice }}
                            </span>
                        </div>

                        {{-- Floating "Add to cart" button --}}
                        <div class="absolute inset-x-3 bottom-3">
                            <x-ui.button size="sm" class="w-full justify-center" aria-label="{{ __('Add :name to cart', ['name' => $featuredName]) }}">
                                {{ __('Add to cart') }}
                            </x-ui.button>
                        </div>
                    </div>

                    {{-- Product name below card --}}
                    <p class="mt-2 text-sm font-medium text-foreground">{{ __($featuredName) }}</p>
                </div>

                {{-- Two secondary stacked tiles --}}
                <div class="flex w-28 flex-col gap-4 pb-8 sm:w-36">
                    <div class="overflow-hidden rounded-lg bg-muted">
                        <div class="aspect-square w-full"></div>
                    </div>
                    <div class="overflow-hidden rounded-lg bg-muted">
                        <div class="aspect-square w-full"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/store-hero

Installs these dependencies automatically:

badge button section

Registry contract

Install confidence

php artisan ui:add blocks/store-hero 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/store-hero.blade.php

Registry dependencies

badge button 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.

store-hero.md

# Brok UI block: Store Hero (`store-hero`)

Editorial two-column product hero with sale badge, headline, dual CTAs, trust row, a dominant product placeholder with floating price chip and add-to-cart button, and secondary collage tiles.

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/store-hero
```

## Render it

```blade
<x-blocks.store-hero />
```

## Props

- `badge` (string, default `Autumn sale −30%`) — Sale badge text shown above the headline.
- `headline` (string, default `The autumn collection`) — Primary headline.
- `subcopy` (string, default `Refined silhouettes, natural fabrics, and enduring style — curated for the season ahead.`) — Supporting copy under the headline.
- `from-price` (string, default `From $49`) — Starting price text shown under the subcopy.
- `primary-cta` (array, default `['label' => 'Shop now',      'href' => '#']`) — Primary {label, href} call to action.
- `secondary-cta` (array, default `['label' => 'View lookbook',  'href' => '#']`) — Secondary {label, href} call to action.
- `featured-name` (string, default `Brushed Wool Coat`) — Featured product name shown on the price chip.
- `featured-price` (string, default `$249`) — Featured product price shown on the price chip.
- `trust` (array, default `[…]`) — Short trust-signal strings shown under the CTAs.

## Use when

- Opening a storefront page with a two-column product hero showing a sale badge, price and collage tiles.
- Needing the hero to sell a specific collection or product with pricing up front.

## Avoid when

- Wanting a single full-bleed image or video hero instead of a collage; use store-hero-editorial or store-hero-video instead.

## Rules

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

Ask about Store Hero 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

Opening a storefront page with a two-column product hero showing a sale badge, price and collage tiles.
Needing the hero to sell a specific collection or product with pricing up front.

Avoid when

Wanting a single full-bleed image or video hero instead of a collage; use store-hero-editorial or store-hero-video instead.

Anti-patterns

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

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.store-hero />

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.