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

@props([
    'heading'     => 'See every moving part at a glance',
    'subheading'  => 'One workspace surfaces the metrics, controls, and context your team needs — annotated here so you know exactly where each capability lives.',
    'callouts'    => null,
    'cta'         => 'Explore the dashboard',
    'ctaHref'     => '#',
    'screenshotAlt' => 'Annotated product dashboard',
])

@php
    $callouts ??= [
        ['number' => 1, 'title' => 'Live activity feed',   'body' => 'Every event streams in real time so nothing slips past your team.',          'icon' => 'pulse',    'x' => 24, 'y' => 30],
        ['number' => 2, 'title' => 'Smart filters',         'body' => 'Slice any view by owner, status, or date without writing a query.',          'icon' => 'filter',   'x' => 76, 'y' => 22],
        ['number' => 3, 'title' => 'Trend insights',        'body' => 'Built-in charts highlight what changed and why, at a glance.',               'icon' => 'chart',    'x' => 70, 'y' => 68],
        ['number' => 4, 'title' => 'One-click actions',     'body' => 'Resolve, assign, or escalate straight from the card you are reading.',        'icon' => 'bolt',     'x' => 30, 'y' => 74],
    ];

    $icons = [
        'pulse'  => '<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h3l2.25 6 4.5-13.5 2.25 7.5h4.5"/>',
        'filter' => '<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.5h16.5l-6.375 7.5v6l-3.75 2.25v-8.25L3.75 4.5Z"/>',
        'chart'  => '<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v16.5a.75.75 0 0 0 .75.75H21M7.5 15l3-3 3 3 4.5-5.25"/>',
        '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"/>',
    ];
@endphp

<x-ui.section data-slot="features-15" space="xl" class="relative overflow-hidden" {{ $attributes }}>
    <div aria-hidden="true" class="pointer-events-none absolute inset-x-0 top-1/3 -z-10 flex justify-center">
        <div class="h-64 w-[48rem] rounded-full bg-primary/5 blur-3xl"></div>
    </div>

    <x-ui.container gutter="sm">
        <div class="mx-auto max-w-2xl text-center">
            <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            @if ($subheading)
                <p class="mt-4 text-base leading-relaxed text-muted-foreground">{{ __($subheading) }}</p>
            @endif
        </div>

        {{-- Annotated screenshot — pins are decorative/visual; the list below is the accessible source of truth --}}
        <div class="relative mt-14 sm:mt-16">
            <x-ui.mockup type="window" size="lg" class="relative mx-auto max-w-4xl shadow-foreground/5">

                {{-- Screen area placeholder --}}
                <div role="img" aria-label="{{ __($screenshotAlt) }}" class="relative aspect-[16/10] bg-muted">
                    <div aria-hidden="true" class="flex h-full gap-4 p-4 sm:p-6">
                        <div class="hidden w-44 shrink-0 flex-col gap-2 sm:flex">
                            <div class="h-4 w-3/4 rounded bg-muted-foreground/20"></div>
                            <div class="mt-2 space-y-2">
                                <div class="h-7 w-full rounded-md bg-primary/15"></div>
                                <div class="h-7 w-full rounded-md bg-muted-foreground/10"></div>
                                <div class="h-7 w-5/6 rounded-md bg-muted-foreground/10"></div>
                                <div class="h-7 w-full rounded-md bg-muted-foreground/10"></div>
                            </div>
                        </div>
                        <div class="flex flex-1 flex-col gap-4 overflow-hidden">
                            <div class="flex items-center gap-4">
                                <div class="h-6 w-32 rounded-md bg-muted-foreground/20"></div>
                                <div class="ms-auto flex gap-2">
                                    <div class="h-6 w-16 rounded-md bg-muted-foreground/10"></div>
                                    <div class="h-6 w-16 rounded-md bg-primary/20"></div>
                                </div>
                            </div>
                            <div class="grid grid-cols-3 gap-4">
                                <div class="space-y-2 rounded-lg border border-border bg-background p-6"><div class="h-3 w-2/3 rounded bg-muted-foreground/20"></div><div class="h-5 w-1/2 rounded bg-muted-foreground/30"></div></div>
                                <div class="space-y-2 rounded-lg border border-border bg-background p-6"><div class="h-3 w-2/3 rounded bg-muted-foreground/20"></div><div class="h-5 w-1/2 rounded bg-muted-foreground/30"></div></div>
                                <div class="space-y-2 rounded-lg border border-border bg-background p-6"><div class="h-3 w-2/3 rounded bg-muted-foreground/20"></div><div class="h-5 w-1/2 rounded bg-muted-foreground/30"></div></div>
                            </div>
                            <div class="flex flex-1 items-end gap-2 overflow-hidden rounded-lg border border-border bg-background p-6">
                                <div class="h-1/2 w-4 rounded-t bg-primary/40"></div>
                                <div class="h-3/4 w-4 rounded-t bg-primary/40"></div>
                                <div class="h-2/5 w-4 rounded-t bg-primary/60"></div>
                                <div class="h-5/6 w-4 rounded-t bg-primary/60"></div>
                                <div class="h-3/5 w-4 rounded-t bg-primary/80"></div>
                                <div class="h-full w-4 rounded-t bg-primary"></div>
                            </div>
                        </div>
                    </div>

                    {{-- Numbered pins — desktop only, positioned by percentage; mirror the list below --}}
                    <div aria-hidden="true" class="hidden lg:block">
                        @foreach ($callouts as $callout)
                            <span class="absolute flex size-7 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border-2 border-background bg-primary text-sm font-bold text-primary-foreground shadow-lg shadow-foreground/20 rtl:translate-x-1/2" style="inset-inline-start: {{ $callout['x'] }}%; inset-block-start: {{ $callout['y'] }}%;">{{ $callout['number'] }}</span>
                        @endforeach
                    </div>
                </div>
            </x-ui.mockup>

            {{-- Decorative connector arc beneath the frame --}}
            <svg aria-hidden="true" class="pointer-events-none absolute inset-x-0 -bottom-6 -z-10 mx-auto hidden h-12 w-3/4 text-border lg:block" viewBox="0 0 600 48" fill="none" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" d="M30 0v24a12 12 0 0 0 12 12h516a12 12 0 0 0 12-12V0"/>
            </svg>
        </div>

        {{-- Callout list — shared numbering; the fully-usable view on every screen size --}}
        <ol class="mx-auto mt-12 grid max-w-4xl gap-4 sm:grid-cols-2">
            @foreach ($callouts as $callout)
                <li>
                    <x-ui.card class="flex h-full items-start gap-4 p-6">
                        <x-ui.badge variant="default" class="flex size-8 shrink-0 items-center justify-center rounded-full p-0 text-sm font-bold tabular-nums">{{ $callout['number'] }}</x-ui.badge>
                        <div class="min-w-0">
                            <div class="flex items-center gap-2">
                                <span aria-hidden="true" class="inline-flex size-7 items-center justify-center rounded-md bg-primary/10 text-primary">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-4" aria-hidden="true">{!! $icons[$callout['icon']] ?? $icons['bolt'] !!}</svg>
                                </span>
                                <h3 class="text-sm font-semibold leading-snug tracking-tight">{{ __($callout['title']) }}</h3>
                            </div>
                            <p class="mt-2 text-sm leading-relaxed text-muted-foreground">{{ __($callout['body']) }}</p>
                        </div>
                    </x-ui.card>
                </li>
            @endforeach
        </ol>

        @if ($cta)
            <div class="mt-10 flex justify-center">
                <x-ui.button variant="default" :href="$ctaHref" :with-arrow="true">{{ __($cta) }}</x-ui.button>
            </div>
        @endif
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/features-showcase

