Countdown Timer — Documentation

Countdown Timer displays a live ticking countdown to a target date and time. It renders an initial value server-side on every page load, then the frontend script takes over and ticks every second. Use it for sale deadlines, launch dates, event countdowns, or any time-sensitive call to action.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Countdown Timer. The block drops in with a default target date seven days from the current server time and all four units visible.

Target date

Set the target in the Date & Time field. It accepts any date-time value — pick from the date picker or type an ISO 8601 string directly. If no date is set the block defaults to seven days from the server's current time.

Display units

Each time unit can be shown or hidden independently.

Toggle	Default
Show Days	On
Show Hours	On
Show Minutes	On
Show Seconds	On

Hide Days for countdowns under 24 hours; hide Seconds for a calmer visual on longer deadlines.

Labels

A separate text field for each unit's caption below the number.

Field	Default
Days Label	`Days`
Hours Label	`Hours`
Minutes Label	`Minutes`
Seconds Label	`Seconds`

Use these to translate labels or shorten them — D, H, M, S for a compact layout. Label fields stay editable whether or not the unit is shown.

Layout

Layout — Horizontal (default) puts units side by side; Vertical stacks them in a column, useful in narrow sidebars.
Alignment — positions the unit group: Left, Center (default), or Right. Per-device.
Gap Between Units — spacing between unit tiles. Per-device.

Both Alignment and Gap carry a device switcher, so a row that fits on desktop can tighten or re-align on mobile without a second block.

Expired state

When the countdown reaches zero the block switches to its expired state. Set the behavior with On expiry:

Action	Behavior
Show Message	Replaces the timer with the text from Expired message (default: `Time's up!`)
Hide Block	Removes the timer from the page entirely
Redirect to URL	Navigates the visitor to the URL in Redirect URL

The expired state is evaluated server-side on initial render and re-evaluated each second in the browser, so a visitor landing after the deadline sees it immediately.

The block sidebar is split into two tabs. Settings is what the timer does; Styles is how it looks, organised by the parts you can see.

Tab	Section	Covers
Settings	Target Date	Date and time
Settings	Display Units	Show days / hours / minutes / seconds
Settings	Labels	Caption text per unit
Settings	Layout	Direction, alignment, gap
Settings	Expired State	On-expiry action, message, redirect URL
Settings	Advanced	Visibility, Position, anchor, CSS class
Styles	Digits	The number tiles
Styles	Labels	The unit captions
Styles	Spacing	Padding and margin on the outer wrapper

Styling

Part	Rows
Digits	Digit Color, Background, Typography, Border, Radius, Shadow, Min width (per device)
Labels	Label Color, Typography

The Digits background is the full background control — not just a flat color. Each unit tile can take a solid color, a gradient, or an image with an overlay, the same control the Advanced Section uses.

The block supports Wide and Full alignment from the toolbar and an HTML anchor.

HTML output

// terminalhtml

<div class="axiom-blocks-countdown axiom-blocks-countdown--horizontal axiom-blocks-countdown--align-center">
  <div
    class="axiom-blocks-countdown__container"
    style="display: flex; flex-wrap: wrap; gap: 20px;"
    data-target-date="2026-06-01T00:00:00+00:00"
    data-expired-action="showMessage"
    data-expired-message="Time's up!"
    data-redirect-url=""
  >
    <div class="axiom-blocks-countdown__unit" data-unit="days"
         style="--ab-cd-digit-bg: #f0f0f0; --ab-cd-radius-tl: 8px; --ab-cd-digit-minw: 80px;">
      <div class="axiom-blocks-countdown__digit" style="--ab-cd-digit-color: #333333;">16</div>
      <div class="axiom-blocks-countdown__label" style="--ab-cd-label-color: #666666;">Days</div>
    </div>
    <!-- hours, minutes, seconds follow the same shape -->
  </div>
</div>

When the timer expires and the action is Show message: