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

@props([
    'eyebrow' => 'Industries',
    'heading' => 'Built for the industries we serve',
    'subheading' => 'From regulated enterprises to fast-moving startups, our platform adapts to the workflows your sector depends on.',
    'industries' => null,
])

@php
    $industries ??= [
        [
            'icon' => 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z',
            'name' => 'Healthcare',
            'description' => 'HIPAA-ready workflows that keep patient data secure and care teams in sync.',
        ],
        [
            'icon' => 'M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0z',
            'name' => 'Fintech',
            'description' => 'Real-time ledgers and audit trails built for compliance and scale.',
        ],
        [
            'icon' => 'M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007z',
            'name' => 'Retail & E-commerce',
            'description' => 'Unified storefront and inventory data to convert more shoppers, faster.',
        ],
        [
            'icon' => 'M12 14l9-5-9-5-9 5 9 5z M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z',
            'name' => 'Education',
            'description' => 'Engaging learning tools that scale from a single class to a whole district.',
        ],
        [
            'icon' => 'M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12',
            'name' => 'Logistics',
            'description' => 'Live tracking and route intelligence that keep every shipment on schedule.',
        ],
        [
            'icon' => 'M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z',
            'name' => 'SaaS',
            'description' => 'Composable building blocks so product teams ship and iterate without friction.',
        ],
        [
            'icon' => 'M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21',
            'name' => 'Real Estate',
            'description' => 'Listing, leasing, and portfolio insights in one connected workspace.',
        ],
        [
            'icon' => 'M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z',
            'name' => 'Manufacturing',
            'description' => 'Connect the shop floor to the cloud for proactive, data-driven operations.',
        ],
    ];
@endphp

<x-ui.section
    aria-labelledby="industries-01-heading"
    data-slot="industries"
    space="xl" {{ $attributes }}
>
    <x-ui.container gutter="sm">
        <div class="mx-auto max-w-2xl text-center">
            @if ($eyebrow)
                <x-ui.badge variant="secondary" class="mb-4">{{ __($eyebrow) }}</x-ui.badge>
            @endif

            <h2 id="industries-01-heading" class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">
                {{ __($heading) }}
            </h2>

            @if ($subheading)
                <p class="mx-auto mt-4 max-w-xl text-pretty text-lg text-muted-foreground">
                    {{ __($subheading) }}
                </p>
            @endif
        </div>

        <ul role="list" class="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ($industries as $industry)
                <li>
                    <x-ui.card class="h-full p-6 transition-all duration-200 hover:-translate-y-1 hover:shadow-lg">
                        <x-ui.icon.tile size="lg">
                            <svg class="size-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="{{ $industry['icon'] }}" />
                            </svg>
                        </x-ui.icon.tile>

                        <h3 class="mt-6 text-lg font-semibold tracking-tight">
                            {{ __($industry['name']) }}
                        </h3>

                        <p class="mt-2 text-pretty text-sm text-muted-foreground">
                            {{ __($industry['description']) }}
                        </p>
                    </x-ui.card>
                </li>
            @endforeach
        </ul>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/industries

Installs these dependencies automatically:

badge card container icon section

Registry contract

Install confidence

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

Registry dependencies

badge card container icon section

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.

industries.md

# Brok UI block: Industries (`industries`)

An 'Industries we serve' section with a heading, lead paragraph, and a responsive grid of industry cards, each with an icon, name, and one-line value proposition.

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/industries
```

## Render it

```blade
<x-blocks.industries />
```

## Props

- `eyebrow` (string, default `Industries`) — Small label shown above the heading inside a badge.
- `heading` (string, default `Built for the industries we serve`) — Primary section heading.
- `subheading` (string, default `From regulated enterprises to fast-moving startups, our platform adapts to the workflows your sector depends on.`) — Supporting lead paragraph under the heading.
- `industries` (mixed|null, default `null`) — Array of {icon, name, description} cards; falls back to an 8-item sample list of industries when null.

## Use when

- Use it for an 'industries we serve' or 'built for' section that lists the verticals or sectors a product supports as a responsive grid of icon cards.
- Reach for it when each entry needs only an icon, a name, and a one-line value proposition — not a longer feature description.

## Avoid when

- Avoid it for showcasing third-party integrations or tool logos; use integrations-grid or a logo-cloud block instead.

## Rules

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

Ask about Industries 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

Use it for an 'industries we serve' or 'built for' section that lists the verticals or sectors a product supports as a responsive grid of icon cards.
Reach for it when each entry needs only an icon, a name, and a one-line value proposition — not a longer feature description.

Avoid when

Avoid it for showcasing third-party integrations or tool logos; use integrations-grid or a logo-cloud block instead.

Anti-patterns

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

Anatomy: eyebrow badge heading subheading responsive card grid icon tile industry name one-line description

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.industries />

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.