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.

109Days
20Hours
02Minutes
54Seconds

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

109Days
20Hours
02Minutes

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

Days109
Hours20
Minutes02
Seconds54

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

109Days
20Hours
02Minutes
54Seconds

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