Image with Text

Open source

Image-and-text content sections — a 50/50 row, a text-over-image band and an editorial overlapping card.

resources/views/blocks/image-text-band.blade.php Blade

@props([
    'eyebrow' => 'New collection',
    'heading' => 'Crafted for the way you work',
    'body' => 'A focused promotional strip that pairs a full-width image with a short, legible message — drop it mid-page to tell one clear story.',
    'cta' => 'Explore the range',
    'ctaHref' => '#',
    // align: 'start' (default) anchors the copy panel to the inline-start edge,
    // 'end' anchors it to the inline-end edge. The token scrim flips with it.
    'align' => 'start',
    // image: an optional decorative background URL. The band reads correctly
    // without it (the muted cover layer stands in).
    'image' => null,
])

@php
    $alignEnd = $align === 'end';

    // Directional token scrim: fully opaque background on the copy side fading
    // to near-transparent on the far side, so the heading stays legible over the
    // muted/image layer while the picture still reads on the open side.
    $scrim = $alignEnd
        ? 'bg-gradient-to-l from-background/90 via-background/60 to-background/10'
        : 'bg-gradient-to-r from-background/90 via-background/60 to-background/10';

    $panelAlign = $alignEnd ? 'ms-auto text-end items-end' : 'me-auto text-start items-start';
@endphp

{{--
    Image–text content band. A short, embeddable promotional strip (NOT a tall
    page hero): a rounded, overflow-hidden section with a constrained min height
    whose backdrop is a bg-muted cover layer (optionally an image) under a
    directional TOKEN gradient scrim. The copy panel — eyebrow badge, heading,
    one body line, and a button CTA — is constrained to max-w-xl and anchored to
    the inline-start (or end) edge. Tokens only; mirrors under dir="rtl".
--}}
<x-ui.section
    data-slot="image-text-02"
    space="none" class="relative isolate flex min-h-[24rem] overflow-hidden rounded-lg" {{ $attributes }}
>
    {{-- Muted cover layer. Stands in when no image is supplied; an inline-styled
         decorative image (background-image only — no colour) sits on top of it. --}}
    <div aria-hidden="true" class="absolute inset-0 bg-muted"></div>
    @if ($image)
        <div
            aria-hidden="true"
            class="absolute inset-0 bg-cover bg-center"
            style="background-image: url('{{ $image }}')"
        ></div>
    @endif

    {{-- Directional token scrim for legibility — flips with `align`. --}}
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 {{ $scrim }}"></div>

    <div class="relative z-10 flex w-full items-center px-6 py-16 sm:px-10 lg:px-16">
        <div class="flex w-full max-w-xl flex-col gap-6 {{ $panelAlign }}">
            @if ($eyebrow)
                <x-ui.badge variant="secondary">{{ __($eyebrow) }}</x-ui.badge>
            @endif

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

            <p class="max-w-md text-pretty text-base text-muted-foreground">
                {{ __($body) }}
            </p>

            @if ($cta)
                <div class="mt-2">
                    <x-ui.button :href="$ctaHref" size="lg">{{ __($cta) }}</x-ui.button>
                </div>
            @endif
        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/image-text-band

Installs these dependencies automatically:

badge button section

Registry contract

Install confidence

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

image-text-band.md

# Brok UI block: Image Text 02 (`image-text-band`)

A short, embeddable text-over-image content band: a rounded, overflow-hidden strip with a muted (optionally image) cover layer under a directional token-gradient scrim, and a max-w-xl copy panel — eyebrow badge, heading, body line, and button CTA — anchored to the inline-start or inline-end edge for legible storytelling mid-page.

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/image-text-band
```

## Render it

```blade
<x-blocks.image-text-band />
```

## Props

- `eyebrow` (string, default `New collection`) — Small label shown above the heading inside a badge.
- `heading` (string, default `Crafted for the way you work`) — Primary section heading.
- `body` (string, default `A focused promotional strip that pairs a full-width image with a short, legible message — drop it mid-page to tell one clear story.`) — Single supporting line under the heading.
- `cta` (string, default `Explore the range`) — Button label; falsy hides the CTA.
- `cta-href` (string, default `#`) — Button destination.
- `align` (string, default `start`) — start anchors the copy panel (and scrim) to the inline-start edge; end anchors it to the inline-end edge.
- `image` (mixed|null, default `null`) — Optional decorative background image URL; the muted cover layer stands in when null.

## Use when

- Use it for a short, embeddable promotional strip mid-page where a heading, one body line, and a single CTA sit over a full-bleed muted or image background behind a directional token scrim.
- Reach for it when the copy panel should anchor to the inline-start or inline-end edge via the align prop rather than occupy a fixed 50% column.

## Avoid when

- Avoid it for a full two-column layout with a checklist or dual CTAs; use image-text-row instead.

## Rules

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

Ask about Image Text 02 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

Use it for a short, embeddable promotional strip mid-page where a heading, one body line, and a single CTA sit over a full-bleed muted or image background behind a directional token scrim.
Reach for it when the copy panel should anchor to the inline-start or inline-end edge via the align prop rather than occupy a fixed 50% column.

Avoid when

Avoid it for a full two-column layout with a checklist or dual CTAs; use image-text-row instead.

Anti-patterns

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

Anatomy: muted or image cover layer directional gradient scrim eyebrow badge heading body line single CTA button

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.image-text-band />

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.