Text Banner

Open source

Oversized editorial type statements — a large display message with optional emphasis and CTA.

resources/views/blocks/text-banner-statement.blade.php Blade

@props([
    'eyebrow'   => 'Our promise',
    'statement' => 'Here can be a compelling message summarizing the section.',
    'emphasis'  => 'compelling',
    'subcopy'   => 'A short supporting line that adds a little context beneath the big statement — calm, considered, unhurried.',
    'align'     => 'center',
    'cta'       => ['label' => 'Read our story', 'href' => '#'],
])

{{--
    text-banner-01 — "Big statement" editorial text banner (Epitome / Monogram theme).
    A typographic section built for whitespace: an uppercase wide-tracked eyebrow, a
    very large light `font-heading` statement with one key word emphasized inline, a
    short supporting line, and an optional inline text-link CTA. No media, no chrome —
    just oversized editorial type. Centered by default; `align="start"` for a
    left-editorial layout. Mostly static Blade; a faint decorative rule fades in under
    motion-safe / reduced-motion.
    Composes <x-ui.button> (link variant) for the CTA.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
@php
    $isStart = $align === 'start';

    // Split the statement around the emphasized key word so it can be highlighted
    // inline without splicing markup into a translated string.
    $segments = ($emphasis && str_contains($statement, $emphasis))
        ? explode($emphasis, $statement, 2)
        : [$statement, null];
@endphp

<x-ui.section
    space="none" {{ $attributes }}
    data-slot="text-banner"
    aria-label="{{ __($statement) }}"
>
    <div class="mx-auto max-w-5xl px-6 py-24 sm:px-8 sm:py-32 lg:py-40">
        <div @class([
            'flex flex-col gap-6',
            'items-center text-center' => ! $isStart,
            'items-start text-start' => $isStart,
        ])>

            {{-- Eyebrow --}}
            @if ($eyebrow)
                <p class="font-body text-xs uppercase tracking-[0.3em] text-muted-foreground">
                    {{ __($eyebrow) }}
                </p>
            @endif

            {{-- Oversized statement --}}
            <h2 class="font-heading text-4xl font-normal leading-[1.08] tracking-tight text-balance sm:text-5xl lg:text-6xl xl:text-7xl">
                @if ($segments[1] !== null)
                    {{ __($segments[0]) }}<span class="text-primary">{{ __($emphasis) }}</span>{{ __($segments[1]) }}
                @else
                    {{ __($statement) }}
                @endif
            </h2>

            {{-- Decorative rule — fades in under motion-safe; instant for reduced-motion --}}
            <span
                class="block h-px w-16 bg-border motion-safe:animate-fade-in"
                aria-hidden="true"
            ></span>

            {{-- Supporting line --}}
            @if ($subcopy)
                <p class="max-w-xl font-body text-base leading-relaxed text-muted-foreground sm:text-lg">
                    {{ __($subcopy) }}
                </p>
            @endif

            {{-- Inline CTA --}}
            @if ($cta)
                <div class="mt-2">
                    <x-ui.button :href="$cta['href']" variant="link" :withArrow="true">
                        {{ __($cta['label']) }}
                    </x-ui.button>
                </div>
            @endif
        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/text-banner-statement

Installs these dependencies automatically:

button section

Registry contract

Install confidence

php artisan ui:add blocks/text-banner-statement 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/text-banner-statement.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.

text-banner-statement.md

# Brok UI block: Text Banner (`text-banner-statement`)

An oversized editorial text banner — a large light display statement with one emphasized key word, a short supporting line and an optional inline CTA link, set in calm whitespace.

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/text-banner-statement
```

## Render it

```blade
<x-blocks.text-banner-statement />
```

## Props

- `eyebrow` (string, default `Our promise`) — Small label shown above the heading.
- `statement` (string, default `Here can be a compelling message summarizing the section.`) — Primary statement text.
- `emphasis` (string, default `compelling`) — Word within the statement rendered with emphasis styling.
- `subcopy` (string, default `A short supporting line that adds a little context beneath the big statement — calm, considered, unhurried.`) — Supporting copy under the headline.
- `align` (string, default `center`) — Text alignment for the section.
- `cta` (array, default `['label' => 'Read our story', 'href' => '#']`) — Optional {label, href} inline call-to-action link.

## Use when

- Making a bold typographic statement in calm whitespace with one emphasized key word and an optional inline link.
- Wanting a quiet, text-only section between denser blocks.

## Avoid when

- Needing an image, icon or interactive element in the section; use a different marketing block instead.

## Rules

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

Ask about Text Banner 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

Making a bold typographic statement in calm whitespace with one emphasized key word and an optional inline link.
Wanting a quiet, text-only section between denser blocks.

Avoid when

Needing an image, icon or interactive element in the section; use a different marketing block instead.

Anti-patterns

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

Anatomy: root text-banner

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.text-banner-statement />

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.