Sale

Open source

Promotional sale sections — a bold gradient panel with countdown pills, dual CTAs and a discount code, and a dismissible full-width promo bar with a copyable code.

Add to page builder

1 of 4

resources/views/blocks/sale-promo.blade.php Blade

@props([
    'eyebrow'      => 'Limited time',
    'heading'      => 'Summer Sale — up to 50% off',
    'copy'         => 'Shop our biggest sale of the year. Hundreds of styles, all at unbeatable prices — for a limited time only.',
    'code'         => 'SUMMER50',
    'countdown'    => null,
    'primaryLabel' => 'Shop the sale',
    'primaryHref'  => '#',
    'ghostLabel'   => 'View all deals',
    'ghostHref'    => '#',
])

@php
    $countdown ??= [
        ['value' => '03', 'label' => 'Days'],
        ['value' => '14', 'label' => 'Hours'],
        ['value' => '27', 'label' => 'Mins'],
        ['value' => '09', 'label' => 'Secs'],
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <x-ui.container gutter="sm">
        <div class="relative overflow-hidden rounded-lg bg-gradient-to-br from-primary to-primary/80 px-6 py-12 text-center text-primary-foreground sm:px-12 sm:py-16">
            <div class="pointer-events-none absolute inset-0 rounded-lg" aria-hidden="true">
                <div class="absolute -start-16 -top-16 size-64 rounded-full bg-primary-foreground/10"></div>
                <div class="absolute -bottom-20 -end-20 size-80 rounded-full bg-primary-foreground/10"></div>
                <div class="absolute start-1/2 top-0 h-px w-3/4 -translate-x-1/2 bg-primary-foreground/20"></div>
            </div>

            <div class="relative z-10 mx-auto max-w-2xl">
                <div class="mb-6 flex justify-center">
                    <x-ui.badge class="border-transparent bg-primary-foreground/15 text-primary-foreground">{{ __($eyebrow) }}</x-ui.badge>
                </div>

                <h2 class="text-3xl font-bold tracking-tight text-primary-foreground sm:text-5xl">{{ __($heading) }}</h2>
                <p class="mt-4 text-sm leading-relaxed text-primary-foreground sm:text-base">{{ __($copy) }}</p>

                <div class="mt-8 flex flex-wrap justify-center gap-4">
                    @foreach ($countdown as $unit)
                        <div class="flex min-w-[4.5rem] flex-col items-center rounded-sm bg-primary-foreground/10 px-4 py-4">
                            <span class="text-2xl font-bold leading-none text-primary-foreground">{{ $unit['value'] }}</span>
                            <span class="mt-2 text-sm font-semibold uppercase tracking-widest text-primary-foreground">{{ __($unit['label']) }}</span>
                        </div>
                    @endforeach
                </div>

                <div class="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
                    <x-ui.button :href="$primaryHref" class="bg-background text-foreground hover:bg-background/90">{{ __($primaryLabel) }}</x-ui.button>
                    <x-ui.button :href="$ghostHref" variant="ghost" class="text-primary-foreground hover:bg-primary-foreground/10 hover:text-primary-foreground">
                        {{ __($ghostLabel) }}
                        <svg class="ms-2 size-4 shrink-0 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M5 12h14M13 6l6 6-6 6" />
                        </svg>
                    </x-ui.button>
                </div>

                @if ($code)
                    <p class="mt-6 inline-flex flex-wrap items-center justify-center gap-2 text-sm text-primary-foreground">
                        {{ __('Use code') }}
                        <span class="inline-block rounded-sm bg-primary-foreground/15 px-2 py-0.5 font-mono font-semibold tracking-wider text-primary-foreground">{{ $code }}</span>
                        {{ __('at checkout') }}
                        <x-ui.copy-button :value="$code" :label="__('Copy code :code', ['code' => $code])" class="text-primary-foreground hover:bg-primary-foreground/15 hover:text-primary-foreground" />
                    </p>
                @endif
            </div>
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/sale-promo

Installs these dependencies automatically:

badge button container copy-button section

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/sale-promo.blade.php

Registry dependencies

badge button container copy-button 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.

sale-promo.md

# Brok UI block: Sale Section (`sale-promo`)

A bold promotional sale section on a token gradient panel with an eyebrow badge, headline, countdown unit pills, dual call-to-action buttons and a discount-code chip.

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/sale-promo
```

## Render it

```blade
<x-blocks.sale-promo />
```

## Props

- `eyebrow` (string, default `Limited time`) — Small label shown above the heading.
- `heading` (string, default `Summer Sale — up to 50% off`) — Section heading.
- `copy` (string, default `Shop our biggest sale of the year. Hundreds of styles, all at unbeatable prices — for a limited time only.`) — Supporting copy describing the sale.
- `code` (string, default `SUMMER50`) — Discount code shown in the promo chip.
- `countdown` (mixed|null, default `null`) — Countdown unit rows ({value, label}); null falls back to a sample days/hours/minutes/seconds set.
- `primary-label` (string, default `Shop the sale`) — Primary button label.
- `primary-href` (string, default `#`) — Primary button destination.
- `ghost-label` (string, default `View all deals`) — Secondary ghost-button label.
- `ghost-href` (string, default `#`) — Secondary ghost-button destination.

## Use when

- Announcing a site-wide sale on a marketing page with a bold gradient panel, countdown units and a discount-code chip.
- Needing the promotion to carry dual calls to action and deserve a full standalone section.

## Avoid when

- Needing a slim, persistent strip instead of a full section; use sale-banner or sale-countdown-bar instead.

## Rules

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

Ask about Sale Section 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

Announcing a site-wide sale on a marketing page with a bold gradient panel, countdown units and a discount-code chip.
Needing the promotion to carry dual calls to action and deserve a full standalone section.

Avoid when

Needing a slim, persistent strip instead of a full section; use sale-banner or sale-countdown-bar instead.

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.sale-promo />

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.