Spring Sale: Our new update is live! Save 30% on Pro and Pro Unlimited for a limited time.


In this article, we're going to discuss the Countdown Element and its settings. The Countdown Element can be used to add countdowns in pages created in either Cornerstone or Pro's Content Builder (can also be used in Footer and Header as well). So let's dive in!

  1. Countdown
  2. Setup
  3. Format
  4. Margin & Padding
  5. Border
  6. Box Shadow
  7. Customize
  8. Summary

The Countdown element adds a countdown on the page. To add the Countdown Element, simply search for "Countdown" and drag "Countdown" to the canvas.


In addition to the general appearance settings of the Element, this is also the section where the Countdown End time is set as well as the format of the countdown output.

Add Countdown Element


The Setup section consists of the basic settings you'll want to add when setting up a Countdown. The Countdown End sets the end time for the countdown. Always ensure that the date is in the future. In addition to that function the other parameters are purely related to styling. Once you've set the countdown date you can see the visual changes in the preview and tweak everything to your needs.

Countdown Setup


The Format section is important when it comes to how the countdown is appearing on your page. By selecting and de-selecting the Units Displays you can narrow done if seconds, minutes, hours or days are displayed.

Other options are:

  • Hide on End - Hides the counter when it ends.
  • Hide Empty - Hides when the input is empty.
  • Leading Zero - Enable or disable the leading zero in the countdown.
  • Labels - Show the day, hour, minute, second label in conjuction of the number or not.
Countdown Format

Margin & Padding

The Margin & Padding section allows you to style the counter by adding margin or padding to the element.

Countdown Margin & Padding


The Border function gives you plently of options to add a border around the countdown to make it visually pop.

Countdown Border

Box Shadow

The Box Shadow control grouping allows you to add a box shadow to the counter to make it stand out.

Countdown Box Shadow


The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes


To sum up, we've discussed the Countdown Element. We've discussed that a Countdown Element is an easy tool for adding countdowns on a page and we've learned how to change it's content and design and delved into details of the Countdown Element settings.

See something inaccurate? Let us know