Features
Feature sections — icon grids, bordered cards, alternating media rows, bento layouts, a services variant and an industries grid.
Preview
resources/views/blocks/features-bento-tiles.blade.php
@props([
'eyebrow' => 'Built for how you work',
'heading' => 'Every feature where you need it',
'subheading' => 'Purpose-built capabilities that remove friction at every step — from first install to production.',
'highlight' => null,
'tiles' => null,
])
@php
$highlight ??= [
'badge' => 'New', 'icon' => 'workflow', 'title' => 'Visual workflow builder',
'description' => 'Chain actions, conditions, and integrations on a drag-free canvas. Every step is a reusable block you own outright.',
'preview_rows' => [['label' => 'Trigger', 'width' => 'w-20'], ['label' => 'Filter', 'width' => 'w-28'], ['label' => 'Action', 'width' => 'w-24'], ['label' => 'Notify', 'width' => 'w-16']],
];
$tiles ??= [
['icon' => 'bolt', 'title' => 'Instant deployments', 'description' => 'Push to any environment in seconds. Zero-downtime blue-green swaps baked in by default.', 'tall' => true],
['icon' => 'lock', 'title' => 'Role-based access', 'description' => 'Granular permissions per workspace, project, and resource — no over-sharing by accident.', 'tall' => false],
['icon' => 'globe', 'title' => 'Edge-ready CDN', 'description' => 'Static assets served from 200+ PoPs globally with automatic cache invalidation.', 'tall' => false],
['icon' => 'chart', 'title' => 'Observability built in', 'description' => 'Logs, traces, and error rates surface in the same dashboard as your deploys.', 'tall' => false],
['icon' => 'puzzle', 'title' => 'Composable plugins', 'description' => 'Mix-and-match first-party and community plugins. Each ships as a plain Blade package.', 'tall' => false],
];
$icons = [
'workflow' => '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><path d="M10 6.5h4M17.5 10v4M10 17.5H7a1 1 0 0 1-1-1V10"/>',
'bolt' => '<path d="M13 2 4.5 13.5H12L11 22l8.5-11.5H12L13 2Z"/>',
'lock' => '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
'globe' => '<circle cx="12" cy="12" r="9"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2Z"/>',
'chart' => '<path d="M3 3v18h18"/><path d="m7 16 4-4 4 4 4-6"/>',
'puzzle' => '<path d="M12.5 3a1.5 1.5 0 0 0-1 2.6V7H9a2 2 0 0 0-2 2v1.4a1.5 1.5 0 1 0 0 2.2V14h2.5v1.4a1.5 1.5 0 1 0 2.2 0V14H14a2 2 0 0 0 2-2v-1.4a1.5 1.5 0 1 0-2.2-2.2V8h-1.3V5.6A1.5 1.5 0 0 0 12.5 3Z"/>',
];
$tallTile = collect($tiles)->firstWhere('tall', true);
$standardTiles = collect($tiles)->where('tall', false)->values();
@endphp
<x-ui.section data-slot="bento-features" space="xl" {{ $attributes }}>
<x-ui.container gutter="sm">
<x-ui.section-heading align="center" overline-style="badge" :overline="$eyebrow" :title="$heading" :subtitle="$subheading" />
<x-ui.bento :cols="3" :gap="4" class="mt-12">
<x-ui.bento.item :col-span="2" class="flex flex-col gap-6">
<div class="flex flex-wrap items-start justify-between gap-4">
<div>
<span class="mb-4 inline-flex size-10 items-center justify-center rounded-md border border-border bg-muted text-primary" aria-hidden="true">
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$highlight['icon']] ?? $icons['workflow'] !!}</svg>
</span>
<h3 class="text-lg font-semibold tracking-tight text-foreground">{{ __($highlight['title']) }}</h3>
<p class="mt-2 max-w-md text-sm text-muted-foreground">{{ __($highlight['description']) }}</p>
</div>
@if (! empty($highlight['badge']))
<x-ui.badge variant="default" class="shrink-0">{{ __($highlight['badge']) }}</x-ui.badge>
@endif
</div>
<div class="rounded-lg border border-border bg-muted/50 p-6" role="img" aria-label="{{ __('Illustrative workflow preview') }}">
<div class="flex flex-col gap-2">
@foreach ($highlight['preview_rows'] as $i => $row)
<div class="flex items-center gap-4">
<span class="inline-flex size-6 shrink-0 items-center justify-center rounded-full border border-border bg-background text-sm font-semibold tabular-nums text-muted-foreground">{{ $i + 1 }}</span>
<div class="flex flex-1 items-center gap-2">
<span class="h-2 rounded-full bg-primary/20 {{ $row['width'] }}"></span>
<span class="h-px flex-1 border-t border-dashed border-border"></span>
</div>
<span class="w-16 text-end text-sm text-muted-foreground">{{ __($row['label']) }}</span>
</div>
@endforeach
</div>
</div>
</x-ui.bento.item>
@if ($tallTile)
<x-ui.bento.item :row-span="2" class="flex flex-col justify-between gap-6">
<div>
<span class="mb-4 inline-flex size-10 items-center justify-center rounded-md border border-border bg-muted text-primary" aria-hidden="true">
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$tallTile['icon']] ?? $icons['bolt'] !!}</svg>
</span>
<h3 class="text-lg font-semibold tracking-tight text-foreground">{{ __($tallTile['title']) }}</h3>
<p class="mt-2 text-sm text-muted-foreground">{{ __($tallTile['description']) }}</p>
</div>
<div class="flex flex-col gap-2 rounded-lg border border-border bg-muted/50 p-6" role="img" aria-label="{{ __('Illustrative deployment history') }}">
@foreach (['Production', 'Staging', 'Preview'] as $env)
<div class="flex items-center justify-between gap-4 rounded-md border border-border bg-background px-4 py-2">
<span class="text-sm font-medium text-foreground">{{ __($env) }}</span>
<span class="inline-flex items-center gap-2 text-sm text-success"><span class="size-2 rounded-full bg-success"></span>{{ __('Live') }}</span>
</div>
@endforeach
</div>
</x-ui.bento.item>
@endif
@foreach ($standardTiles as $tile)
<x-ui.bento.item class="flex flex-col gap-4">
<span class="inline-flex size-10 items-center justify-center self-start rounded-md border border-border bg-muted text-primary" aria-hidden="true">
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$tile['icon']] ?? $icons['puzzle'] !!}</svg>
</span>
<div>
<h3 class="font-semibold text-foreground">{{ __($tile['title']) }}</h3>
<p class="mt-2 text-sm text-muted-foreground">{{ __($tile['description']) }}</p>
</div>
</x-ui.bento.item>
@endforeach
</x-ui.bento>
</x-ui.container>
</x-ui.section>Installation
terminal
php artisan ui:add blocks/features-bento-tilesRegistry contract
Install confidence
php artisan ui:add blocks/features-bento-tiles
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-bento-tiles.blade.php |
Registry dependencies
badge
bento
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-tiles.md
# Brok UI block: Bento Features (`features-bento-tiles`)
A feature-focused bento grid with a wide highlighted workflow tile, a tall deployments tile and several standard feature tiles.
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-tiles
```
## Render it
```blade
<x-blocks.features-bento-tiles />
```
## Props
- `eyebrow` (string, default `Built for how you work`)
- `heading` (string, default `Every feature where you need it`)
- `subheading` (string, default `Purpose-built capabilities that remove friction at every step — from first install to production.`)
- `highlight` (mixed|null, default `null`)
- `tiles` (mixed|null, default `null`)
## Use when
- Arranging product features in a bento grid with one wide highlighted workflow tile, a tall tile and several standard tiles.
- Varying tile spans to give a single flagship feature more visual weight than the rest.
## Avoid when
- Use features-bento-grid or features-bento-showcase for a stat- or screenshot-led bento instead of a pure feature grid.
## Rules
- Render the installed block with `<x-blocks.features-bento-tiles />` 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-tiles
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/features-bento-tiles.json
Ask about Bento Features 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
- Arranging product features in a bento grid with one wide highlighted workflow tile, a tall tile and several standard tiles.
- Varying tile spans to give a single flagship feature more visual weight than the rest.
Avoid when
- Use features-bento-grid or features-bento-showcase for a stat- or screenshot-led bento instead of a pure feature grid.
Anti-patterns
- Do not replace semantic props with conflicting utility classes.
- Do not remove labels, focus styles, or state attributes.
- Anatomy
Usage
Render the block as a component, passing data where useful:
resources/views/welcome.blade.php
<x-blocks.features-bento-tiles />Built from primitives
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.
resources/views/blocks/features-bento-tiles.blade.php
@props([
'eyebrow' => 'Built for how you work',
'heading' => 'Every feature where you need it',
'subheading' => 'Purpose-built capabilities that remove friction at every step — from first install to production.',
'highlight' => null,
'tiles' => null,
])
@php
$highlight ??= [
'badge' => 'New', 'icon' => 'workflow', 'title' => 'Visual workflow builder',
'description' => 'Chain actions, conditions, and integrations on a drag-free canvas. Every step is a reusable block you own outright.',
'preview_rows' => [['label' => 'Trigger', 'width' => 'w-20'], ['label' => 'Filter', 'width' => 'w-28'], ['label' => 'Action', 'width' => 'w-24'], ['label' => 'Notify', 'width' => 'w-16']],
];
$tiles ??= [
['icon' => 'bolt', 'title' => 'Instant deployments', 'description' => 'Push to any environment in seconds. Zero-downtime blue-green swaps baked in by default.', 'tall' => true],
['icon' => 'lock', 'title' => 'Role-based access', 'description' => 'Granular permissions per workspace, project, and resource — no over-sharing by accident.', 'tall' => false],
['icon' => 'globe', 'title' => 'Edge-ready CDN', 'description' => 'Static assets served from 200+ PoPs globally with automatic cache invalidation.', 'tall' => false],
['icon' => 'chart', 'title' => 'Observability built in', 'description' => 'Logs, traces, and error rates surface in the same dashboard as your deploys.', 'tall' => false],
['icon' => 'puzzle', 'title' => 'Composable plugins', 'description' => 'Mix-and-match first-party and community plugins. Each ships as a plain Blade package.', 'tall' => false],
];
$icons = [
'workflow' => '<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><path d="M10 6.5h4M17.5 10v4M10 17.5H7a1 1 0 0 1-1-1V10"/>',
'bolt' => '<path d="M13 2 4.5 13.5H12L11 22l8.5-11.5H12L13 2Z"/>',
'lock' => '<rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
'globe' => '<circle cx="12" cy="12" r="9"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2Z"/>',
'chart' => '<path d="M3 3v18h18"/><path d="m7 16 4-4 4 4 4-6"/>',
'puzzle' => '<path d="M12.5 3a1.5 1.5 0 0 0-1 2.6V7H9a2 2 0 0 0-2 2v1.4a1.5 1.5 0 1 0 0 2.2V14h2.5v1.4a1.5 1.5 0 1 0 2.2 0V14H14a2 2 0 0 0 2-2v-1.4a1.5 1.5 0 1 0-2.2-2.2V8h-1.3V5.6A1.5 1.5 0 0 0 12.5 3Z"/>',
];
$tallTile = collect($tiles)->firstWhere('tall', true);
$standardTiles = collect($tiles)->where('tall', false)->values();
@endphp
<x-ui.section data-slot="bento-features" space="xl" {{ $attributes }}>
<x-ui.container gutter="sm">
<x-ui.section-heading align="center" overline-style="badge" :overline="$eyebrow" :title="$heading" :subtitle="$subheading" />
<x-ui.bento :cols="3" :gap="4" class="mt-12">
<x-ui.bento.item :col-span="2" class="flex flex-col gap-6">
<div class="flex flex-wrap items-start justify-between gap-4">
<div>
<span class="mb-4 inline-flex size-10 items-center justify-center rounded-md border border-border bg-muted text-primary" aria-hidden="true">
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$highlight['icon']] ?? $icons['workflow'] !!}</svg>
</span>
<h3 class="text-lg font-semibold tracking-tight text-foreground">{{ __($highlight['title']) }}</h3>
<p class="mt-2 max-w-md text-sm text-muted-foreground">{{ __($highlight['description']) }}</p>
</div>
@if (! empty($highlight['badge']))
<x-ui.badge variant="default" class="shrink-0">{{ __($highlight['badge']) }}</x-ui.badge>
@endif
</div>
<div class="rounded-lg border border-border bg-muted/50 p-6" role="img" aria-label="{{ __('Illustrative workflow preview') }}">
<div class="flex flex-col gap-2">
@foreach ($highlight['preview_rows'] as $i => $row)
<div class="flex items-center gap-4">
<span class="inline-flex size-6 shrink-0 items-center justify-center rounded-full border border-border bg-background text-sm font-semibold tabular-nums text-muted-foreground">{{ $i + 1 }}</span>
<div class="flex flex-1 items-center gap-2">
<span class="h-2 rounded-full bg-primary/20 {{ $row['width'] }}"></span>
<span class="h-px flex-1 border-t border-dashed border-border"></span>
</div>
<span class="w-16 text-end text-sm text-muted-foreground">{{ __($row['label']) }}</span>
</div>
@endforeach
</div>
</div>
</x-ui.bento.item>
@if ($tallTile)
<x-ui.bento.item :row-span="2" class="flex flex-col justify-between gap-6">
<div>
<span class="mb-4 inline-flex size-10 items-center justify-center rounded-md border border-border bg-muted text-primary" aria-hidden="true">
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$tallTile['icon']] ?? $icons['bolt'] !!}</svg>
</span>
<h3 class="text-lg font-semibold tracking-tight text-foreground">{{ __($tallTile['title']) }}</h3>
<p class="mt-2 text-sm text-muted-foreground">{{ __($tallTile['description']) }}</p>
</div>
<div class="flex flex-col gap-2 rounded-lg border border-border bg-muted/50 p-6" role="img" aria-label="{{ __('Illustrative deployment history') }}">
@foreach (['Production', 'Staging', 'Preview'] as $env)
<div class="flex items-center justify-between gap-4 rounded-md border border-border bg-background px-4 py-2">
<span class="text-sm font-medium text-foreground">{{ __($env) }}</span>
<span class="inline-flex items-center gap-2 text-sm text-success"><span class="size-2 rounded-full bg-success"></span>{{ __('Live') }}</span>
</div>
@endforeach
</div>
</x-ui.bento.item>
@endif
@foreach ($standardTiles as $tile)
<x-ui.bento.item class="flex flex-col gap-4">
<span class="inline-flex size-10 items-center justify-center self-start rounded-md border border-border bg-muted text-primary" aria-hidden="true">
<svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $icons[$tile['icon']] ?? $icons['puzzle'] !!}</svg>
</span>
<div>
<h3 class="font-semibold text-foreground">{{ __($tile['title']) }}</h3>
<p class="mt-2 text-sm text-muted-foreground">{{ __($tile['description']) }}</p>
</div>
</x-ui.bento.item>
@endforeach
</x-ui.bento>
</x-ui.container>
</x-ui.section>
Ownership & lifecycle
Owner, release state, review evidence and adoption for this item.
- Owner
- Platform UI (@JoshJML)
- Current version
-
1.0.5 - Status
- Stable
- License
-
open - Deprecation
- Not deprecated
- Contract
-
v1 - Foundation
-
≥ 1.0.0