Intro
Advanced Countdown & Content Reveal System
Create powerful countdown experiences, build urgency, and control content visibility based on time, all directly inside Elements.
Whether you're launching a product, running a limited offer, or revealing content at a precise moment, Countdown gives you full control over timing, layout, and what happens when the timer reaches zero.
Countdown is more than a timer. It is a complete timing system for interactive layouts, letting you display remaining time and dynamically change content when the countdown ends. Use it to create urgency, unlock content, hide sections, or trigger alternative layouts automatically — no code required.
ⓘ Build urgency and timed experiences. Countdown is ideal for: product launches and pre-orders, limited-time offers and promotions, Black Friday and seasonal sales, webinar and event registrations, coming soon pages, content unlock systems, membership or gated content releases, and marketing landing pages with urgency triggers.
Countdown Options
Countdown
✓ The countdown is based on a single essential value: the Target Date. This value defines the exact moment when the countdown reaches zero and must be entered in the following format:
Month DD, YYYY HH:MM:SS, Example: December 31, 2030 23:59:59
The month must be written in full English (e.g. January, February, March…)
The day must be numeric (DD)
The year must be four digits (YYYY)
The time must use 24-hour format (HH:MM:SS).
ⓘ Incorrect formatting will prevent the countdown from starting or calculating the remaining time correctly.
End Actions
✓ Area 1 – This panel defines what happens when the countdown reaches zero and connects the Countdown component with dynamic content behaviors inside Elements.
✓ Area 2 – Dropzone to Hide + Dropzone to Show.
Expired State Content: Defines what happens at expiration by hiding or revealing content blocks. This allows you to switch page sections at the exact moment the countdown ends, creating a clear before/after state.
When the countdown reaches its target date, you can:
- Display custom ending text, Hide the countdown completely, Replace content using dropzones, Reveal new sections dynamically and apply animations to newly shown content.
ⓘ This turns a simple timer into a state-driven content system.
Countdown Style
✓ Flexible structure for any design
- Inline layout for compact designs
- Stacked layout for vertical emphasis
- Optional separators between values
- Adjustable spacing between time units
- Full control over alignment and distribution
Data Style
✓ Countdown integrates deeply with the Elements design system, giving full control over every visual detail:
Numbers: Font, size, weight, and spacing control
Background color or gradient support
Border, radius, and shadow styling
Text shadow and transform options
Fixed width system for consistent alignment
Label Style
✓ Fully customizable design system, countdown integrates deeply with the Elements design system:
Labels: Independent typography controls
Custom font, size, weight, and color
Alignment control (left, center, right)
Case transformation (uppercase, lowercase, small caps)
Adjustable spacing from numbers
Text Token
✓ Countdown values can be used as dynamic tokens inside any text component, inserted directly into natural language phrases that update in real time. This enables time-based messages that adapt automatically as the countdown progresses.
Examples:
“5 days left”
“Only 2 hours remaining”
“Offer ends in 10 minutes”
Each unit supports:
Singular / plural labels
Zero-state behavior
Custom token placement (before or after text)
Demo Mode
✓ Demo Mode lets you simulate the full countdown flow without waiting in real time. It allows you to preview both the active countdown and its expiration state directly in the editor.
You can set how quickly the countdown reaches the end (jump to duration) and how long the final message is shown before the component resets. Set a short duration for testing, Auto-restart after expiration, Preview end-state transitions.
Background
Background
An optional container background with color, opacity, and shadow. Disable it to inherit the background from the parent element instead
Background: color and Opacity: from fully transparent to solid.
Shadow: box shadow applied to the container.
Spacing
✓ Standard Elements margin and padding controls for the component container. Enable to activate, disable to let the surrounding layout handle spacing.
Borders
✓ Add a border and rounded corners to the Countdown Area
Enable — activates the border.
Color / Opacity — full theme color picker with opacity control.
Width — set individually per side.
Radius — rounded corners.
Advanced
✓ Fine-tune visibility and extend the component with custom classes for edge cases and advanced layouts.
Custom CSS classes field