Countdown web component

Out of the box

Some basic styles in regular CSS, with the numbers' and units' sizes controlled with --countdown-number-font-size and --countdown-unit-font-size.

Doors open in

Add your own styles

Same idea, regular CSS controls almost all of the styles.

Doors open in

Countdown using a custom template

As long as the template has a <time> element in it you're good to go.

Show markup 
          
<template id="marketing">
  <style>
    p {
      font-size: 2rem;
    }

    time {
      display: flex;
      justify-content: space-around;
      height: 10em;
    }

    .item:first-child {
      align-self: flex-end;
    }

    .item:nth-child(2) {
      align-self: center;
    }

    .item:last-child {
      align-self: center;
    }

    .item {
      display: flex;
    }

    .number {
      order: 1;
    }

    .unit {
      color: red;
      font-size: 3rem;
      font-weight: bold;
    }
  </style>
  <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition in:</p>
  <time></time>
</template>

Hard businessing starts on 1st Jan 2020 at 8am.

Clock runs down to zeros

This is the default behaviour. I'm going to make an optional property that takes a string for a message to take the place of the zeros.