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

13 of 15

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

@props([
    'slides' => null,
    'autoplay' => true,
    'interval' => 6000,
])

@php
    $slides ??= [
        [
            'eyebrow'    => 'New season',
            'heading'    => 'The autumn collection has landed',
            'subheading' => 'Refined silhouettes and natural fabrics, curated for the season ahead. Own every piece, made to last.',
            'cta'        => 'Shop the collection',
            'href'       => '#',
        ],
        [
            'eyebrow'    => 'Limited drop',
            'heading'    => 'Handcrafted leather, built for years',
            'subheading' => 'A small-batch release of full-grain leather goods. Once they are gone, they are gone for good.',
            'cta'        => 'Explore the drop',
            'href'       => '#',
        ],
        [
            'eyebrow'    => 'Members only',
            'heading'    => 'Early access starts this weekend',
            'subheading' => 'Join the list for first looks, member pricing, and free returns on every order, every time.',
            'cta'        => 'Become a member',
            'href'       => '#',
        ],
    ];

    $count = count($slides);
@endphp

<x-ui.section
    data-slot="hero-20"
    space="none" class="relative isolate overflow-hidden" {{ $attributes }}
    x-data="{
        active: 0,
        count: {{ $count }},
        timer: null,
        autoplay: {{ $autoplay ? 'true' : 'false' }},
        interval: {{ (int) $interval }},
        reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
        paused: false,
        next() { this.active = (this.active + 1) % this.count },
        prev() { this.active = (this.active - 1 + this.count) % this.count },
        goto(i) { this.active = i },
        start() {
            if (! this.autoplay || this.reduced || this.paused || this.count < 2) return;
            this.stop();
            this.timer = setInterval(() => this.next(), this.interval);
        },
        stop() {
            if (this.timer) { clearInterval(this.timer); this.timer = null; }
        },
        togglePause() {
            this.paused = ! this.paused;
            this.paused ? this.stop() : this.start();
        },
        init() { this.start(); },
        destroy() { this.stop(); }
    }"
    x-on:mouseenter="stop()"
    x-on:mouseleave="! paused && start()"
    role="region"
    aria-roledescription="{{ __('carousel') }}"
    aria-label="{{ __('Featured highlights') }}"
