Countdown

// src/components/elements/countdown/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/countdown
additionalProperties: false
required:
  - counter_end_timestamp
properties:
  counter_end_timestamp:
    type: number
    description: the provided timestamp is in UNIX format, in seconds

// src/components/elements/countdown/mocks.yaml

counter_end_timestamp: 1903441721

// src/components/elements/countdown/countdown.html.twig

{% set elements = [
    {label: "Tage", name: "days"},
    {label: "Stunden", name: "hours"},
    {label: "Minuten", name: "minutes"},
    {label: "Sekunden", name: "seconds"}
  ]
%}

<div class="Countdown js-Countdown{% if class %} {{ class }}{% endif %}" data-counter-end-timestamp="{{ counter_end_timestamp }}">
  {% for element in elements %}
    {% if loop.index0 != 0 %}
      <span class="Countdown-divider u-typo-headline1">:</span>
    {% endif %}
    <div class="Countdown-number">
      <span class="Countdown-numberValue u-typo-headline1 js-Countdown-{{ element.name }}">00</span>
      <span class="Countdown-numberName">{{ element.label }}</span>
    </div>
  {% endfor %}
</div>