Countdown Banner

Open source

Promo countdown bands — a headline with a live days/hours/minutes/seconds timer and CTA.

1 of 2

resources/views/blocks/countdown-banner-promo.blade.php Blade

@props([
    'eyebrow'   => 'A Privileged Opportunity',
    'headline'  => "For the Season's Most Wanted",
    'subcopy'   => 'A curated edit of our most coveted pieces, released for a limited window. When the clock runs out, the collection rests until next season.',
    'deadline'  => null,
    'cta'       => ['label' => 'Shop the edit', 'href' => '#'],
    'labels'    => [],
])

@php
    // Default to a date a few days out so the banner renders live with no args.
    $deadline ??= now()->addDays(3);
@endphp

{{--
    countdown-banner-01 — "A Privileged Opportunity" Monogram promo band.
    An inverted editorial section (bg-foreground / text-background) carrying an
    uppercase wide-tracked eyebrow, a large light font-heading headline, a
    supporting line, a live four-unit countdown (<x-ui.countdown variant="plain">,
    bare figures on the inverse surface) and a CTA.
    Composes <x-ui.countdown> and <x-ui.button>.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
<section
    {{ $attributes->merge(['class' => 'bg-inverse text-inverse-foreground']) }}
    data-slot="countdown-banner"
    aria-label="{{ __($headline) }}"
>
    <div class="mx-auto flex max-w-5xl flex-col items-center gap-8 px-6 py-16 text-center sm:px-8 sm:py-20 lg:py-24">
        {{-- Eyebrow --}}
        @if ($eyebrow)
            <p class="font-body text-xs uppercase tracking-[0.3em] text-inverse-foreground/70">
                {{ __($eyebrow) }}
            </p>
        @endif

        {{-- Headline --}}
        <h2 class="max-w-3xl font-heading text-4xl font-normal leading-[1.05] tracking-tight sm:text-5xl lg:text-6xl">
            {{ __($headline) }}
        </h2>

        {{-- Subcopy --}}
        @if ($subcopy)
            <p class="max-w-xl font-body text-base leading-relaxed text-inverse-foreground/80">
                {{ __($subcopy) }}
            </p>
        @endif

        {{-- Live countdown: bare figures on the inverse surface --}}
        <x-ui.countdown
            :target-date="$deadline"
            variant="plain"
            size="lg"
            show-days="always"
            :labels="$labels"
            class="mt-2 w-full justify-center border-t border-border/15 pt-10 font-heading font-normal sm:gap-8"
            aria-label="{{ __('Time remaining') }}"
        />

        {{-- CTA --}}
        @if ($cta)
            <div class="mt-2">
                <x-ui.button :href="$cta['href']" variant="secondary" :withArrow="true">
                    {{ __($cta['label']) }}
                </x-ui.button>
            </div>
        @endif
    </div>
</section>

Installation

terminal

php artisan ui:add blocks/countdown-banner-promo

Installs these dependencies automatically:

button countdown

Registry contract

Install confidence

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

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

Registry dependencies

button countdown

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.

countdown-banner-promo.md

# Brok UI block: Countdown Banner (`countdown-banner-promo`)

An editorial full-width promo band with an uppercase eyebrow, a large display headline, a supporting line, a live Days/Hours/Minutes/Seconds countdown and a CTA — set on an inverted surface for seasonal launches and limited-time offers.

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/countdown-banner-promo
```

## Render it

```blade
<x-blocks.countdown-banner-promo />
```

## Props

- `eyebrow` (string, default `A Privileged Opportunity`)
- `headline` (string, default `For the Season's Most Wanted`)
- `subcopy` (string, default `A curated edit of our most coveted pieces, released for a limited window. When the clock runs out, the collection rests until next season.`)
- `deadline` (mixed|null, default `null`)
- `cta` (array, default `['label' => 'Shop the edit', 'href' => '#']`)
- `labels` (array, default `[]`)

## Use when

- Promoting a limited-time launch or offer with a live days/hours/minutes/seconds countdown on an inverted, full-width band.
- Pairing the countdown with an eyebrow, a large display headline and a single CTA.

## Avoid when

- Use countdown-banner-flip for the same purpose with flip-clock split-flap tiles instead of plain countdown figures.

## Rules

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

Ask about Countdown Banner 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

Promoting a limited-time launch or offer with a live days/hours/minutes/seconds countdown on an inverted, full-width band.
Pairing the countdown with an eyebrow, a large display headline and a single CTA.

Avoid when

Use countdown-banner-flip for the same purpose with flip-clock split-flap tiles instead of plain countdown figures.

Anti-patterns

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

Anatomy: root countdown-banner

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.countdown-banner-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.