Countdown Block

Use Countdown to make a real deadline visible without turning the page into a distraction. The live timer below demonstrates the same standard block documented in the editor screenshots, with a clear headline, all four time units, and an explicit expired state.

Properties

Properties controls the timer’s content and the units that visitors see. Configure the deadline and expired state before changing the visual treatment.

Headline

Headline is the short line above the timer, such as “Launch offer ends in”. It should name the event or deadline instead of repeating generic urgency.

Target Date & Time

Target Date & Time defines the moment the timer reaches zero. Confirm the intended date, time, and site timezone, then test the result close to the deadline so visitors do not see an unexpected hour shift.

Expired Message

Expired Message replaces the running timer when the deadline passes. Write a useful next step—such as viewing results, joining a waitlist, or returning to the offer page—instead of leaving an unexplained zero state.

Display

Display determines whether the timer includes the longest and shortest units. Keep only the units that improve comprehension; fewer units can make a short campaign easier to scan.

Show Days

Show Days adds the Days column. Keep it enabled for deadlines more than 24 hours away; disable it when an hours-only countdown communicates the remaining time more naturally.

Show Seconds

Show Seconds adds a live seconds value. It can help during a short launch window, but it also creates constant motion, so remove it when second-by-second precision is not useful.

Layout

Alignment places the complete countdown at the left, center, or right of its frame. Advanced settings can control mobile placement and an optional block link; use a whole-block link only when the destination is clear and the complete timer remains an understandable target.

Style Panel

The Body area styles the complete countdown surface. The control order matters: choose a Style Preset, select an Area, choose Desktop, Tablet, or Mobile, then edit the supported state.

Style Preset

Default Theme is the site-wide Countdown baseline. A custom preset is a reusable, class-like treatment for repeated countdowns; use per-block overrides only for an intentional exception.

Body

Body exposes Spacing, Background, Borders, Typography, and Effects in Default. Give every bounded timer surface deliberate padding so its headline and units never touch the border at any breakpoint.

Desktop, Tablet, and Mobile

Desktop establishes the primary treatment. Tablet and Mobile can override padding, radius, alignment, and supported visual values. Check them explicitly instead of assuming a desktop inset will remain safe on narrower screens.

Default state

Set the stable resting appearance first: readable contrast, balanced padding, an intentional surface, and restrained effects. The timer should remain clear even when hover is unavailable.

On Hover

On Hover supports a focused visual response for pointer users. It must remain supplementary: touch and keyboard users still need a complete, readable Default state.

Background

Hover can change the Body background color or gradient, opacity, brightness, and supported fill animation. Prefer one clear change instead of several competing effects.

Borders, Effects, and Transition

Borders can change paint or fill treatment; Effects can add a restrained shadow or glow; Transition controls duration and timing. Keep the countdown stationary so it does not move away from the pointer.

Areas

Countdown separates its surface, shared text roles, and individual time units. Choose the narrowest Area that expresses the intended change so one override does not unintentionally restyle the whole timer.

Body

Body controls the complete surface: spacing, background, borders, typography alignment, and effects.

Headline, Number, and Label

Headline styles the introductory line. Number styles every numeric value. Label styles the Days, Hours, Minutes, and Seconds captions as one shared role.

Days, Hours, Minutes, and Seconds

The four unit Areas provide targeted color overrides. Use them only when a unit needs intentional emphasis; avoid decorative rainbow treatments that weaken scanning.

Typography

Typography is role-based. The shared roles keep all four units consistent while still allowing a targeted color override for an individual unit.

Headline

Headline supports color, font size, family, and weight. Keep it clearly subordinate to the remaining time while preserving enough contrast against the Body surface.

Number

Number controls the shared numeric emphasis. Test values with one and three digits so the scale remains stable as days decrease and hours, minutes, or seconds change.

Label

Label styles the unit captions. Keep the labels readable at mobile width; tiny all-caps labels may look neat on desktop but become difficult to distinguish on a phone.

Unit color overrides

Days, Hours, Minutes, and Seconds each expose a focused Color control. The override applies to that unit without changing the shared Number and Label roles.

Use unit emphasis sparingly

Highlight one unit only when it carries meaning—for example, Days in a long pre-launch phase or Seconds during a final live window. Keep the remaining units visually coherent.

Motion

Countdown values already update continuously. If you add an entrance animation, keep it short and non-repeating, and verify the experience with reduced-motion preferences. Hover motion should never shift the timer or make the changing digits harder to read.

Property summary

Headline — short context shown above the timer.

Target Date & Time — the deadline that drives the remaining values.

Expired Message — replacement content shown after the deadline.

Show Days — includes or removes the Days unit.

Show Seconds — includes or removes live seconds.

Alignment — places the complete timer left, center, or right inside its frame.

Responsive behavior

Countdown is content-driven and starts from an 8-column by 4-row frame. Its final rendered height follows the headline, units, padding, border, and the available width.

On tablet and mobile, verify that all enabled units remain readable, labels do not collide, the Body keeps a deliberate inset, and the timer does not create horizontal overflow. If four units become too dense, shorten the headline or remove a nonessential unit before reducing text to an inaccessible size.

Accessibility

• State what the countdown is for; a changing number without context is not meaningful.

• Provide an expired message that explains what happened and, when useful, what visitors can do next.

• Do not rely on rapid motion, color, or urgency alone. Respect reduced-motion preferences and avoid repeated entrance effects.

• Preserve sufficient contrast for the headline, numbers, labels, border, and hover state.

• Keep the visual and DOM reading order consistent: headline, days, hours, minutes, seconds, then the expired result.

• Avoid unnecessary announcements of every second to assistive technology; the timer should communicate the deadline without creating constant interruptions.

Best practices

• Use a real target date and verify the site timezone before publishing.

• Reserve Countdown for a genuine deadline, launch, registration window, or scheduled event.

• Show only the units that help visitors make a decision.

• Reuse a Style Preset for repeated countdown treatments and keep one-off overrides intentional.

• Test the running, near-zero, expired, tablet, mobile, and no-hover experiences.

Common mistakes

• Using a fake or endlessly resetting deadline, which damages trust.

• Forgetting timezone behavior and showing the wrong end time to visitors.

• Leaving the default expired message or an unexplained zero state.

• Keeping Days and Seconds when they add clutter instead of useful precision.

• Using an oversized grid frame that creates empty space around a compact timer.

• Designing essential contrast or information only in On Hover.

Quick recipe

Add Countdown to an isolated grid section, write a specific headline, set and verify the target date, replace the expired message, keep only the necessary units, style the Body before the text roles, then test the running and expired result at desktop, tablet, and mobile widths.