Adding a countdown timer to your page is simple. There are several options for providing a date and time to the control. String Simply enter a raw date time value as a string. <Rock:Countdown StartDateTime="08/27/2020 10:30AM" /> Lava Filter See the Lava documentation for more information. <Rock:Countdown StartDateTime="{{ 'Now' | DateAdd:3, 'd' }}" /> Lava Shortcode Utilize the scheduledcontent Lava shortcode. {[ scheduledcontent scheduleid:'3' showwhen:'both' ]} <Rock:Countdown StartDateTime="{{ NextOccurrenceDateTime }}" /> {[ endscheduledcontent ]} Note: This shortcode's logic does take some overhead. You may consider caching the output if your page will be heavily visited, even if it's only cached for a minute or two. Properties PropertyTypeDescription StartDateTimeobjectThe date/time that the event starts can be provided as either a string or a date object. ShowLabelsboolDetermines if the date unit labels below the values should be displayed. Default is to show. AbbreviateLabelsboolDetermines if the labels values should be abbreviated (Minutes vs Mins). The default is to abbreviate. SeparatorValuestringThe character to use to separate values. The default is ':'. CompletedMessageobjectWhat to show at when the counter reaches 0. This can be either a string message or a view control. If no value is provided the counter will end at 00:00:00:00. Special CSS Classes The countdown timer will add specific CSS classes as it gets close to completion. These are outlined below. CSS ClassPurpose .less-than-dayAdd when the countdown timer is less and a day from completion. .less-than-hourAdded when there is less than 60 minutes on the timer. .less-than-15-minsAdded when there is less than 15 minutes on the timer. .less-than-5-minsAdded when there is less than 5 minutes left. .countdown-completeWhen the timer has reached 0. CSS X-Ray While the countdown timer looks simple it's actually made up of a series of StackLayouts and Labels. This is to ensure that everything says aligned as the timer ticks. Below is a view of the various CSS classes available to you. Note: Each unit of time is actually a .countdown-field though we only note it for clarity once above. Likewise each separator has the same classes.