Closing / CTA

Open source

Closing call-to-action sections — a centred band with a switchable backdrop, a screenshot-strip media CTA and a split card.

Add to page builder

1 of 3

Frame

Backdrop

resources/views/blocks/closing-cta-centered.blade.php Blade

@props([
    'eyebrow' => 'Get started today',
    'heading' => 'Ready to ship your next idea?',
    'subheading' => 'Install the components into your own codebase, own every line, and theme everything with design tokens. No lock-in, no runtime dependency.',
    'primaryCta' => 'Start building',
    'primaryHref' => '#',
    'secondaryCta' => 'Read the docs',
    'secondaryHref' => '#',
    'note' => null,
    'frame' => 'none',
    'backdrop' => 'none',
])

@php
    // Keep this list in sync with item.json's `frame` enum.
    $frames = ['none', 'card', 'bordered'];

    if (! in_array($frame, $frames, true)) {
        throw new \InvalidArgumentException(
            "Unknown closing-cta-centered frame [{$frame}]. Expected one of: ".implode(', ', $frames).'.'
        );
    }

    // The card frame sits on a solid primary-coloured surface: the primary
    // button needs the secondary (contrast) variant, and any text that would
    // otherwise read as muted-foreground falls back to the card's own
    // primary-foreground token so it stays legible.
    $onCard = $frame === 'card';
    $primaryVariant = $onCard ? 'secondary' : 'default';
    $mutedClass = $onCard ? 'text-primary-foreground' : 'text-muted-foreground';
    $containerMax = $onCard ? 'max-w-3xl' : 'max-w-5xl';
@endphp

<section {{ $attributes->merge(['data-slot' => 'closing-cta-centered', 'class' => 'relative isolate overflow-hidden bg-background py-16 text-foreground sm:py-24']) }}>
    <x-ui.backdrop :variant="$backdrop" />

    <div class="relative z-10 mx-auto {{ $containerMax }} px-4">
        @if ($frame === 'card')
            {{-- Card frame: an elevated primary-surface card (formerly closing-cta-04). --}}
            <x-ui.card class="overflow-hidden rounded-lg border-transparent bg-primary text-primary-foreground shadow-xl">
                <div class="relative isolate px-6 py-12 text-center sm:px-12 sm:py-16">
                    <div class="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-b from-primary-foreground/10 to-transparent" aria-hidden="true"></div>

                    @if ($eyebrow)
                        <x-ui.badge variant="secondary" class="mb-6">{{ __($eyebrow) }}</x-ui.badge>
                    @endif

                    <h2 class="mx-auto max-w-2xl 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 {{ $mutedClass }}">
                            {{ __($subheading) }}
                        </p>
                    @endif

                    <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
                        <x-ui.button :href="$primaryHref" size="lg" :variant="$primaryVariant" class="w-full sm:w-auto">{{ __($primaryCta) }}</x-ui.button>
                        @if ($secondaryCta)
                            <x-ui.button :href="$secondaryHref" size="lg" variant="outline" class="w-full sm:w-auto">{{ __($secondaryCta) }}</x-ui.button>
                        @endif
                    </div>

                    @if ($note)
                        <p class="mt-6 text-sm {{ $mutedClass }}">{{ __($note) }}</p>
                    @endif
                </div>
            </x-ui.card>
        @elseif ($frame === 'bordered')
            {{-- Bordered frame: a dashed frame with corner accents (formerly closing-cta-05). --}}
            <div class="relative rounded-lg border-2 border-dashed border-border bg-muted/30 px-6 py-16 text-center sm:px-12 sm:py-20">
                {{-- Decorative corner accents (flip-safe via logical insets) --}}
                <svg class="pointer-events-none absolute start-4 top-4 h-6 w-6 text-muted-foreground" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9V5a2 2 0 0 1 2-2h4" />
                </svg>
                <svg class="pointer-events-none absolute end-4 top-4 h-6 w-6 -scale-x-100 text-muted-foreground" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9V5a2 2 0 0 1 2-2h4" />
                </svg>
                <svg class="pointer-events-none absolute bottom-4 start-4 h-6 w-6 -scale-y-100 text-muted-foreground" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9V5a2 2 0 0 1 2-2h4" />
                </svg>
                <svg class="pointer-events-none absolute bottom-4 end-4 h-6 w-6 -scale-100 text-muted-foreground" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9V5a2 2 0 0 1 2-2h4" />
                </svg>

                <div class="mx-auto max-w-2xl">
                    @if ($eyebrow)
                        <x-ui.badge variant="secondary" class="mb-6">{{ __($eyebrow) }}</x-ui.badge>
                    @endif

                    <h2 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 {{ $mutedClass }}">
                            {{ __($subheading) }}
                        </p>
                    @endif

                    <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
                        <x-ui.button :href="$primaryHref" size="lg" :variant="$primaryVariant" class="w-full sm:w-auto">{{ __($primaryCta) }}</x-ui.button>
                        @if ($secondaryCta)
                            <x-ui.button :href="$secondaryHref" size="lg" variant="outline" class="w-full sm:w-auto">{{ __($secondaryCta) }}</x-ui.button>
                        @endif
                    </div>

                    @if ($note)
                        <p class="mt-6 text-sm {{ $mutedClass }}">{{ __($note) }}</p>
                    @endif
                </div>
            </div>
        @else
            {{-- No frame: a muted rounded band (formerly closing-cta-03). --}}
            <div class="relative isolate overflow-hidden rounded-lg border border-border bg-muted/40 px-6 py-16 text-center shadow-sm sm:px-12 sm:py-20">
                @if ($eyebrow)
                    <x-ui.badge variant="secondary" class="mb-6">{{ __($eyebrow) }}</x-ui.badge>
                @endif

                <h2 class="mx-auto max-w-2xl 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 {{ $mutedClass }}">
                        {{ __($subheading) }}
                    </p>
                @endif

                <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
                    <x-ui.button :href="$primaryHref" size="lg" :variant="$primaryVariant" class="w-full sm:w-auto">{{ __($primaryCta) }}</x-ui.button>
                    @if ($secondaryCta)
                        <x-ui.button :href="$secondaryHref" size="lg" variant="outline" class="w-full sm:w-auto">{{ __($secondaryCta) }}</x-ui.button>
                    @endif
                </div>

                @if ($note)
                    <p class="mt-6 text-sm {{ $mutedClass }}">{{ __($note) }}</p>
                @endif
            </div>
        @endif
    </div>