>
    {{-- ── Slides ── --}}
    @foreach ($slides as $i => $slide)
        <div
            x-show="active === {{ $i }}"
            x-transition:enter="transition ease-out duration-500"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-300"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            @if (! $loop->first) style="display: none;" @endif
            role="group"
            aria-roledescription="{{ __('slide') }}"
            aria-label="{{ __(':current of :total', ['current' => $i + 1, 'total' => $count]) }}"
            class="@if (! $loop->first) absolute inset-0 @endif"
        >
            {{-- Cover image placeholder layer --}}
            <div class="absolute inset-0 -z-10 bg-muted" aria-hidden="true"></div>

            {{-- Token scrim for foreground contrast --}}
            <div class="absolute inset-0 -z-10 bg-gradient-to-t from-background via-background/70 to-background/30" aria-hidden="true"></div>

            {{-- Foreground copy --}}
            <div class="mx-auto flex min-h-[28rem] max-w-4xl flex-col items-start justify-end px-6 py-16 sm:min-h-[34rem] sm:py-24 lg:px-8">
                @if (! empty($slide['eyebrow']))
                    <x-ui.badge variant="secondary" class="mb-6">{{ __($slide['eyebrow']) }}</x-ui.badge>
                @endif

                <h2 class="max-w-2xl text-balance text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
                    {{ __($slide['heading']) }}
                </h2>

                @if (! empty($slide['subheading']))
                    <p class="mt-6 max-w-xl text-pretty text-lg text-muted-foreground">
                        {{ __($slide['subheading']) }}
                    </p>
                @endif

                @if (! empty($slide['cta']))
                    <div class="mt-8">
                        <x-ui.button href="{{ $slide['href'] ?? '#' }}" size="lg" :withArrow="true">
                            {{ __($slide['cta']) }}
                        </x-ui.button>
                    </div>
                @endif
            </div>
        </div>
    @endforeach

    {{-- ── Previous / next controls ── --}}
    @if ($count > 1)
        <div class="absolute inset-x-4 top-1/2 z-10 flex -translate-y-1/2 items-center justify-between sm:inset-x-6">
            <x-ui.button
                size="icon"
                variant="outline"
                shape="pill"
                x-on:click="prev()"
                aria-label="{{ __('Previous slide') }}"
                class="shadow-sm"
            >
                <svg class="size-5 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M15 18l-6-6 6-6" />
                </svg>
            </x-ui.button>

            <x-ui.button
                size="icon"
                variant="outline"
                shape="pill"
                x-on:click="next()"
                aria-label="{{ __('Next slide') }}"
                class="shadow-sm"
            >
                <svg class="size-5 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M9 18l6-6-6-6" />
                </svg>
            </x-ui.button>
        </div>

        {{-- ── Dot indicators ── --}}
        <div class="absolute inset-x-0 bottom-5 z-10 flex items-center justify-center gap-2" role="group" aria-label="{{ __('Choose slide to display') }}">
            @foreach ($slides as $i => $slide)
                <button
                    type="button"
                    x-on:click="goto({{ $i }})"
                    x-bind:aria-current="active === {{ $i }} ? 'true' : 'false'"
                    aria-label="{{ __('Go to slide :n', ['n' => $i + 1]) }}"
                    class="flex size-7 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                >
                    <span
                        x-bind:class="active === {{ $i }} ? 'w-6 bg-primary' : 'w-2 bg-muted-foreground hover:bg-foreground'"
                        class="h-2 rounded-full transition-all duration-300 motion-reduce:transition-none"
                        aria-hidden="true"
                    ></span>
                </button>
            @endforeach
        </div>

        {{-- ── Pause / play autoplay ── --}}
        @if ($autoplay)
            <div class="absolute bottom-4 end-4 z-10 sm:end-6">
                <x-ui.button
                    type="button"
                    size="icon"
                    variant="outline"
                    shape="pill"
                    x-on:click="togglePause()"
                    x-bind:aria-pressed="paused ? 'true' : 'false'"
                    x-bind:aria-label="paused ? {{ Js::from(__('Play slideshow')) }} : {{ Js::from(__('Pause slideshow')) }}"
                    class="shadow-sm"
                >
                    <svg x-show="! paused" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="size-4">
                        <rect x="6" y="4" width="4" height="16" rx="1" /><rect x="14" y="4" width="4" height="16" rx="1" />
                    </svg>
                    <svg x-show="paused" x-cloak viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="size-4">
                        <path d="M6 4v16l14-8Z" />
                    </svg>
                </x-ui.button>
            </div>
        @endif
    @endif
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/hero-slideshow

Installs these dependencies automatically:

badge button section

Registry contract

Install confidence

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

Registry dependencies

badge button section

Package dependencies

composer: jml/brok:^0.2

npm: alpinejs

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

# Brok UI block: Hero Slideshow (`hero-slideshow`)

A full-width rotating storefront hero carousel of three slides, each with a muted cover layer, token scrim, eyebrow badge, headline, subcopy, and primary call-to-action. Inline Alpine drives wrap-around previous/next icon controls, a row of dot indicators that reflect and jump to the active slide, and an optional gentle auto-advance that pauses on hover, never starts under prefers-reduced-motion, and offers an explicit pause/play toggle.

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-slideshow
```

## Render it

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

## Props

- `slides` (mixed|null, default `null`) — Rows of {eyebrow, heading, subheading, cta, href}; null falls back to a default 3-slide sample.
- `autoplay` (bool, default `true`) — Enables automatic advancing between slides; disabled also hides the pause/play toggle.
- `interval` (int, default `6000`) — Milliseconds between automatic slide advances.

## Use when

- Opening a storefront or campaign landing page that needs to rotate between several full-bleed promotional messages in one hero slot.
- Wanting built-in autoplay with pause-on-hover, an explicit pause/play toggle, and wrap-around previous/next/dot navigation.

## Avoid when

- Showing a single static message is enough; a carousel adds interaction and motion cost that a plain hero (hero-image or hero-centered) avoids.

## Rules

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

Ask about Hero Slideshow 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 or campaign landing page that needs to rotate between several full-bleed promotional messages in one hero slot.
Wanting built-in autoplay with pause-on-hover, an explicit pause/play toggle, and wrap-around previous/next/dot navigation.

Avoid when

Showing a single static message is enough; a carousel adds interaction and motion cost that a plain hero (hero-image or hero-centered) avoids.

Anti-patterns

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

Anatomy: section slide cover image layer scrim eyebrow badge heading subheading cta previous control next control dot indicators pause/play toggle

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.hero-slideshow />

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.