Components

Date blocks

Default

Fullscreen
<time class="ecl-date-block" dateTime="2019-09-26"><span class="ecl-u-sr-only">2019-09-26</span><span aria-hidden="true"
    class="ecl-date-block__day">26</span><abbr aria-hidden="true" title="September"
    class="ecl-date-block__month">Sep</abbr><span aria-hidden="true" class="ecl-date-block__year">2019</span></time>

Try it yourself on the playground

Playground

Ongoing

Fullscreen
<time class="ecl-date-block ecl-date-block--ongoing" dateTime="2019-09-26"><span
    class="ecl-u-sr-only">2019-09-26</span><span aria-hidden="true" class="ecl-date-block__day">26</span><abbr
    aria-hidden="true" title="September" class="ecl-date-block__month">Sep</abbr><span aria-hidden="true"
    class="ecl-date-block__year">2019</span></time>

Try it yourself on the playground

Playground

Cancelled

Fullscreen
<time class="ecl-date-block ecl-date-block--canceled" dateTime="2019-09-26"><span
    class="ecl-u-sr-only">2019-09-26</span><span aria-hidden="true" class="ecl-date-block__day">26</span><abbr
    aria-hidden="true" title="September" class="ecl-date-block__month">Sep</abbr><span aria-hidden="true"
    class="ecl-date-block__year">2019</span></time>

Try it yourself on the playground

Playground

Past

Fullscreen
<time class="ecl-date-block ecl-date-block--past" dateTime="2019-09-26"><span
    class="ecl-u-sr-only">2019-09-26</span><span aria-hidden="true" class="ecl-date-block__day">26</span><abbr
    aria-hidden="true" title="September" class="ecl-date-block__month">Sep</abbr><span aria-hidden="true"
    class="ecl-date-block__year">2019</span></time>

Try it yourself on the playground

Playground