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

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 • Neutral • Accent 1 (default) • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent
Border color	Controls the border color between timer segments	• Subtle (default) • Strong • None

Style

Setting	Description	Options
Font family	Controls the font family used for the timer numbers	• Standard • Heading (default) • Subheading • Accent Visible when font size contains 'type--'
Font size	Controls the font size of the timer numbers	• Smaller • Small • Default • Big • Bigger • Heading 1 (default) • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only