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

@props([
    'eyebrow'  => 'Built for results',
    'heading'  => 'Features proven by the numbers',
    'lead'     => 'Every capability ships with a track record. Real benchmarks, real teams, real outcomes.',
    'features' => null,
])

@php
    $features ??= [
        ['metric' => '98%', 'trend' => '↑ vs manual', 'icon' => 'bolt', 'title' => 'Less setup time', 'description' => 'Zero-config defaults get your project running in under a minute.'],
        ['metric' => '3×', 'trend' => '↑ throughput', 'icon' => 'chart', 'title' => 'Faster queries', 'description' => 'Optimised data layer cuts response times across all read paths.'],
        ['metric' => '99.9%', 'trend' => '↑ reliability', 'icon' => 'shield', 'title' => 'Uptime guarantee', 'description' => 'Redundant infrastructure keeps your app available around the clock.'],
        ['metric' => '4.8×', 'trend' => '↑ dev velocity', 'icon' => 'code', 'title' => 'Faster to ship', 'description' => 'Composable primitives remove boilerplate so teams focus on product.'],
        ['metric' => '60%', 'trend' => '↓ bundle size', 'icon' => 'down', 'title' => 'Smaller footprint', 'description' => 'Tree-shaken, zero-runtime CSS keeps your pages light and fast.'],
        ['metric' => '10k+', 'trend' => '↑ daily users', 'icon' => 'users', 'title' => 'Proven at scale', 'description' => 'Powering production apps across dozens of industries worldwide.'],
    ];

    $icons = [
        'bolt' => '<path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/>',
        'chart' => '<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"/>',
        'shield' => '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/>',
        'code' => '<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"/>',
        'down' => '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6 9 12.75l4.286-4.286a11.948 11.948 0 0 1 4.306 6.43l.776 2.898m0 0 3.182-5.511m-3.182 5.51-5.511-3.181"/>',
        'users' => '<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/>',
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container size="xl" gutter="sm">
        <div class="mx-auto max-w-2xl text-center">
            <p class="text-sm font-semibold uppercase tracking-widest text-primary">{{ __($eyebrow) }}</p>
            <h2 class="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            <p class="mt-4 text-lg text-muted-foreground">{{ __($lead) }}</p>
        </div>

        <div class="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($features as $feature)
                <x-ui.card class="flex flex-col gap-4 p-6">
                    <div class="flex items-end gap-4">
                        <span class="text-3xl font-bold tracking-tight text-foreground">{{ $feature['metric'] }}</span>
                        <x-ui.badge variant="success" size="sm" class="mb-0.5 shrink-0">{{ __($feature['trend']) }}</x-ui.badge>
                    </div>
                    <x-ui.icon.tile>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-5" aria-hidden="true">{!! $icons[$feature['icon']] ?? $icons['bolt'] !!}</svg>
                    </x-ui.icon.tile>
                    <div>
                        <h3 class="font-semibold text-foreground">{{ __($feature['title']) }}</h3>
                        <p class="mt-2 text-sm leading-relaxed text-muted-foreground">{{ __($feature['description']) }}</p>
                    </div>
                </x-ui.card>
            @endforeach
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/features-metrics

Installs these dependencies automatically:

badge card container icon section

Registry contract

Install confidence

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

Registry dependencies

badge 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-metrics.md

# Brok UI block: Features Metrics (`features-metrics`)

A feature section whose cards each lead with a headline metric and up-trend badge above an icon, title and description — features proven by numbers.

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

## Render it

```blade
<x-blocks.features-metrics />
```

## Props

- `eyebrow` (string, default `Built for results`)
- `heading` (string, default `Features proven by the numbers`)
- `lead` (string, default `Every capability ships with a track record. Real benchmarks, real teams, real outcomes.`)
- `features` (mixed|null, default `null`)

## Use when

- Leading each feature card with a headline metric and an up-trend badge above the icon, title and description.
- Fitting a feature set you want to prove with numbers rather than describe qualitatively.

## Avoid when

- Use features-grid or features-cards for feature cards without a leading metric.

## Rules

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

Ask about Features Metrics 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

Leading each feature card with a headline metric and an up-trend badge above the icon, title and description.
Fitting a feature set you want to prove with numbers rather than describe qualitatively.

Avoid when

Use features-grid or features-cards for feature cards without a leading metric.

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-metrics />

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.