Countdown Timer

An explicit event date with days, hours, minutes and seconds.

Open demo ↗

EXAMPLE EVENT

Something great is coming.

January 1, 2027 · 00:00 UTC

00 Days

00 Hours

00 Minutes

00 Seconds

HTML source & reuse instructions

Keep the CSS and JavaScript links from this page. Asset paths are relative to the modules folder.

<div class="lab-event">
<span class="eyebrow">
         EXAMPLE EVENT
        </span>
<h3>
         Something great is coming.
        </h3>
<p>
         January 1, 2027 · 00:00 UTC
        </p>
<div aria-label="Time until example event" class="lab-countdown" data-lab-deadline="2027-01-01T00:00:00Z" role="timer">
<div>
<strong data-unit="Days">
           00
          </strong>
<span>
           Days
          </span>
</div>
<div>
<strong data-unit="Hours">
           00
          </strong>
<span>
           Hours
          </span>
</div>
<div>
<strong data-unit="Minutes">
           00
          </strong>
<span>
           Minutes
          </span>
</div>
<div>
<strong data-unit="Seconds">
           00
          </strong>
<span>
           Seconds
          </span>
</div>
</div>
<p data-deadline-status="">
</p>
</div>