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

@props([
    'eyebrow' => 'Features',
    'heading' => 'Everything you need at your fingertips',
    'subheading' => 'A media panel that stays in view while you scroll the story beside it.',
    'mediaPosition' => 'left',
    'url' => 'app.example.com',
    'features' => null,
])

@php
    $features ??= [
        [
            'title' => 'Own your source',
            'body' => 'Components are copied into your repo as editable Blade. No black-box dependency to fight when you need a change.',
            'points' => ['Editable Blade & CSS', 'No runtime lock-in', 'Update on your terms'],
        ],
        [
            'title' => 'Theme with tokens',
            'body' => 'Every surface reads from semantic design tokens, so a single override re-skins the whole system in light and dark.',
            'points' => ['Light & dark out of the box', 'One source of truth', 'Brand in minutes'],
        ],
        [
            'title' => 'Composed for scale',
            'body' => 'Blocks compose the same primitives you install, so your marketing pages and app share one consistent language.',
            'points' => ['Accessible by default', 'RTL & i18n ready', 'Tested guard rails'],
        ],
    ];

    // The media panel pins; the story scrolls beside it. mediaPosition flips the
    // column order (RTL-safe because order utilities respect logical flow).
    $mediaOrder = $mediaPosition === 'right' ? 'lg:order-2' : 'lg:order-1';
    $copyOrder = $mediaPosition === 'right' ? 'lg:order-1' : 'lg:order-2';
@endphp

<section {{ $attributes->merge(['class' => 'bg-background py-20 text-foreground sm:py-28']) }}>
    <div class="mx-auto max-w-2xl px-4 text-center">
        @if ($eyebrow)
            <x-ui.badge variant="secondary" class="mb-4">{{ __($eyebrow) }}</x-ui.badge>
        @endif
        <h2 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
        <p class="mt-4 text-pretty text-xl text-muted-foreground">{{ __($subheading) }}</p>
    </div>

    <div class="mx-auto mt-16 grid max-w-6xl grid-cols-1 gap-12 px-4 lg:grid-cols-2 lg:gap-16">
        {{-- Pinned media panel --}}
        <div class="{{ $mediaOrder }} lg:sticky lg:top-24 lg:self-start">
            <x-ui.mockup :url="$url">
                <x-ui.aspect-ratio ratio="4 / 3">
                    <div class="absolute inset-0 bg-gradient-to-br from-primary/10 via-muted to-background"></div>
                    <div class="absolute inset-0 flex flex-col gap-4 p-6">
                        <div class="h-8 w-1/3 rounded-md bg-foreground/10"></div>
                        <div class="grid flex-1 grid-cols-2 gap-4">
                            <div class="rounded-lg bg-primary/15"></div>
                            <div class="rounded-lg bg-foreground/10"></div>
                            <div class="rounded-lg bg-foreground/10"></div>
                            <div class="rounded-lg bg-foreground/5"></div>
                        </div>
                    </div>
                </x-ui.aspect-ratio>
            </x-ui.mockup>
        </div>

        {{-- Scrolling story --}}
        <div class="{{ $copyOrder }} space-y-12">
            @foreach ($features as $feature)
                <div>
                    <h3 class="text-xl font-semibold tracking-tight">{{ __($feature['title']) }}</h3>
                    <p class="mt-4 text-muted-foreground">{{ __($feature['body']) }}</p>
                    @if (! empty($feature['points']))
                        <x-ui.check-list size="sm" class="mt-4">
                            @foreach ($feature['points'] as $point)
                                <x-ui.check-list.item>{{ __($point) }}</x-ui.check-list.item>
                            @endforeach
                        </x-ui.check-list>
                    @endif
                </div>
            @endforeach

            <x-ui.button href="#" variant="outline" class="inline-block">{{ __('Explore all features') }}</x-ui.button>
        </div>
    </div>
</section>

Installation

terminal

php artisan ui:add blocks/features-sticky

Installs these dependencies automatically:

aspect-ratio badge button check-list mockup

Registry contract

Install confidence

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

Registry dependencies

aspect-ratio badge button check-list mockup

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

# Brok UI block: Features Sticky (`features-sticky`)

A feature section whose media panel stays pinned while the feature story scrolls beside it; media side is configurable.

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

## Render it

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

## Props

- `eyebrow` (string, default `Features`)
- `heading` (string, default `Everything you need at your fingertips`)
- `subheading` (string, default `A media panel that stays in view while you scroll the story beside it.`)
- `media-position` (string, default `left`)
- `url` (string, default `app.example.com`)
- `features` (mixed|null, default `null`)

## Use when

- Pinning a media panel in place while the feature story scrolls beside it, with a configurable media side.
- Fitting a longer scroll-driven feature narrative rather than a static grid.

## Avoid when

- Use features-alternating for alternating rows without a sticky/pinned panel.

## Rules

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

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

Pinning a media panel in place while the feature story scrolls beside it, with a configurable media side.
Fitting a longer scroll-driven feature narrative rather than a static grid.

Avoid when

Use features-alternating for alternating rows without a sticky/pinned panel.

Anti-patterns

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

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.features-sticky />

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.