Countdown

Simple and html agnostic date countdown

Default

<div class="countdown-block text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Small

<div class="countdown-block countdown-small text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Tiny

<div class="countdown-block countdown-tiny text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Background

<div class="countdown-block countdown-block-img text-center block-medium-even" data-parallax="scroll">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Alternative

<div class="countdown-block text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-alt p-a">
    </div>
  </div>
</div>

Alternative small

<div class="countdown-block countdown-small text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-alt p-a">
    </div>
  </div>
</div>

Alternative tiny

<div class="countdown-block countdown-tiny text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-alt p-a">
    </div>
  </div>
</div>

Alternative BG

<div class="countdown-block countdown-block-img text-center block-medium-even" data-parallax="scroll">
  <div class="countdown-wrapper">
    <div class="countdown countdown-alt p-a">
    </div>
  </div>
</div>

Circle

<div class="countdown-block countdown-border countdown-circle text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Circle small

<div class="countdown-block countdown-border countdown-circle countdown-small text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Circle tiny

<div class="countdown-block countdown-border countdown-circle countdown-tiny text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Rounded

<div class="countdown-block countdown-border countdown-rounded text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Rounded small

<div class="countdown-block countdown-border countdown-rounded countdown-small text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Rounded tiny

<div class="countdown-block countdown-border countdown-rounded countdown-tiny text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Square

<div class="countdown-block countdown-border text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Square small

<div class="countdown-block countdown-border countdown-small text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Square tiny

<div class="countdown-block countdown-border countdown-tiny text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Vertical divider

<div class="countdown-block countdown-vertical text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Vertical divider small

<div class="countdown-block countdown-vertical countdown-small text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Vertical divider tiny

<div class="countdown-block countdown-vertical countdown-tiny text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-default p-a">
    </div>
  </div>
</div>

Inline

Default

<div class="countdown-block text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-inline p-a">
    </div>
  </div>
</div>

Border

<div class="countdown-block text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-inline panel panel-default p-a">
    </div>
  </div>
</div>

Theme color

<div class="countdown-block text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-inline bg-theme rounded-block p-a">
    </div>
  </div>
</div>

Primary color

<div class="countdown-block text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-inline bg-primary rounded-block p-a">
    </div>
  </div>
</div>

Success color

<div class="countdown-block text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-inline bg-success rounded-block p-a">
    </div>
  </div>
</div>

Info color

<div class="countdown-block text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-inline bg-info rounded-block p-a">
    </div>
  </div>
</div>

Warning color

<div class="countdown-block text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-inline bg-warning rounded-block p-a">
    </div>
  </div>
</div>

Danger color

<div class="countdown-block text-center">
  <div class="countdown-wrapper">
    <div class="countdown countdown-inline bg-danger rounded-block p-a">
    </div>
  </div>
</div>

⌃