Countdown Element

How long until your event starts?

Overview

The count down element is used to display the remaining time until a certain event. You can use to teaser announcements or remind the user when an event is starting.


Usage Examples

  • Teaser upcoming announcements .
  • Remind users of an upcoming event.
  • Release times
  • When is the end of the world coming?

Properties

  1. Countdown Target: Target date and time (time zones are UTC).
  2. Days Text: Label for the days (Default: Days, for translations)
  3. Hours Text: Text for hours (Default. Hours).
  4. Minutes Text: Text for minutes (Default: Minutes)
  5. Seconds Text: Text for seconds (Default: Seconds).
  6. Separator Text: Default a space sign
  7. Show Hours: Should the remaining hours be shown
  8. Show Minutes: Should the remaining minutes be shown
  9. Show Seconds: Should the remaining seconds be shown
Everything else can be configured with the general properties. 
Countdown Element Description and wireframe

See it in action

Interactions and Accessibility

The countdown element is not interactive. 

Generated HTML


<div data-countdown="1893452340000" data-day-label="Days" data-hour-label="Hours" data-minute-label="Minutes" data-second-label="Seconds" data-separator=" " data-show-hours="true" data-show-seconds="true">3290 Days 8 Hours 34 Seconds</div>

Style / CSS Selectors


.mame-countdown {
  /* The Countdown Element */
}

JavaScript

The countdown relies completely on the supplied JavaScript code.

Was this article helpful?