Compliance

Open source

A security-trust section — reassurance copy beside a grid of compliance certification cards, with a row of trust stats below.

Add to page builder

resources/views/blocks/compliance.blade.php Blade

@props([
    'eyebrow' => 'Security & compliance',
    'heading' => 'Enterprise-grade security, audited and certified',
    'body' => 'Your data is protected by independently verified controls. We meet the standards your security and legal teams expect — so the answer to the vendor questionnaire is already yes.',
    'points' => null,
    'certifications' => null,
    'stats' => null,
])

@php
    // Fixed icon path map — never splice variables into classes; pick a full SVG
    // path string by key so the JIT scanner sees only static class names.
    $iconPaths = [
        'shield' => 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
        'shield-check' => 'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1zM9 12l2 2 4-4',
        'lock' => 'M5 11h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1zm2 0V7a5 5 0 0 1 10 0v4',
        'globe' => 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM3.6 9h16.8M3.6 15h16.8M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z',
        'heart-pulse' => 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78zM3.5 12.5h4l2-4 3 6 2-3h4',
        'card' => 'M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM3 10h18',
    ];

    $points ??= [
        'Data encrypted in transit and at rest by default',
        'Independent third-party audits every year',
        'Granular access controls, SSO and audit logs',
        'Documentation available under NDA on request',
    ];

    $certifications ??= [
        ['icon' => 'shield-check', 'name' => 'SOC 2 Type II', 'tag' => 'Audited', 'description' => 'Security, availability and confidentiality controls audited over time.'],
        ['icon' => 'globe', 'name' => 'GDPR', 'tag' => 'Compliant', 'description' => 'EU data protection with data processing agreements available.'],
        ['icon' => 'heart-pulse', 'name' => 'HIPAA', 'tag' => 'Compliant', 'description' => 'Safeguards for protected health information and BAAs on request.'],
        ['icon' => 'shield', 'name' => 'ISO 27001', 'tag' => 'Certified', 'description' => 'Certified information security management system.'],
        ['icon' => 'lock', 'name' => 'CCPA', 'tag' => 'Compliant', 'description' => 'California consumer privacy rights honoured across our platform.'],
        ['icon' => 'card', 'name' => 'PCI DSS', 'tag' => 'Level 1', 'description' => 'Card data handled by a certified Level 1 payment provider.'],
    ];

    $stats ??= [
        ['value' => '99.99%', 'label' => 'Uptime SLA', 'description' => 'Backed by a financial guarantee'],
        ['value' => 'AES-256', 'label' => 'Encryption', 'description' => 'At rest, TLS 1.3 in transit'],
        ['value' => '24/7', 'label' => 'Monitoring', 'description' => 'Continuous threat detection'],
        ['value' => '< 1h', 'label' => 'Incident response', 'description' => 'Median time to first action'],
    ];
@endphp

<x-ui.section
    aria-labelledby="compliance-01-heading"
    data-slot="compliance"
    space="xl" {{ $attributes }}
>
    <x-ui.container gutter="sm">
        <div class="grid grid-cols-1 items-start gap-12 lg:grid-cols-2 lg:gap-16">
            {{-- Left: reassurance copy --}}
            <div class="max-w-xl lg:sticky lg:top-24">
                <x-ui.badge variant="secondary" class="mb-6">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4 text-primary" aria-hidden="true">
                        <path d="{{ $iconPaths['shield-check'] }}" />
                    </svg>
                    {{ __($eyebrow) }}
                </x-ui.badge>

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

                <p class="mt-6 text-pretty text-base leading-relaxed text-muted-foreground">
                    {{ __($body) }}
                </p>

                <x-ui.check-list marker="chip" class="mt-8 font-medium">
                    @foreach ($points as $point)
                        <x-ui.check-list.item>{{ __($point) }}</x-ui.check-list.item>
                    @endforeach
                </x-ui.check-list>
            </div>

            {{-- Right: certification card grid --}}
            <div>
                <h3 class="sr-only">{{ __('Certifications and standards') }}</h3>
                <ul role="list" class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    @foreach ($certifications as $cert)
                        <li>
                            <x-ui.card class="h-full p-6">
                                <div class="flex items-start justify-between gap-4">
                                    <x-ui.icon.tile>
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="size-5" aria-hidden="true">
                                            <path d="{{ $iconPaths[$cert['icon']] ?? $iconPaths['shield'] }}" />
                                        </svg>
                                    </x-ui.icon.tile>
                                    <x-ui.badge variant="secondary" size="sm">{{ __($cert['tag']) }}</x-ui.badge>
                                </div>
                                <h4 class="mt-4 text-base font-semibold tracking-tight text-foreground">{{ $cert['name'] }}</h4>
                                <p class="mt-2 text-pretty text-sm leading-relaxed text-muted-foreground">{{ __($cert['description']) }}</p>
                            </x-ui.card>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>

        {{-- Trust stats --}}
        <div class="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:mt-16 lg:grid-cols-4">
            @foreach ($stats as $stat)
                <x-ui.stat
                    :label="__($stat['label'])"
                    :value="$stat['value']"
                    :description="__($stat['description'])"
                />
            @endforeach
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/compliance

Installs these dependencies automatically:

badge card check-list container icon section stat

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/compliance.blade.php

Registry dependencies

badge card check-list container icon section stat

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.

compliance.md

# Brok UI block: Compliance (`compliance`)

A two-column security trust section: reassurance heading and copy beside a responsive grid of compliance certification cards (SOC 2, GDPR, HIPAA, ISO 27001, CCPA, PCI DSS), with a row of trust stats below.

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

## Render it

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

## Props

- `eyebrow` (string, default `Security & compliance`)
- `heading` (string, default `Enterprise-grade security, audited and certified`)
- `body` (string, default `Your data is protected by independently verified controls. We meet the standards your security and legal teams expect — so the answer to the vendor questionnaire is already yes.`)
- `points` (mixed|null, default `null`)
- `certifications` (mixed|null, default `null`)
- `stats` (mixed|null, default `null`)

## Use when

- Reassuring a security-conscious buyer with a grid of compliance certification cards (SOC 2, GDPR, HIPAA, ISO 27001, PCI DSS).
- Backing the certifications with a row of trust stats beneath the grid.

## Avoid when

- Use case-studies or awards for outcome- or recognition-based proof instead of regulatory certification.

## Rules

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

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

Reassuring a security-conscious buyer with a grid of compliance certification cards (SOC 2, GDPR, HIPAA, ISO 27001, PCI DSS).
Backing the certifications with a row of trust stats beneath the grid.

Avoid when

Use case-studies or awards for outcome- or recognition-based proof instead of regulatory certification.

Anti-patterns

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

Anatomy: root compliance

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.compliance />

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.