Skip to content
Countdown
Overview
A dynamic countdown timer block that displays days, hours, minutes, and seconds until a specified date and time. Uses Alpine.js for real-time updates and supports customizable styling options.
Common use cases
- Create urgency for limited-time promotions or sales
- Display event countdown timers
- Show time remaining for product launches or announcements
- Automatically hide when countdown expires
Block settings
General
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals visibility settings | Checkbox (default: false) |
Content
| Setting | Description | Options |
|---|---|---|
| Countdown date | Target date for the countdown | Text input |
| Countdown time | Target time for the countdown | Text input (default: 00:00) |
| Show labels | Displays labels (Days, Hours, Minutes, Seconds) above each value | Checkbox (default: true) |
Spacing
| Setting | Description | Options |
|---|---|---|
| Enable horizontal padding | Adds horizontal padding around the content | Checkbox (default: false) |
| Enable top padding | Adds top padding around the content | Checkbox (default: false) |
| Enable bottom padding | Adds bottom padding around the content | Checkbox (default: false) |
Color
| Setting | Description | Options |
|---|---|---|
| Color scheme | Controls the background color scheme | • Body |
| Border color | Controls the border color between timer segments | • Subtle (default) |
Style
| Setting | Description | Options |
|---|---|---|
| Font family | Controls the font family used for the timer numbers | • Standard |
| Font size | Controls the font size of the timer numbers | • Smaller |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |