Components

Date blocks

Upcoming and ongoing

Fullscreen
<time class="ecl-date-block ecl-date-block--ongoing" datetime="2024-09-26"><span
    class="ecl-date-block__daytime">2024-09-26</span><span class="ecl-date-block__day" aria-hidden="true">26</span><abbr
    title="September" class="ecl-date-block__month" aria-hidden="true">Sep</abbr><span class="ecl-date-block__year"
    aria-hidden="true">2024</span></time>

Try it yourself on the playground

Playground

Past and cancelled

Fullscreen
<time class="ecl-date-block ecl-date-block--past" datetime="2024-09-26"><span
    class="ecl-date-block__daytime">2024-09-26</span><span class="ecl-date-block__day" aria-hidden="true">26</span><abbr
    title="September" class="ecl-date-block__month" aria-hidden="true">Sep</abbr><span class="ecl-date-block__year"
    aria-hidden="true">2024</span></time>

Try it yourself on the playground

Playground