</section>

Installation

terminal

php artisan ui:add blocks/closing-cta-centered

Installs these dependencies automatically:

badge button card backdrop

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/closing-cta-centered.blade.php

Registry dependencies

badge button card backdrop

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.

closing-cta-centered.md

# Brok UI block: Closing CTA (centered) (`closing-cta-centered`)

A centered closing call-to-action with eyebrow badge, heading, subcopy, dual buttons, an optional note, a switchable frame (none, card, bordered) and a switchable decorative backdrop (grid, glow, aurora, beams, geometric, gradient, prism, liquid, dots).

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/closing-cta-centered
```

## Render it

```blade
<x-blocks.closing-cta-centered frame="none" backdrop="none" />
```

## Props

- `eyebrow` (string, default `Get started today`) — Small label shown above the heading inside a badge.
- `heading` (string, default `Ready to ship your next idea?`) — Primary headline.
- `subheading` (string, default `Install the components into your own codebase, own every line, and theme everything with design tokens. No lock-in, no runtime dependency.`) — Supporting copy under the heading.
- `primary-cta` (string, default `Start building`) — Primary button label.
- `primary-href` (string, default `#`) — Primary button destination.
- `secondary-cta` (string, default `Read the docs`) — Secondary button label; falsy hides the secondary button.
- `secondary-href` (string, default `#`) — Secondary button destination.
- `note` (string|null, default `null`) — Optional fine-print line under the CTAs (e.g. a trial disclaimer).
- `frame` (none|card|bordered, default `none`) (variant) — The frame around the body: 'none' is a muted rounded band, 'card' is an elevated primary-surface card (the primary button switches to the secondary variant for contrast), 'bordered' is a dashed frame with corner accents.
- `backdrop` (none|grid|glow|aurora|beams|geometric|gradient|prism|liquid|dots, default `none`) (variant) — Decorative layer behind the section; see the backdrop primitive.

## Use when

- Closing a marketing or landing page with a centred headline, subcopy and dual call-to-action.
- Wanting a switchable frame (a muted band, an elevated primary card, or a dashed bordered frame) and a switchable decorative background without maintaining a separate block per look.

## Avoid when

- Needing a two-column layout, a form, a newsletter signup, or a media asset alongside the copy; use another closing-cta composition instead.
- Needing more than two calls to action.

## Rules

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

Ask about Closing CTA (centered) 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

Closing a marketing or landing page with a centred headline, subcopy and dual call-to-action.
Wanting a switchable frame (a muted band, an elevated primary card, or a dashed bordered frame) and a switchable decorative background without maintaining a separate block per look.

Avoid when

Needing a two-column layout, a form, a newsletter signup, or a media asset alongside the copy; use another closing-cta composition instead.
Needing more than two calls to action.

Anti-patterns

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

Anatomy: section backdrop frame eyebrow badge heading subheading primary cta secondary cta note

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.closing-cta-centered />

The controls above the preview are props on this composition. What you picked reads:

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.