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

@props([
    'eyebrow' => 'Why teams switch',
    'heading' => 'Everything in one editorial canvas',
    'subheading' => 'A flexible bento layout that mixes headline numbers, media, social proof, and a clear call to action — arranged across varied spans so it reads like a magazine spread.',
    'stat' => null,
    'media' => null,
    'integrations' => null,
    'quote' => null,
    'cta' => null,
])

@php
    $stat ??= [
        'value' => '99.98%',
        'label' => 'Uptime across every region',
        'caption' => 'Measured over the last 12 months on production traffic.',
        'badge' => 'Reliability',
    ];

    $media ??= [
        'badge' => 'Live preview',
        'title' => 'See it in motion',
        'caption' => 'A guided product tour your whole team can follow.',
    ];

    $integrations ??= [
        'title' => 'Plays well with your stack',
        'caption' => 'Connect the tools you already use in a couple of clicks.',
        'logos' => ['Slack', 'Linear', 'Figma', 'Notion', 'GitHub', 'Stripe'],
    ];

    $quote ??= [
        'text' => 'We replaced three internal tools in a single afternoon. The team has never shipped this fast.',
        'author' => 'Priya Anand',
        'role' => 'VP Engineering, Northwind',
    ];

    $cta ??= [
        'heading' => 'Ready to build?',
        'caption' => 'Start free — no credit card, no lock-in.',
        'label' => 'Get started',
        'href' => '#',
    ];
@endphp

<x-ui.section data-slot="bento-grid" space="xl" {{ $attributes }}>
    <x-ui.container gutter="sm">
        <x-ui.section-heading align="start" overline-style="badge" :overline="$eyebrow" :title="$heading" :subtitle="$subheading" />

        <x-ui.bento :cols="3" :gap="6" class="mt-12">
            {{-- Big-stat headline tile --}}
            <x-ui.bento.item :colSpan="2" class="flex flex-col justify-between">
                <div>
                    @if (! empty($stat['badge']))
                        <x-ui.badge variant="outline" class="mb-4">{{ __($stat['badge']) }}</x-ui.badge>
                    @endif
                    <p class="text-3xl font-bold tracking-tight sm:text-4xl">{{ $stat['value'] }}</p>
                    <p class="mt-4 text-lg font-medium text-foreground">{{ __($stat['label']) }}</p>
                </div>
                @if (! empty($stat['caption']))
                    <p class="mt-6 max-w-md text-sm text-muted-foreground">{{ __($stat['caption']) }}</p>
                @endif
            </x-ui.bento.item>

            {{-- Media / placeholder tile --}}
            <x-ui.bento.item class="flex flex-col">
                @if (! empty($media['badge']))
                    <x-ui.badge variant="secondary" class="mb-4 self-start">{{ __($media['badge']) }}</x-ui.badge>
                @endif
                <div class="relative flex flex-1 items-center justify-center overflow-hidden rounded-lg border border-border bg-muted" role="img" aria-label="{{ __('Product preview placeholder') }}">
                    <div class="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent" aria-hidden="true"></div>
                    <span class="relative inline-flex size-12 items-center justify-center rounded-full bg-background/80 text-primary shadow-sm">
                        <svg class="ms-0.5 size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path d="M8 5v14l11-7z" />
                        </svg>
                    </span>
                </div>
                <h3 class="mt-4 font-semibold text-foreground">{{ __($media['title']) }}</h3>
                <p class="mt-2 text-sm text-muted-foreground">{{ __($media['caption']) }}</p>
            </x-ui.bento.item>

            {{-- Testimonial / quote tile --}}
            <x-ui.bento.item class="flex flex-col justify-between">
                <figure class="flex h-full flex-col justify-between">
                    <svg class="size-8 text-primary/40" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                        <path d="M7.17 6A5.17 5.17 0 0 0 2 11.17V18h6.83v-6.83H5.5A1.67 1.67 0 0 1 7.17 9.5V6Zm9 0A5.17 5.17 0 0 0 11 11.17V18h6.83v-6.83H14.5A1.67 1.67 0 0 1 16.17 9.5V6Z" />
                    </svg>
                    <blockquote class="mt-4 text-pretty text-sm font-medium text-foreground">{{ __($quote['text']) }}</blockquote>
                    <figcaption class="mt-6">
                        <div class="font-semibold text-foreground">{{ $quote['author'] }}</div>
                        <div class="text-sm text-muted-foreground">{{ __($quote['role']) }}</div>
                    </figcaption>
                </figure>
            </x-ui.bento.item>

            {{-- Integrations tile --}}
            <x-ui.bento.item :colSpan="2">
                <h3 class="font-semibold text-foreground">{{ __($integrations['title']) }}</h3>
                <p class="mt-2 text-sm text-muted-foreground">{{ __($integrations['caption']) }}</p>
                <ul role="list" class="mt-6 grid grid-cols-3 gap-4 sm:grid-cols-6">
                    @foreach ($integrations['logos'] as $logo)
                        <li class="flex aspect-square items-center justify-center rounded-md border border-border bg-muted/60 px-2 text-center text-sm font-medium text-muted-foreground">
                            {{ $logo }}
                        </li>
                    @endforeach
                </ul>
            </x-ui.bento.item>

            {{-- CTA tile --}}
            <x-ui.bento.item class="flex flex-col justify-between bg-primary/5">
                <div>
                    <h3 class="text-lg font-semibold tracking-tight text-foreground">{{ __($cta['heading']) }}</h3>
                    <p class="mt-2 text-sm text-muted-foreground">{{ __($cta['caption']) }}</p>
                </div>
                <x-ui.button :href="$cta['href']" class="mt-6 w-full" :withArrow="true">{{ __($cta['label']) }}</x-ui.button>
            </x-ui.bento.item>
        </x-ui.bento>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/features-bento-grid

Installs these dependencies automatically:

badge bento button container section section-heading

Registry contract

Install confidence

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

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

Registry dependencies

badge bento button container 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-bento-grid.md

# Brok UI block: Bento Grid (`features-bento-grid`)

An editorial marketing bento mixing a big-stat headline tile, a media placeholder, an integrations logo grid, a testimonial quote, and a CTA tile across varied spans.

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-bento-grid
```

## Render it

```blade
<x-blocks.features-bento-grid />
```

## Props

- `eyebrow` (string, default `Why teams switch`)
- `heading` (string, default `Everything in one editorial canvas`)
- `subheading` (string, default `A flexible bento layout that mixes headline numbers, media, social proof, and a clear call to action — arranged across varied spans so it reads like a magazine spread.`)
- `stat` (mixed|null, default `null`)
- `media` (mixed|null, default `null`)
- `integrations` (mixed|null, default `null`)
- `quote` (mixed|null, default `null`)
- `cta` (mixed|null, default `null`)

## Use when

- Mixing a big-stat headline tile, a media placeholder, an integrations logo grid and a testimonial in one editorial bento layout.
- Closing the mosaic with a dedicated CTA tile among the varied-span cells.

## Avoid when

- Use features-bento-showcase for a hero-screenshot-led product bento, or features-bento-tiles for a feature-focused bento grid.

## Rules

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

Ask about Bento Grid 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

Mixing a big-stat headline tile, a media placeholder, an integrations logo grid and a testimonial in one editorial bento layout.
Closing the mosaic with a dedicated CTA tile among the varied-span cells.

Avoid when

Use features-bento-showcase for a hero-screenshot-led product bento, or features-bento-tiles for a feature-focused bento grid.

Anti-patterns

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

Anatomy: root bento-grid

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.features-bento-grid />

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.