The Countdown Block: Put a Live Timer on Your Deadline

A live countdown to any date — choose which units show, label them, box them like a flip clock, and decide what happens when it reaches zero.

A deadline in plain text doesn’t feel like a deadline

Your sale ends Friday, or enrollment closes at the end of the month, and you’ve written exactly that in a sentence. It reads like a note. Nothing about a line of text makes anyone feel the clock actually running — and wiring up a real ticking timer means a script and some date maths you’d rather not touch.

The Countdown block puts a live timer on that date. It ticks down in the browser toward the moment you set, so the deadline stops being a sentence and starts feeling like time you can watch running out.

Count down to any date and time, and show only the units you want — drop seconds for a calmer timer
Label each number and rename the words, or move the labels above the digits
Box each unit with its own background and rounded corners for a flip-clock look
Decide what happens at zero — quietly hide the timer, or swap in a message
Plus a separator, a target timezone, per-part colours and typography, spacing and responsive controls

You pick the target date, choose which units to show, and it starts ticking in the editor right away. Rename the labels, box each number for a flip-clock look, drop a colon between them — every option is in the sidebar, previewing live. Set what happens at zero, and you’re done.

See it work

Days, hours, minutes and seconds, each in its own card. The full timer, boxed like a flip clock.

90Days
04Hours
28Minutes
34Seconds

Just days, hours and minutes. The same block with the seconds turned off for a calmer count.

90Days
04Hours
28Minutes

Labels above the digits, and no card behind them. A lighter, inline look.

Days90
Hours04
Minutes28
Seconds34

A colon between each unit. The classic clock separator, with the units boxed.

90Days
04Hours
28Minutes
34Seconds

Ready to start the clock?

The Countdown block ships inside Flexa Block. Install the plugin and it’s waiting in your editor the next time you open a page.

More articles

Keep reading

Other guides from the Flexa Blocks library.

48 posts found