Image with Text

Open source

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

1 of 3

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

@props([
    'eyebrow' => 'Why teams choose us',
    'heading' => 'Everything you ship, crafted in one place',
    'body' => 'Pair a focused visual with the copy that sells it. This single content row is the workhorse of marketing and ecommerce pages — drop it in, swap the props, and keep your layout consistent.',
    'points' => null,
    'primaryCta' => 'Get started',
    'primaryHref' => '#',
    'secondaryCta' => 'Learn more',
    'secondaryHref' => '#',
    'reverse' => false,
    'image' => null,
])

@php
    $points ??= [
        'Set up in minutes, not days',
        'Themed by tokens — never hard-coded colours',
        'Accessible and responsive out of the box',
    ];
@endphp

<x-ui.section data-slot="image-text-01" space="xl" {{ $attributes }}>
    <div class="mx-auto grid max-w-6xl grid-cols-1 items-center gap-10 px-4 lg:grid-cols-2 lg:gap-16">
        {{-- Media panel --}}
        <div class="{{ $reverse ? 'lg:order-2' : 'lg:order-1' }}">
            <x-ui.aspect-ratio
                ratio="4 / 3"
                class="overflow-hidden rounded-lg border border-border bg-muted"
            >
                @if ($image)
                    <img
                        src="{{ $image }}"
                        alt="{{ __($heading) }}"
                        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 text-muted-foreground">
                        <svg class="h-12 w-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                            <circle cx="9" cy="9" r="2" />
                            <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
                        </svg>
                    </div>
                @endif
            </x-ui.aspect-ratio>
        </div>

        {{-- Copy --}}
        <div class="{{ $reverse ? 'lg:order-1' : 'lg:order-2' }}">
            @if ($eyebrow)
                <x-ui.badge variant="secondary" class="mb-6">{{ __($eyebrow) }}</x-ui.badge>
            @endif

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

            <p class="mt-6 text-pretty text-lg text-muted-foreground">
                {{ __($body) }}
            </p>

            @if (! empty($points))
                <x-ui.check-list marker="chip" size="lg" class="mt-8">
                    @foreach ($points as $point)
                        <x-ui.check-list.item>{{ __($point) }}</x-ui.check-list.item>
                    @endforeach
                </x-ui.check-list>
            @endif

            <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/image-text-row

Installs these dependencies automatically:

aspect-ratio badge button check-list section

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/image-text-row.blade.php

Registry dependencies

aspect-ratio badge button check-list 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-row.md

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

A single, self-contained 50/50 content row pairing a muted media panel with copy — an eyebrow badge, heading, body paragraph, an optional token check-icon checklist and a primary + secondary button CTA pair. A reverse prop flips the image side (RTL-safe). The workhorse marketing/ecommerce content section.

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

## Render it

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

## Props

- `eyebrow` (string, default `Why teams choose us`) — Small label shown above the heading inside a badge.
- `heading` (string, default `Everything you ship, crafted in one place`) — Primary section heading.
- `body` (string, default `Pair a focused visual with the copy that sells it. This single content row is the workhorse of marketing and ecommerce pages — drop it in, swap the props, and keep your layout consistent.`) — Supporting paragraph under the heading.
- `points` (mixed|null, default `null`) — Array of checklist strings; falls back to a 3-item sample list when null.
- `primary-cta` (string, default `Get started`) — Primary button label.
- `primary-href` (string, default `#`) — Primary button destination.
- `secondary-cta` (string, default `Learn more`) — Secondary button label; falsy hides the secondary button.
- `secondary-href` (string, default `#`) — Secondary button destination.
- `reverse` (bool, default `false`) — Flips the image to the opposite (RTL-safe) side of the copy when true.
- `image` (mixed|null, default `null`) — Optional image URL for the media panel; shows a placeholder icon when null.

## Use when

- Use it for a single 50/50 marketing or ecommerce content row that pairs a media panel with an eyebrow, heading, body copy, an optional checklist, and a primary plus secondary call-to-action.
- Reach for it when the image side should be flippable per instance via the reverse prop while staying RTL-safe.

## Avoid when

- Avoid it when the visual should overlap the copy in an editorial card layout; use image-text-overlap instead, or image-text-band for a short text-over-image promotional band.

## Rules

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

Ask about Image Text 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 single 50/50 marketing or ecommerce content row that pairs a media panel with an eyebrow, heading, body copy, an optional checklist, and a primary plus secondary call-to-action.
Reach for it when the image side should be flippable per instance via the reverse prop while staying RTL-safe.

Avoid when

Avoid it when the visual should overlap the copy in an editorial card layout; use image-text-overlap instead, or image-text-band for a short text-over-image promotional band.

Anti-patterns

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

Anatomy: media panel with aspect-ratio image or placeholder eyebrow badge heading body paragraph optional check-list primary and secondary CTA buttons

Usage

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

resources/views/welcome.blade.php Blade

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

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.