Only count down when something genuinely changes at zero. Use the Countdown block for an event, registration deadline, launch or offer tied to a real date and time.
It is not a device for manufacturing urgency. If nothing changes after the deadline, a countdown does not belong there.
The deadline should be real and verifiable. Do not reset it for each visitor, and do not imply that something expires when it actually does not.
Example countdown to 1 January 2030 at 09:00.
The same target time with a large, restrained number display.
--:--:--
The post-deadline state deserves as much thought as the countdown itself. “Registration has closed”, “The event has started” or a link to the next relevant page is much better than leaving a timer sitting at zero.
Alongside the target time, you can design both the countdown itself and what appears after it expires.
A specific date and time. The timer counts down to that absolute moment rather than restarting for each visitor.
Boxed, Minimal, Inline, Flip clock, Rings, Giant numerals, Single unit, Floating pill or Calendar page – there is a sample of each below.
Turn seconds on or off. With seconds hidden, the display updates less aggressively and feels calmer.
Align the headline, supporting copy and timer left, centre or right.
Once the timer reaches zero, the countdown is replaced by the text you set for the expired state.
Optionally send visitors to a relevant next page once the deadline has passed.
Available as a fourth style next to Boxed, Minimal and Inline.
Each digit sits on its own split-flap tile and flips over when it changes, like an old station departure board.
The tiles take the block's text colour, so they fit both light and dark backgrounds.
If a visitor's device asks for less motion, the digits change without the flip.
The same target time with flipping digits.
A compact version for cases where the countdown is not the main visual element.
—
Alongside Boxed, Minimal, Inline and Flip clock, you can now choose from five new styles.
Each unit gets its own ring, filled by what is left of it, with a thin or bold stroke. A striking yet calm choice for an event page.
Very large numerals between hairlines, with the last unit in the accent colour if you like. Best when the countdown is the main element of the page.
One large number: days, then hours on the last day and minutes in the last hour, with the exact time left underneath if you want it. Best when one easy-to-read number is enough.
The block sits on one line, and while it is out of view a dark or light pill at the foot of the screen shows the time left; one tap jumps back to the block, and visitors can close it. Made for long pages where the deadline should stay in sight while scrolling.
A calendar page showing the day of the date, with the weekday and time if you want them, beside the countdown: left or right on a wide screen, above it on a phone. Suits events where the date itself matters.
Counting down to the fictional Spring Garden Opening (17 April 2027, 10:00), with bold rings and seconds.
The same target time in giant numerals, with the last unit in the accent colour.
The same target time as one large number, with the exact time left underneath.
Keep scrolling: while this block is out of view, a pill at the foot of the screen shows the time left.
—
The same target time beside a calendar page that also shows the weekday and the time.
A countdown only adds value when the situation genuinely depends on time.
MAKE THE URGENCY REAL
Set a real target time, plan the post-deadline state and show seconds only when they actually matter.