Skip to content
Brok UI

Loading…

No results

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

Preview

16 of 23

resources/views/blocks/features-editorial.blade.php Blade 
@props([
    'eyebrow'  => 'What sets us apart',
    'heading'  => 'Considered details, end to end',
    'lead'     => 'Every capability is shaped by the same editorial standard — generous space, quiet typography, and craft you can feel in the smallest interactions.',
    'features' => null,
])

@php
    // Editorial Monogram feature cards — few, large, generously spaced.
    // Each entry: an index label, a decorative icon (token-coloured),
    // a font-heading title, a short description, and an optional link.
    $features ??= [
        [
            'title'       => 'Crafted materials',
            'description' => 'Each surface is drawn from a single token palette, so light, dark, and per-brand themes stay coherent without a line of component edits.',
            'linkLabel'   => 'See the system',
            'href'        => '#',
            'icon'        => '<path d="M12 3 3 8.5v7L12 21l9-5.5v-7L12 3Z"/><path d="M3 8.5 12 14l9-5.5"/><path d="M12 14v7"/>',
        ],
        [
            'title'       => 'Quiet motion',
            'description' => 'Transitions favour transform and opacity, honour reduced-motion preferences, and never fight the reader — movement that supports, never distracts.',
            'linkLabel'   => 'Watch in motion',
            'href'        => '#',
            'icon'        => '<path d="M5 3v18"/><path d="M19 3v18"/><path d="M5 8h14"/><path d="M5 16h14"/>',
        ],
        [
            'title'       => 'Honest accessibility',
            'description' => 'Logical heading order, focus-visible states, ARIA wiring, and RTL-safe layout are part of the draft — not retrofitted once the design is shipped.',
            'linkLabel'   => 'Read the standard',
            'href'        => '#',
            'icon'        => '<circle cx="12" cy="12" r="9"/><path d="m9 12 2 2 4-4"/>',
        ],
        [
            'title'       => 'Owned source',
            'description' => 'Components arrive as plain Blade you keep and edit. No runtime lock-in, no opaque dependency — just considered code that becomes yours.',
            'linkLabel'   => 'Browse the source',
            'href'        => '#',
            'icon'        => '<path d="m8 16-4-4 4-4"/><path d="m16 8 4 4-4 4"/><path d="m13 5-2 14"/>',
        ],
    ];
@endphp

<section
    data-slot="features-16"
    {{ $attributes->merge(['class' => 'bg-background py-20 text-foreground sm:py-28 lg:py-32']) }}
>
    <div class="mx-auto max-w-6xl px-6 lg:px-8">
        {{-- ── Editorial header — asymmetric, thin rule beneath ── --}}
        <div class="grid gap-8 border-b border-border pb-12 lg:grid-cols-12 lg:items-end lg:gap-12">
            <div class="lg:col-span-7">
                @if ($eyebrow)
                    <p class="font-body text-sm uppercase tracking-[0.3em] text-muted-foreground">{{ __($eyebrow) }}</p>
                @endif
                <h2 class="mt-6 max-w-xl text-balance font-heading text-4xl font-normal leading-[1.05] tracking-tight sm:text-5xl">
                    {{ __($heading) }}
                </h2>
            </div>

            @if ($lead)
                <p class="text-pretty font-body text-base leading-relaxed text-muted-foreground lg:col-span-5">
                    {{ __($lead) }}
                </p>
            @endif
        </div>

        {{-- ── Large editorial feature cards ── --}}
        <div class="mt-12 grid gap-px overflow-hidden rounded-lg border border-border bg-border sm:grid-cols-2">
            @foreach ($features as $index => $feature)
                <x-ui.card class="group flex h-full flex-col gap-8 rounded-none border-0 bg-card p-8 transition-colors hover:bg-muted/40 sm:p-10 lg:p-12">
                    {{-- Index label + media chip --}}
                    <div class="flex items-center justify-between gap-4">
                        <span class="font-body text-sm tabular-nums tracking-widest text-muted-foreground">
                            {{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}
                        </span>
                        <span class="flex size-12 items-center justify-center rounded-md bg-muted text-foreground ring-1 ring-border" aria-hidden="true">
                            {{-- 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 class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                {!! $feature['icon'] ?? '<circle cx="12" cy="12" r="9"/>' !!}
                            </svg>
                        </span>
                    </div>

                    <div class="flex flex-1 flex-col gap-4">
                        <h3 class="font-heading text-4xl font-normal leading-snug tracking-tight">
                            {{ __($feature['title']) }}
                        </h3>
                        <p class="text-pretty font-body text-base leading-relaxed text-muted-foreground">
                            {{ __($feature['description']) }}
                        </p>
                    </div>

                    @if (! empty($feature['linkLabel']))
                        <x-ui.button :href="$feature['href'] ?? '#'" variant="link" class="h-auto p-0 font-body text-sm uppercase tracking-widest inline-flex w-fit">
                            {{ __($feature['linkLabel']) }}
                            <svg class="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
                            </svg>
                        </x-ui.button>
                    @endif
                </x-ui.card>
            @endforeach
        </div>
    </div>
</section>

Installation

terminal 
php artisan ui:add blocks/features-editorial

Installs these dependencies automatically:

button card

Registry contract

Install confidence

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

Registry dependencies

button card

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-editorial.md 
# Brok UI block: Features Editorial (`features-editorial`)

An editorial Monogram feature-cards section — an asymmetric header with an uppercase eyebrow and large light display heading above a refined grid of generously spaced cards, each with an index label, a token media chip, a font-heading title, a short description, and an editorial link.

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

## Render it

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

## Props

- `eyebrow` (string, default `What sets us apart`)
- `heading` (string, default `Considered details, end to end`)
- `lead` (string, default `Every capability is shaped by the same editorial standard — generous space, quiet typography, and craft you can feel in the smallest interactions.`)
- `features` (mixed|null, default `null`)

## Use when

- Presenting features in an editorial Monogram style: an asymmetric header above generously spaced cards with index labels.
- Pairing a font-heading title and short caption per card with an editorial link rather than a button.

## Avoid when

- Use features-grid or features-cards for a plainer, non-editorial feature card grid.

## Rules

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

  • Presenting features in an editorial Monogram style: an asymmetric header above generously spaced cards with index labels.
  • Pairing a font-heading title and short caption per card with an editorial link rather than a button.

Avoid when

  • Use features-grid or features-cards for a plainer, non-editorial feature card grid.

Anti-patterns

  • Do not replace semantic props with conflicting utility classes.
  • Do not remove labels, focus styles, or state attributes.
Anatomy
root features-16

Usage

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

resources/views/welcome.blade.php Blade 
<x-blocks.features-editorial />

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.

resources/views/blocks/features-editorial.blade.php Blade 
@props([
    'eyebrow'  => 'What sets us apart',
    'heading'  => 'Considered details, end to end',
    'lead'     => 'Every capability is shaped by the same editorial standard — generous space, quiet typography, and craft you can feel in the smallest interactions.',
    'features' => null,
])

@php
    // Editorial Monogram feature cards — few, large, generously spaced.
    // Each entry: an index label, a decorative icon (token-coloured),
    // a font-heading title, a short description, and an optional link.
    $features ??= [
        [
            'title'       => 'Crafted materials',
            'description' => 'Each surface is drawn from a single token palette, so light, dark, and per-brand themes stay coherent without a line of component edits.',
            'linkLabel'   => 'See the system',
            'href'        => '#',
            'icon'        => '<path d="M12 3 3 8.5v7L12 21l9-5.5v-7L12 3Z"/><path d="M3 8.5 12 14l9-5.5"/><path d="M12 14v7"/>',
        ],
        [
            'title'       => 'Quiet motion',
            'description' => 'Transitions favour transform and opacity, honour reduced-motion preferences, and never fight the reader — movement that supports, never distracts.',
            'linkLabel'   => 'Watch in motion',
            'href'        => '#',
            'icon'        => '<path d="M5 3v18"/><path d="M19 3v18"/><path d="M5 8h14"/><path d="M5 16h14"/>',
        ],
        [
            'title'       => 'Honest accessibility',
            'description' => 'Logical heading order, focus-visible states, ARIA wiring, and RTL-safe layout are part of the draft — not retrofitted once the design is shipped.',
            'linkLabel'   => 'Read the standard',
            'href'        => '#',
            'icon'        => '<circle cx="12" cy="12" r="9"/><path d="m9 12 2 2 4-4"/>',
        ],
        [
            'title'       => 'Owned source',
            'description' => 'Components arrive as plain Blade you keep and edit. No runtime lock-in, no opaque dependency — just considered code that becomes yours.',
            'linkLabel'   => 'Browse the source',
            'href'        => '#',
            'icon'        => '<path d="m8 16-4-4 4-4"/><path d="m16 8 4 4-4 4"/><path d="m13 5-2 14"/>',
        ],
    ];
@endphp

<section
    data-slot="features-16"
    {{ $attributes->merge(['class' => 'bg-background py-20 text-foreground sm:py-28 lg:py-32']) }}
>
    <div class="mx-auto max-w-6xl px-6 lg:px-8">
        {{-- ── Editorial header — asymmetric, thin rule beneath ── --}}
        <div class="grid gap-8 border-b border-border pb-12 lg:grid-cols-12 lg:items-end lg:gap-12">
            <div class="lg:col-span-7">
                @if ($eyebrow)
                    <p class="font-body text-sm uppercase tracking-[0.3em] text-muted-foreground">{{ __($eyebrow) }}</p>
                @endif
                <h2 class="mt-6 max-w-xl text-balance font-heading text-4xl font-normal leading-[1.05] tracking-tight sm:text-5xl">
                    {{ __($heading) }}
                </h2>
            </div>

            @if ($lead)
                <p class="text-pretty font-body text-base leading-relaxed text-muted-foreground lg:col-span-5">
                    {{ __($lead) }}
                </p>
            @endif
        </div>

        {{-- ── Large editorial feature cards ── --}}
        <div class="mt-12 grid gap-px overflow-hidden rounded-lg border border-border bg-border sm:grid-cols-2">
            @foreach ($features as $index => $feature)
                <x-ui.card class="group flex h-full flex-col gap-8 rounded-none border-0 bg-card p-8 transition-colors hover:bg-muted/40 sm:p-10 lg:p-12">
                    {{-- Index label + media chip --}}
                    <div class="flex items-center justify-between gap-4">
                        <span class="font-body text-sm tabular-nums tracking-widest text-muted-foreground">
                            {{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}
                        </span>
                        <span class="flex size-12 items-center justify-center rounded-md bg-muted text-foreground ring-1 ring-border" aria-hidden="true">
                            {{-- 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 class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                {!! $feature['icon'] ?? '<circle cx="12" cy="12" r="9"/>' !!}
                            </svg>
                        </span>
                    </div>

                    <div class="flex flex-1 flex-col gap-4">
                        <h3 class="font-heading text-4xl font-normal leading-snug tracking-tight">
                            {{ __($feature['title']) }}
                        </h3>
                        <p class="text-pretty font-body text-base leading-relaxed text-muted-foreground">
                            {{ __($feature['description']) }}
                        </p>
                    </div>

                    @if (! empty($feature['linkLabel']))
                        <x-ui.button :href="$feature['href'] ?? '#'" variant="link" class="h-auto p-0 font-body text-sm uppercase tracking-widest inline-flex w-fit">
                            {{ __($feature['linkLabel']) }}
                            <svg class="ms-2 size-4 transition-transform group-hover:translate-x-1 rtl:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
                            </svg>
                        </x-ui.button>
                    @endif
                </x-ui.card>
            @endforeach
        </div>
    </div>
</section>

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.
Owner
Platform UI (@JoshJML)
Current version
1.0.4
Status
Stable
License
open
Deprecation
Not deprecated
Contract
v1
Foundation
≥ 1.0.0