Countdown
A live timer counting down to - or up from - a date and time, in one of four visual styles.
Use this to put a deadline on a page and have it stay honest: days until a launch, hours until a sprint ends, or time elapsed since an incident started (count-up mode). It ticks every second in the reader's browser, so nobody is looking at a stale number. Four styles cover different tones - chunky Tiles for a landing page, a green-on-black Digital clock for a war room, Progress rings for something decorative, and Plain text when it just needs to sit quietly. You choose which units it shows, so a six-month countdown can show days only instead of a distracting seconds counter.
#See it
Every example below is a live macro, not a picture, and each one is set up the way a real page uses it. The heading above each example tells you its style, mode and size.
#Digital, countdown, medium: Sprint ends in
#Rings, countdown, large: Launch day
#Tiles, countup, large: Days since go-live
#Settings
Select a countdown in the editor and its toolbar appears underneath. The pencil opens the settings, which sit on two tabs, Content and Style, with a live preview alongside.
#Content tab
Setting | Values | What it changes |
|---|---|---|
Title | Free text, up to 75 characters | An optional heading above the counter. When you set one, the target date and time shows beneath it, formatted for each reader's own locale. Panel hint: "Optional heading - the target date is shown beneath it". |
Mode | "Count down to a date" / "Count up from a date" | Whether the timer runs toward the target or away from it. Panel hint: "Count down to the date, or count up from it". |
Target date & time / Start date & time | A date, plus a time in half-hour steps from 00:00 to 23:30 | The moment the timer counts to or from. In count-up mode the heading changes to "Start date & time". Panel hint: "The moment the timer counts to or from". |
Time zone | Any time zone, searchable, with "My timezone" pinned at the top | Which time zone the date and time above are entered in. Panel hint: "Time zone the target date and time are entered in". Opening the settings panel changes this, so check it before you save. |
Units | Days · Hours · Mins · Secs / Days · Hours · Mins / Days only / Hours · Mins · Secs / Hours · Mins / Hours only | Which time units the counter shows, largest first. Panel hint: "Which time units the counter shows". |
Message when finished | Free text | Replaces the counter entirely once a countdown reaches zero. Panel hint: "Replaces the counter once a countdown reaches zero". |
#Style tab
Setting | Values | What it changes |
|---|---|---|
Style | Tiles / Digital clock / Progress rings / Plain text | The look of the counter. Tiles shows one boxed number per unit. Digital clock is a single colon-separated readout on a dark, glowing slab. Progress rings gives each unit its own circular gauge. Plain text is a bare line like "3d 4h 12m 5s". |
Size | Small / Medium / Large | Scales the text, spacing, tile width and ring size together. Rings are 52, 76 or 104 px across. You will find it in the dropdown next to Style. |
Position | Left / Center / Right | Where the whole counter sits across the column. |
Show unit labels | On / Off | Whether "DAYS", "HOURS" and so on show under each number. In Plain text style it switches the readout between "3d 4h 12m 5s" (on) and "03:04:12:05" (off) instead. |
Accent | Brand palette colour, custom colour, or cleared | Colour of the numbers, the ring fill, the plain-text line and the finished message. Panel hint: "Leave empty to use the theme accent colour." In Digital clock style, an empty accent uses a bright green (#34d399) instead. |
Background | Brand palette colour, custom colour, or cleared | Overrides the surface colour behind the counter. Panel hint: "Overrides the counter's built-in surface colour." |
Labels | Brand palette colour, custom colour, or cleared | Colour of the unit labels under each number. Panel hint: "Colour of the unit labels." |
Show border | On / Off | Draws a border around the tiles, the digital slab or the plain-text line. |
Border colour | Brand palette colour, custom colour, or cleared | Colour of the border. Only appears in the panel when "Show border" is on. |
#Related
These carry state. Keep them true.
