Features

Open source

Feature sections — icon grids, bordered cards, alternating media rows, bento layouts, a services variant and an industries grid.

Add to page builder

resources/views/blocks/features-services-split.blade.php Blade

@props([
    'eyebrow'  => 'What we offer',
    'heading'  => 'Expert services that scale with your ambitions',
    'lead'     => 'We partner with ambitious teams to design, build, and ship products that stand out — combining strategic thinking with hands-on craft at every stage.',
    'support'  => 'Whether you are launching something new or evolving what you already have, we move fast without cutting corners.',
    'ctaLabel' => 'Start a project',
    'ctaHref'  => '#contact',
    'stats'    => null,
    'services' => null,
])

@php
    $stats ??= [['value' => '12+', 'label' => 'Years of practice'], ['value' => '200+', 'label' => 'Products shipped']];
    $services ??= [
        ['icon' => 'strategy', 'title' => 'Product Strategy', 'description' => 'From discovery to roadmap — we clarify direction, validate assumptions, and align your team before a single line of code is written.', 'href' => '#', 'badge' => null],
        ['icon' => 'design', 'title' => 'UI & UX Design', 'description' => 'Accessible, on-brand interfaces built on a real token system, iterated quickly and handed off production-ready.', 'href' => '#', 'badge' => 'Most requested'],
        ['icon' => 'engineering', 'title' => 'Web Engineering', 'description' => 'Clean Laravel and Blade — maintainable, yours to own, with no runtime lock-in and no upgrade anxiety.', 'href' => '#', 'badge' => null],
        ['icon' => 'growth', 'title' => 'Growth & SEO', 'description' => 'Core Web Vitals, structured data, and content architecture that earns organic visibility and keeps it.', 'href' => '#', 'badge' => null],
    ];
    $icons = [
        'strategy' => '<circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/>',
        'design' => '<path d="M2 13.5V19a1 1 0 0 0 1 1h4"/><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/><path d="M12 12v4h4"/>',
        'engineering' => '<path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/><path d="m14.5 4-5 16"/>',
        'growth' => '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container gutter="sm">
        <div class="grid gap-12 lg:grid-cols-2 lg:gap-16">
            <div class="flex flex-col justify-start lg:sticky lg:top-24 lg:self-start">
                @if ($eyebrow)<x-ui.badge variant="outline" class="mb-4 w-fit">{{ __($eyebrow) }}</x-ui.badge>@endif
                <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
                <p class="mt-4 text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($lead) }}</p>
                <p class="mt-4 text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($support) }}</p>
                <div class="mt-8"><x-ui.button :href="$ctaHref" :with-arrow="true">{{ __($ctaLabel) }}</x-ui.button></div>
                @if (! empty($stats))
                    <dl class="mt-10 flex flex-wrap gap-x-8 gap-y-4 border-t border-border pt-8">
                        @foreach ($stats as $stat)
                            <div><dt class="text-sm text-muted-foreground">{{ __($stat['label']) }}</dt><dd class="mt-0.5 text-2xl font-bold tabular-nums text-foreground">{{ $stat['value'] }}</dd></div>
                        @endforeach
                    </dl>
                @endif
            </div>

            <div class="flex flex-col gap-4">
                @foreach ($services as $service)
                    <x-ui.card class="group flex flex-row items-start gap-6 p-6 transition-shadow hover:shadow-md">
                        <x-ui.icon.tile class="mt-0.5">
                            <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$service['icon']] ?? $icons['strategy'] !!}</svg>
                        </x-ui.icon.tile>
                        <div class="flex flex-1 flex-col gap-2">
                            <div class="flex flex-wrap items-center gap-2">
                                <x-ui.card.title class="text-sm">{{ __($service['title']) }}</x-ui.card.title>
                                @if (! empty($service['badge']))<x-ui.badge size="sm" variant="secondary">{{ __($service['badge']) }}</x-ui.badge>@endif
                            </div>
                            <x-ui.card.description class="text-pretty leading-relaxed">{{ __($service['description']) }}</x-ui.card.description>
                            <x-ui.button :href="$service['href'] ?? '#'" variant="link" :with-arrow="true" class="mt-2 w-fit">{{ __('Learn more') }}</x-ui.button>
                        </div>
                    </x-ui.card>
                @endforeach
            </div>
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/features-services-split

Installs these dependencies automatically:

badge button card container icon section

Registry contract

Install confidence

php artisan ui:add blocks/features-services-split 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/features-services-split.blade.php

Registry dependencies

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

features-services-split.md

# Brok UI block: Services Split (`features-services-split`)

A services section with a sticky intro and call-to-action column beside a stacked column of compact service cards.

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/features-services-split
```

## Render it

```blade
<x-blocks.features-services-split />
```

## Props

- `eyebrow` (string, default `What we offer`) — Small label shown above the heading.
- `heading` (string, default `Expert services that scale with your ambitions`) — Section heading.
- `lead` (string, default `We partner with ambitious teams to design, build, and ship products that stand out — combining strategic thinking with hands-on craft at every stage.`) — Supporting lead paragraph under the heading.
- `support` (string, default `Whether you are launching something new or evolving what you already have, we move fast without cutting corners.`) — Second supporting paragraph under the lead.
- `cta-label` (string, default `Start a project`) — Call-to-action button label.
- `cta-href` (string, default `#contact`) — Call-to-action destination.
- `stats` (mixed|null, default `null`) — Small stat pairs shown under the CTA; null falls back to sample data.
- `services` (mixed|null, default `null`) — Service entries with an icon, title, description and optional badge; null falls back to sample data.

## Use when

- Presenting services beside a sticky intro column that carries a call to action and stats.
- Wanting the pitch to stay in view while the visitor scrolls a stacked list of services.

## Avoid when

- Wanting a simple grid or alternating rows without a sticky intro; use features-services-cards or features-services-rows instead.

## Rules

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

Ask about Services Split 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

Presenting services beside a sticky intro column that carries a call to action and stats.
Wanting the pitch to stay in view while the visitor scrolls a stacked list of services.

Avoid when

Wanting a simple grid or alternating rows without a sticky intro; use features-services-cards or features-services-rows instead.

Anti-patterns

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

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.features-services-split />

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.