Countdown Banner

Open source

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

2 of 2

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

@props([
    'eyebrow'   => 'Limited-Time Release',
    'headline'  => 'The Countdown Has Begun',
    'subcopy'   => 'Our seasonal drop unlocks for a short window only. Set your reminder — when the tiles hit zero, the offer flips closed.',
    'deadline'  => null,
    'cta'       => ['label' => 'Reserve your spot', '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-02 — "Countdown Flip" split-flap promo band.
    A family sibling of countdown-banner-01 (same data-slot="countdown-banner",
    same purpose: a live promo countdown), but the units render as flip-clock
    SPLIT-FLAP TILES: <x-ui.flip-clock countdown> draws one outlined tile per
    digit that folds over when its value changes, with a unit label under each
    pair. Eyebrow + font-heading headline + supporting line + CTA, like -01.
    Composes <x-ui.flip-clock> and <x-ui.button>.
    Semantic tokens only, logical spacing, WCAG AA, RTL-safe.
--}}
<x-ui.section
    space="none" surface="muted" {{ $attributes }}
    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-base uppercase tracking-[0.3em] text-muted-foreground">
                {{ __($eyebrow) }}
            </p>
        @endif

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

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

        {{-- Live split-flap countdown with unit labels --}}
        <x-ui.flip-clock
            countdown
            :target-date="$deadline"
            show-days="always"
            variant="outline"
            size="lg"
            :labels="$labels ?: true"
            class="mt-2 justify-center pt-6"
            aria-label="{{ __('Time remaining') }}"
        />

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

Installation

terminal

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

Installs these dependencies automatically:

button flip-clock section

Registry contract

Install confidence

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

Registry dependencies

button flip-clock 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.

countdown-banner-flip.md

# Brok UI block: Countdown Flip (`countdown-banner-flip`)

A promo countdown band whose Days/Hours/Minutes/Seconds units render as split-flap flip-clock card tiles that animate on each tick, paired with an eyebrow, a display headline, a supporting line and a CTA.

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-flip
```

## Render it

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

## Props

- `eyebrow` (string, default `Limited-Time Release`)
- `headline` (string, default `The Countdown Has Begun`)
- `subcopy` (string, default `Our seasonal drop unlocks for a short window only. Set your reminder — when the tiles hit zero, the offer flips closed.`)
- `deadline` (mixed|null, default `null`)
- `cta` (array, default `['label' => 'Reserve your spot', 'href' => '#']`)
- `labels` (array, default `[]`)

## Use when

- Promoting a limited-time launch with a live countdown rendered as animated split-flap flip-clock tiles per unit.
- Pairing the flip-clock countdown with an eyebrow, headline, supporting line and CTA, like countdown-banner-promo.

## Avoid when

- Use countdown-banner-promo for plain countdown figures instead of animated flip-clock tiles.

## Rules

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

Ask about Countdown Flip 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 with a live countdown rendered as animated split-flap flip-clock tiles per unit.
Pairing the flip-clock countdown with an eyebrow, headline, supporting line and CTA, like countdown-banner-promo.

Avoid when

Use countdown-banner-promo for plain countdown figures instead of animated flip-clock tiles.

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-flip />

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.