# Countdown

### Section overview

The Countdown section displays a countdown timer for limited-time offers or promotions, with customizable content and an optional image.

#### Common use cases

* Showcasing time-limited promotions or sales
* Announcing upcoming product launches or events
* Creating urgency for special offers
* Highlighting seasonal campaigns with end dates

#### Usage tips

* Set a realistic and accurate countdown date in the proper format (MM/DD/YYYY)
* Pair the countdown with clear, compelling content explaining the offer
* Consider mobile users by adjusting block widths appropriately for different devices
* Use color schemes that align with your brand while ensuring text remains legible

### Section settings

| Setting              | Description                                                  |
| -------------------- | ------------------------------------------------------------ |
| Countdown date       | The target date for the countdown timer (format: MM/DD/YYYY) |
| Top spacing          | Controls the padding space above the section (0-300px)       |
| Bottom spacing       | Controls the padding space below the section (0-300px)       |
| Color scheme         | Choose from preset color themes or select custom             |
| Custom color         | Define a custom background color when "custom" is selected   |
| Text color           | Choose default, force light, or force dark text              |
| Border color         | Select subtle or strong border colors                        |
| Button color         | Choose from various button styles (primary, secondary, etc.) |
| Enable color fade    | Enables smooth color transitions when scrolling              |
| Border position      | Choose where borders appear (none, top, bottom, or both)     |
| Vertical alignment   | Controls how blocks align vertically (top, middle, bottom)   |
| Horizontal alignment | Controls how blocks align horizontally (left, center, right) |
| Enable margin        | Toggles margin around the section content                    |
| Visibility           | Controls section visibility across device types              |

### Block settings

#### Countdown

The primary block that displays the countdown timer along with optional heading, content, and call-to-action button.

Block limit: 1

| Setting              | Description                                                       |
| -------------------- | ----------------------------------------------------------------- |
| Heading              | Title text displayed above the countdown                          |
| Content              | Rich text content to describe the offer or promotion              |
| Button label         | Text displayed on the call-to-action button                       |
| Button url           | Link destination when button is clicked                           |
| Desktop width        | Controls block width on desktop devices (1/12 to 12/12)           |
| Mobile width         | Controls block width on mobile devices (1/12 to 12/12)            |
| Horizontal alignment | Controls content alignment within the block (left, center, right) |

#### Image

An optional visual element to accompany the countdown timer.

Block limit: 1

| Setting       | Description                                             |
| ------------- | ------------------------------------------------------- |
| Image         | The image to display alongside the countdown content    |
| Desktop width | Controls image width on desktop devices (1/12 to 12/12) |
| Mobile width  | Controls image width on mobile devices (1/12 to 12/12)  |