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

2 of 3

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

@props([
    'eyebrow'      => 'New Collection',
    'headline'     => 'Exclusive Designer Bag Selection',
    'subcopy'      => 'A considered edit of structured leather pieces — crafted to carry from one season into the next.',
    'collectionTag' => 'Autumn / Winter 2026',
    'primaryCta'   => ['label' => 'Shop now',           'href' => '#'],
    'secondaryCta' => ['label' => 'Discover the story',  'href' => '#'],
    'scrollLabel'  => 'Scroll to explore',
])

{{--
    store-hero-02 — "Editorial" Monogram storefront hero.
    Structurally distinct from store-hero (the two-column collage): a single
    full-bleed media area (token `bg-muted` placeholder, no external image) with a
    soft foreground-scrim gradient and a bottom-start overlaid editorial text block
    — an uppercase wide-tracked eyebrow, a large light `font-heading` headline, a
    supporting line, and dual CTAs. A small collection tag sits top-start; a quiet
    scroll cue anchors the bottom. Mostly static Blade.
    Composes <x-ui.button>.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
<x-ui.section
    space="none" {{ $attributes }}
    data-slot="store-hero"
    aria-label="{{ __($headline) }}"
>
    <div class="relative isolate overflow-hidden">
        {{-- ── Full-bleed media placeholder ── --}}
        <div class="aspect-[4/5] w-full bg-muted sm:aspect-[16/10] lg:aspect-[21/9]" aria-hidden="true"></div>

        {{-- Legibility scrim — foreground/background invert is readable in both themes --}}
        <div
            class="absolute inset-0 bg-gradient-to-t from-foreground/80 via-foreground/30 to-transparent"
            aria-hidden="true"
        ></div>

        {{-- Collection tag — top start --}}
        @if ($collectionTag)
            <div class="absolute start-0 top-0 p-6 sm:p-8 lg:p-12">
                <span class="inline-flex items-center rounded-full border border-background/40 px-4 py-2 font-body text-2xs uppercase tracking-widest text-background">
                    {{ __($collectionTag) }}
                </span>
            </div>
        @endif

        {{-- ── Overlaid editorial copy — bottom start ── --}}
        <div class="absolute inset-x-0 bottom-0">
            <div class="mx-auto max-w-7xl px-6 pb-12 sm:px-8 sm:pb-16 lg:px-12 lg:pb-20">
                <div class="flex max-w-2xl flex-col items-start gap-6 text-background">

                    {{-- Eyebrow --}}
                    <p class="font-body text-2xs uppercase tracking-[0.3em] text-background/80">
                        {{ __($eyebrow) }}
                    </p>

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

                    {{-- Subcopy --}}
                    <p class="max-w-md font-body text-base leading-relaxed text-background/85 sm:text-lg">
                        {{ __($subcopy) }}
                    </p>

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

        {{-- ── Scroll cue — bottom end ── --}}
        @if ($scrollLabel)
            <div class="absolute bottom-6 end-6 hidden items-center gap-2 sm:flex lg:bottom-10 lg:end-12">
                <span class="font-body text-2xs uppercase tracking-widest text-background/70">{{ __($scrollLabel) }}</span>
                <svg class="size-4 text-background/70 motion-safe:animate-bounce" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M12 5v14" /><path d="m19 12-7 7-7-7" />
                </svg>
            </div>
        @endif
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/store-hero-editorial

Installs these dependencies automatically:

button section

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/store-hero-editorial.blade.php

Registry dependencies

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-editorial.md

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

A full-bleed editorial storefront hero — a single dominant media placeholder under a soft scrim with a bottom-start overlaid copy block (uppercase eyebrow, large light display headline, supporting line, dual CTAs), a top-start collection tag and a quiet scroll 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/store-hero-editorial
```

## Render it

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

## Props

- `eyebrow` (string, default `New Collection`) — Small label shown above the heading.
- `headline` (string, default `Exclusive Designer Bag Selection`) — Primary headline.
- `subcopy` (string, default `A considered edit of structured leather pieces — crafted to carry from one season into the next.`) — Supporting copy under the headline.
- `collection-tag` (string, default `Autumn / Winter 2026`) — Small collection label shown top-start.
- `primary-cta` (array, default `['label' => 'Shop now',           'href' => '#']`) — Primary {label, href} call to action.
- `secondary-cta` (array, default `['label' => 'Discover the story',  'href' => '#']`) — Secondary {label, href} call to action.
- `scroll-label` (string, default `Scroll to explore`) — Accessible label for the scroll cue.

## Use when

- Opening a storefront with a single full-bleed editorial image and overlaid copy for a fashion or lifestyle brand.
- Wanting the visual story to matter more than showing price or a product collage.

## Avoid when

- Needing pricing and product tiles in the hero; use store-hero instead. Needing background video; use store-hero-video instead.

## Rules

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

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

Opening a storefront with a single full-bleed editorial image and overlaid copy for a fashion or lifestyle brand.
Wanting the visual story to matter more than showing price or a product collage.

Avoid when

Needing pricing and product tiles in the hero; use store-hero instead. Needing background video; use store-hero-video instead.

Anti-patterns

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

Anatomy: root store-hero

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.store-hero-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.