Process

Open source

How-it-works sections — a horizontal step row and a vertical numbered timeline.

1 of 2

resources/views/blocks/process-horizontal.blade.php Blade

@props([
    'eyebrow' => 'How it works',
    'heading' => 'From sign-up to shipped in three steps',
    'subheading' => 'A clear, repeatable path that gets your team productive on day one — no lengthy onboarding required.',
    'steps' => null,
])

@php
    $steps ??= [
        [
            'title' => 'Create your workspace',
            'body' => 'Sign up in seconds and invite your team. We provision a secure workspace with sensible defaults so you can start right away.',
            'icon' => 'spark',
        ],
        [
            'title' => 'Connect your tools',
            'body' => 'Plug in the apps you already use. One-click integrations sync your data automatically, with a full audit trail.',
            'icon' => 'plug',
        ],
        [
            'title' => 'Ship with confidence',
            'body' => 'Launch your first workflow and watch the busywork disappear. Track progress live and iterate as you grow.',
            'icon' => 'rocket',
        ],
    ];

    // Fixed icon path map — keyed by step['icon'], renders a token-coloured SVG.
    $icons = [
        'spark' => '<path d="M12 3v3m0 12v3m9-9h-3M6 12H3m13.5-6.5-2.1 2.1m-4.8 4.8-2.1 2.1m0-9 2.1 2.1m4.8 4.8 2.1 2.1"/>',
        'plug' => '<path d="M9 2v6m6-6v6M6 8h12v3a6 6 0 0 1-12 0V8Zm6 9v5"/>',
        'rocket' => '<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09ZM12 15l-3-3a22 22 0 0 1 8-10c1.5 1.5 1.5 5.5 0 8a22 22 0 0 1-5 5Z"/>',
    ];
@endphp

<x-ui.section
    space="xl" {{ $attributes }}
    aria-labelledby="process-01-heading"
    data-slot="process-01"
>
    <x-ui.container gutter="sm">
        <div class="mx-auto max-w-2xl text-center">
            @if (! empty($eyebrow))
                <x-ui.badge variant="secondary" class="mb-6">{{ __($eyebrow) }}</x-ui.badge>
            @endif

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

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

        <ol class="relative mt-16 grid grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 lg:grid-cols-3 lg:gap-6">
            {{-- Connector line spanning the row of steps on desktop --}}
            <span
                class="pointer-events-none absolute inset-x-[16.66%] top-7 hidden border-t border-dashed border-border lg:block"
                aria-hidden="true"
            ></span>

            @foreach ($steps as $i => $step)
                <li class="relative">
                    <x-ui.card class="h-full p-6">
                        <div class="flex items-center gap-4">
                            <x-ui.badge
                                variant="secondary"
                                class="relative z-10 inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-primary/10 text-lg font-semibold tabular-nums text-primary"
                            >
                                <span class="sr-only">{{ __('Step') }}</span>{{ str_pad((string) ($i + 1), 2, '0', STR_PAD_LEFT) }}
                            </x-ui.badge>

                            @if (! empty($step['icon']) && isset($icons[$step['icon']]))
                                <span class="inline-flex h-10 w-10 items-center justify-center rounded-md bg-muted text-muted-foreground" aria-hidden="true">
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                                        {!! $icons[$step['icon']] !!}
                                    </svg>
                                </span>
                            @endif
                        </div>

                        <h3 class="mt-6 text-balance text-lg font-semibold tracking-tight">
                            {{ __($step['title']) }}
                        </h3>

                        <p class="mt-2 text-pretty text-sm text-muted-foreground">
                            {{ __($step['body']) }}
                        </p>
                    </x-ui.card>

                    {{-- Forward arrow between steps on desktop --}}
                    @if (! $loop->last)
                        <span class="absolute -end-3 top-7 z-10 hidden -translate-y-1/2 text-muted-foreground lg:block" aria-hidden="true">
                            <svg class="h-5 w-5 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M5 12h14" />
                                <path d="m12 5 7 7-7 7" />
                            </svg>
                        </span>
                    @endif
                </li>
            @endforeach
        </ol>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/process-horizontal

Installs these dependencies automatically:

badge card container section

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/process-horizontal.blade.php

Registry dependencies

badge card container 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.

process-horizontal.md

# Brok UI block: Process (`process-horizontal`)

A how-it-works section with a heading, lead paragraph, and numbered steps laid out horizontally with a connector line on desktop, stacking on mobile, each step composing a card with a numbered badge chip, icon, title, and description.

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/process-horizontal
```

## Render it

```blade
<x-blocks.process-horizontal />
```

## Props

- `eyebrow` (string, default `How it works`) — Small label shown above the heading inside a badge.
- `heading` (string, default `From sign-up to shipped in three steps`) — Section heading.
- `subheading` (string, default `A clear, repeatable path that gets your team productive on day one — no lengthy onboarding required.`) — Supporting copy under the heading.
- `steps` (mixed|null, default `null`) — Array of {title, body, icon} step entries; null falls back to a default 3-step sample.

## Use when

- Explaining a short sequential process (typically three steps) as a horizontal grid of numbered step cards linked by a dashed connector line on desktop.
- Wanting a compact icon-plus-title-plus-body step layout for an onboarding or how-it-works section without per-step duration estimates.

## Avoid when

- Needing a vertical timeline with a duration badge per step; use process-vertical instead.

## Rules

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

Ask about Process 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

Explaining a short sequential process (typically three steps) as a horizontal grid of numbered step cards linked by a dashed connector line on desktop.
Wanting a compact icon-plus-title-plus-body step layout for an onboarding or how-it-works section without per-step duration estimates.

Avoid when

Needing a vertical timeline with a duration badge per step; use process-vertical instead.

Anti-patterns

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

Anatomy: section eyebrow badge heading subheading connector line step card numbered badge step icon

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.process-horizontal />

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.