Installs these dependencies automatically:

badge button card container mockup section

Registry contract

Install confidence

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

Registry dependencies

badge button card container mockup 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-showcase.md

# Brok UI block: Features Showcase (`features-showcase`)

An annotated product showcase: a heading and subheading above one large app-window screenshot placeholder (window chrome with three tokened dots over a muted screen area), overlaid on desktop with numbered feature pins positioned by percentage. The same callouts render below as a numbered grid of cards with an icon, title, and one-line caption, so the section stays fully usable on mobile where the absolute pins collapse, plus an optional primary CTA 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-showcase
```

## Render it

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

## Props

- `heading` (string, default `See every moving part at a glance`)
- `subheading` (string, default `One workspace surfaces the metrics, controls, and context your team needs — annotated here so you know exactly where each capability lives.`)
- `callouts` (mixed|null, default `null`)
- `cta` (string, default `Explore the dashboard`)
- `cta-href` (string, default `#`)
- `screenshot-alt` (string, default `Annotated product dashboard`)

## Use when

- Annotating a large app-window screenshot placeholder with numbered feature pins positioned by percentage on desktop.
- Repeating the same callouts as a numbered card grid below so the section stays usable once the pins collapse on mobile.

## Avoid when

- Use features-grid or features-cards if there is no screenshot to annotate with numbered pins.

## Rules

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

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

Annotating a large app-window screenshot placeholder with numbered feature pins positioned by percentage on desktop.
Repeating the same callouts as a numbered card grid below so the section stays usable once the pins collapse on mobile.

Avoid when

Use features-grid or features-cards if there is no screenshot to annotate with numbered pins.

Anti-patterns

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

Anatomy: root features-15

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.features-showcase />

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.