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-cards.blade.php Blade

@props([
    'eyebrow' => 'What we do',
    'heading' => 'Services built to move your product forward',
    'subheading' => 'From first sketch to production launch, our team covers every layer of the stack so you can ship with confidence.',
    'services' => null,
])

@php
    $services ??= [
        [
            'title' => 'Product Strategy',
            'description' => 'We turn fuzzy ideas into a sharp, validated roadmap — research, positioning, and a plan your whole team can rally behind.',
            'href' => '#',
            'icon' => 'compass',
            'highlight' => false,
            'badge' => null,
        ],
        [
            'title' => 'UI & UX Design',
            'description' => 'Accessible, on-brand interfaces grounded in a real design-token system, prototyped fast and handed off pixel-perfect.',
            'href' => '#',
            'icon' => 'palette',
            'highlight' => false,
            'badge' => null,
        ],
        [
            'title' => 'Web Engineering',
            'description' => 'Fast, maintainable apps you own outright — clean Laravel and Blade, no runtime lock-in, no upgrade anxiety.',
            'href' => '#',
            'icon' => 'code',
            'highlight' => true,
            'badge' => 'Most popular',
        ],
        [
            'title' => 'Performance & SEO',
            'description' => 'Core Web Vitals tuning, structured data, and a metadata strategy that gets you found and keeps you fast.',
            'href' => '#',
            'icon' => 'gauge',
            'highlight' => false,
            'badge' => null,
        ],
        [
            'title' => 'Cloud & DevOps',
            'description' => 'Reproducible deploys, observability, and CI pipelines so every release lands cleanly and rolls back safely.',
            'href' => '#',
            'icon' => 'cloud',
            'highlight' => false,
            'badge' => null,
        ],
        [
            'title' => 'Ongoing Support',
            'description' => 'A dedicated partner on call for fixes, iterations, and the small things that keep your product feeling cared for.',
            'href' => '#',
            'icon' => 'support',
            'highlight' => false,
            'badge' => null,
        ],
    ];

    $icons = [
        'compass' => '<circle cx="12" cy="12" r="9" /><path d="m15.5 8.5-2.4 5.6-5.6 2.4 2.4-5.6 5.6-2.4Z" />',
        'palette' => '<circle cx="13.5" cy="6.5" r="1" /><circle cx="17.5" cy="10.5" r="1" /><circle cx="8.5" cy="7.5" r="1" /><circle cx="6.5" cy="12.5" r="1" /><path d="M12 2a10 10 0 0 0 0 20 2.5 2.5 0 0 0 2-4 2.5 2.5 0 0 1 2-4h2a4 4 0 0 0 4-4 10 10 0 0 0-10-8Z" />',
        'code' => '<path d="m16 18 6-6-6-6" /><path d="m8 6-6 6 6 6" /><path d="m14.5 4-5 16" />',
        'gauge' => '<path d="m12 14 4-4" /><path d="M3.34 19a10 10 0 1 1 17.32 0" /><circle cx="12" cy="14" r="1.5" />',
        'cloud' => '<path d="M17.5 19a4.5 4.5 0 1 0-1.4-8.78 6 6 0 1 0-11.4 3.3A4 4 0 0 0 6 19h11.5Z" />',
        'support' => '<path d="M4 18v-6a8 8 0 0 1 16 0v6" /><path d="M20 19a2 2 0 0 1-2 2h-1.5" /><rect x="2" y="14" width="4" height="6" rx="1" /><rect x="18" y="14" width="4" height="6" rx="1" />',
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container gutter="sm">
        <x-ui.section-heading align="center" overline-style="label" :overline="$eyebrow" :title="$heading" :subtitle="$subheading" />

        <div class="mt-12 grid grid-cols-1 gap-6 sm:mt-16 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($services as $service)
                <x-ui.card
                    @class([
                        'group relative flex h-full flex-col gap-6 p-6 transition-shadow hover:shadow-md',
                        'border-primary ring-1 ring-primary' => $service['highlight'] ?? false,
                    ])
                >
                    @if (! empty($service['badge']))
                        <x-ui.badge class="absolute end-6 top-6">{{ __($service['badge']) }}</x-ui.badge>
                    @endif

                    <x-ui.icon.tile size="lg">
                        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                            {!! $icons[$service['icon']] ?? $icons['compass'] !!}
                        </svg>
                    </x-ui.icon.tile>

                    <div class="flex flex-1 flex-col gap-2">
                        <h3 class="text-lg font-semibold text-foreground">{{ __($service['title']) }}</h3>
                        <p class="text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($service['description']) }}</p>
                    </div>

                    <x-ui.button :href="$service['href'] ?? '#'" variant="link" :with-arrow="true" class="mt-2 w-fit">{{ __('Learn more') }}</x-ui.button>
                </x-ui.card>
            @endforeach
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal

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

Installs these dependencies automatically:

badge button card container icon section section-heading

Registry contract

Install confidence

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

Registry dependencies

badge button card container icon section section-heading

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-cards.md

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

A centered eyebrow, heading, and subheading above a responsive 1-to-3-column grid of service cards, each with a rounded icon chip, title, description, optional highlight badge, and a RTL-aware "Learn more" ghost button.

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

## Render it

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

## Props

- `eyebrow` (string, default `What we do`) — Small label shown above the heading.
- `heading` (string, default `Services built to move your product forward`) — Section heading.
- `subheading` (string, default `From first sketch to production launch, our team covers every layer of the stack so you can ship with confidence.`) — Supporting copy under the heading.
- `services` (mixed|null, default `null`) — Service entries with a title, description, icon and optional highlight badge; null falls back to sample data.

## Use when

- Presenting a company's services as a responsive grid of icon cards with a title, description and optional highlight badge.
- Wanting services scanned side by side in a compact grid rather than detailed rows.

## Avoid when

- Wanting alternating media rows with more detail per service; use features-services-rows instead. Wanting a sticky intro column beside a stacked list; use features-services-split instead.

## Rules

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

Ask about Services 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 a company's services as a responsive grid of icon cards with a title, description and optional highlight badge.
Wanting services scanned side by side in a compact grid rather than detailed rows.

Avoid when

Wanting alternating media rows with more detail per service; use features-services-rows instead. Wanting a sticky intro column beside a stacked list; use features-services-split 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-cards />

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.