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

@props([
    'heading' => 'One platform, every angle covered',
    'subheading' => 'Hover or focus a panel to expand it and see how each capability fits into the way your team already works.',
    'panels' => null,
])

@php
    $panels ??= [
        [
            'title' => 'Deploy',
            'badge' => 'Pipelines',
            'body' => 'Push to any branch and watch your changes go live in seconds. The build layer detects your stack, caches dependencies, and streams logs as it runs.',
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5 10.5 6.75 14.25 10.5l5.25-5.25M21 3h-6m6 0v6" />',
        ],
        [
            'title' => 'Collaborate',
            'badge' => 'Reviews',
            'body' => 'Invite teammates to comment on any line, suggest edits, and approve changes inside a single audit trail your whole organisation can trust.',
            'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />',
        ],
        [
            'title' => 'Secure',
            'badge' => 'Access',
            'body' => 'Grant or revoke permissions at the workspace, project, or file level. Role-based policies plug into your identity provider via SAML or OAuth 2.0.',
            'icon' => '<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" />',
        ],
        [
            'title' => 'Measure',
            'badge' => 'Insights',
            'body' => 'Understand how your product is used with real-time dashboards, retention curves, and funnel analysis — no third-party script required.',
            'icon' => '<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" />',
        ],
    ];
@endphp

<x-ui.section data-slot="features-14" space="xl" {{ $attributes }}>
    <x-ui.container size="xl" gutter="sm">
        <x-ui.section-heading align="center" :title="$heading" :subtitle="$subheading" />

        <div
            x-data="{ active: 0 }"
            class="mt-12 flex flex-col gap-4 lg:mt-16 lg:flex-row lg:gap-4"
        >
            @foreach ($panels as $index => $panel)
                {{-- Non-interactive panel: the reveal is driven by hovering it or
                     focusing the one real interactive control inside (the "Learn
                     more" button below), never by nesting a button in a button. --}}
                <div
                    x-on:mouseenter="active = {{ $index }}"
                    x-on:focusin="active = {{ $index }}"
                    x-on:click="active = {{ $index }}"
                    :class="active === {{ $index }} ? 'lg:flex-[3]' : 'lg:flex-[1]'"
                    class="group relative flex min-h-72 w-full flex-col justify-end overflow-hidden rounded-lg border border-border bg-muted text-start transition-all duration-500 lg:min-h-[28rem] lg:flex-[1]"
                >
                    {{-- Image placeholder area --}}
                    <span class="pointer-events-none absolute inset-0 flex items-center justify-center" aria-hidden="true">
                        <span class="flex size-14 items-center justify-center rounded-lg bg-background/70 text-muted-foreground ring-1 ring-border backdrop-blur-sm">
                            {{-- TRUST BOUNDARY: `icon` is rendered as raw SVG markup ({!! !!}); it must be
                                 developer-authored path data, never user/CMS input. To render icons chosen
                                 at runtime, switch to an internal key => svg map (see weather-widget-01). --}}
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="size-7" aria-hidden="true">{!! $panel['icon'] !!}</svg>
                        </span>
                    </span>

                    {{-- Bottom gradient scrim for label legibility --}}
                    <span class="pointer-events-none absolute inset-x-0 bottom-0 h-2/3 bg-gradient-to-t from-background via-background/70 to-transparent" aria-hidden="true"></span>

                    {{-- Label + revealed content --}}
                    <span class="relative flex flex-col gap-4 p-6">
                        <span class="flex items-center justify-between gap-4">
                            <span class="text-lg font-semibold text-foreground">{{ __($panel['title']) }}</span>
                            @if (! empty($panel['badge']))
                                <x-ui.badge variant="secondary">{{ __($panel['badge']) }}</x-ui.badge>
                            @endif
                        </span>

                        {{-- Reveal: visible on mobile (stacked), fades in for the active panel on lg --}}
                        <span
                            class="flex flex-col gap-4 transition-opacity duration-500 lg:opacity-0"
                            :class="active === {{ $index }} ? 'lg:opacity-100' : 'lg:opacity-0'"
                        >
                            <span class="text-sm leading-relaxed text-muted-foreground">{{ __($panel['body']) }}</span>
                            <x-ui.button variant="outline" size="sm" x-bind:aria-expanded="(active === {{ $index }}).toString()" class="self-start">
                                {{ __('Learn more') }}
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="ms-2 size-4 rtl:rotate-180" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
                                </svg>
                            </x-ui.button>
                        </span>
                    </span>
                </div>
            @endforeach
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/features-panels

Installs these dependencies automatically:

badge button container section section-heading

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/features-panels.blade.php

Registry dependencies

badge button container section section-heading

Package dependencies

composer: jml/brok:^0.2

npm: alpinejs

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

# Brok UI block: Features Panels (`features-panels`)

A horizontal row of expanding feature panels (an image accordion): each tall muted panel carries a title, icon, and badge label, and on large screens the active panel grows on hover/focus to reveal its body copy and a Learn more button while the others shrink, stacking fully open on mobile.

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

## Render it

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

## Props

- `heading` (string, default `One platform, every angle covered`)
- `subheading` (string, default `Hover or focus a panel to expand it and see how each capability fits into the way your team already works.`)
- `panels` (mixed|null, default `null`)

## Use when

- Showing a horizontal row of tall feature panels that expand on hover or focus to reveal body copy and a Learn more button.
- Collapsing the panels back to an icon-and-title strip once the pointer or focus moves away, stacking fully open on mobile.

## Avoid when

- Use features-accordion for a click-driven accordion instead of a hover/focus-driven expanding-panel row.

## Rules

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

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

Showing a horizontal row of tall feature panels that expand on hover or focus to reveal body copy and a Learn more button.
Collapsing the panels back to an icon-and-title strip once the pointer or focus moves away, stacking fully open on mobile.

Avoid when

Use features-accordion for a click-driven accordion instead of a hover/focus-driven expanding-panel row.

Anti-patterns

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

Anatomy: root features-14

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.features-panels />

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.