Hero

Open source

Marketing hero sections: centred, split, search, form, video, stats, screenshot and more; the centred hero takes a switchable backdrop.

Add to page builder

12 of 15

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

@props([
    'eyebrow'       => 'New collection',
    'heading'       => 'Crafted for the way you live',
    'subheading'    => 'Timeless pieces designed in-house and built to last — discover the season’s lifestyle edit, shot on location.',
    'primaryCta'    => 'Shop the collection',
    'primaryHref'   => '#',
    'secondaryCta'  => 'Explore lookbook',
    'secondaryHref' => '#',
    'image'         => null,
])

@php
    $image ??= [];
    $imageAlt = $image['alt'] ?? '';
    $imageLabel = $image['label'] ?? 'Lifestyle photograph';
@endphp

<x-ui.section data-slot="hero-19" space="none" class="relative isolate flex min-h-[70vh] w-full overflow-hidden lg:min-h-svh" {{ $attributes }}>
    {{-- Full-bleed lifestyle image layer (token placeholder cover; swap in a real <img> source) --}}
    <div class="absolute inset-0 bg-muted" role="img" aria-label="{{ __($imageLabel) }}">
        @if (! empty($image['src']))
            <img src="{{ $image['src'] }}" alt="{{ __($imageAlt) }}" class="absolute inset-0 h-full w-full object-cover" loading="lazy" decoding="async" />
        @else
            <div class="absolute inset-0 flex items-center justify-center" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" class="size-16 text-muted-foreground/40" 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.5-3.5a2 2 0 0 0-2.83 0L4 22" />
                </svg>
            </div>
        @endif
    </div>

    {{-- Token scrim for legibility over the image --}}
    <div class="absolute inset-0 bg-gradient-to-t from-background/80 via-background/40 to-background/10" aria-hidden="true"></div>

    {{-- Foreground content (bottom-start, constrained) --}}
    <div class="relative z-10 mx-auto flex w-full max-w-7xl items-end px-4 pb-16 pt-28 sm:px-6 sm:pb-20 lg:pb-28">
        <div class="max-w-2xl text-start">
            @if ($eyebrow)
                <x-ui.badge variant="secondary" class="mb-6">{{ __($eyebrow) }}</x-ui.badge>
            @endif

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

            <p class="mt-6 max-w-xl text-pretty text-lg leading-relaxed text-muted-foreground">
                {{ __($subheading) }}
            </p>

            <div class="mt-10 flex flex-col gap-4 sm:flex-row sm:items-center">
                <x-ui.button :href="$primaryHref" size="lg" class="w-full sm:w-auto">{{ __($primaryCta) }}</x-ui.button>
                @if ($secondaryCta)
                    <x-ui.button :href="$secondaryHref" size="lg" variant="outline" class="w-full sm:w-auto">{{ __($secondaryCta) }}</x-ui.button>
                @endif
            </div>
        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/hero-image

Installs these dependencies automatically:

badge button section

Registry contract

Install confidence

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

hero-image.md

# Brok UI block: Hero Image (`hero-image`)

A full-bleed, cinematic lifestyle-image hero for marketing and ecommerce: a tall section whose backdrop is a full-cover image layer with a token scrim for legibility, and bottom-start foreground content with an eyebrow badge, a large headline, a subline, and primary plus secondary call-to-action buttons.

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

## Render it

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

## Props

- `eyebrow` (string, default `New collection`) — Small label shown above the heading inside a badge; falsy hides the badge.
- `heading` (string, default `Crafted for the way you live`) — Primary headline.
- `subheading` (string, default `Timeless pieces designed in-house and built to last — discover the season’s lifestyle edit, shot on location.`) — Supporting copy under the heading.
- `primary-cta` (string, default `Shop the collection`) — Primary button label.
- `primary-href` (string, default `#`) — Primary button destination.
- `secondary-cta` (string, default `Explore lookbook`) — Secondary button label; falsy hides the secondary button.
- `secondary-href` (string, default `#`) — Secondary button destination.
- `image` (mixed|null, default `null`) — Background image config {src, alt, label}; a missing src renders a muted placeholder with an aria-label.

## Use when

- Opening a fashion, lifestyle, or editorial landing page with a full-bleed background photograph and bottom-anchored foreground copy.
- Wanting a tall, cinematic section (min 70vh, full screen height on large screens) rather than a compact, padded hero.

## Avoid when

- Needing a rotating set of full-bleed images instead of a single static one; use hero-slideshow for an auto-advancing carousel.

## Rules

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

Ask about Hero Image 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 fashion, lifestyle, or editorial landing page with a full-bleed background photograph and bottom-anchored foreground copy.
Wanting a tall, cinematic section (min 70vh, full screen height on large screens) rather than a compact, padded hero.

Avoid when

Needing a rotating set of full-bleed images instead of a single static one; use hero-slideshow for an auto-advancing carousel.

Anti-patterns

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

Anatomy: full-bleed background image gradient scrim eyebrow badge heading subheading primary cta secondary cta

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.hero-image />

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.