Default
<time class="ecl-date-block" dateTime="2019-09-26"><span class="ecl-date-block__daytime">2019-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">2019</span></time>
Try it yourself on the playground
PlaygroundOngoing
<time class="ecl-date-block ecl-date-block--ongoing" dateTime="2019-09-26"><span
class="ecl-date-block__daytime">2019-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">2019</span></time>
Try it yourself on the playground
PlaygroundCancelled
<time class="ecl-date-block ecl-date-block--cancelled" dateTime="2019-09-26"><span
class="ecl-date-block__daytime">2019-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">2019</span></time>
Try it yourself on the playground
PlaygroundPast
<time class="ecl-date-block ecl-date-block--past" dateTime="2019-09-26"><span
class="ecl-date-block__daytime">2019-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">2019</span></time>
Try it yourself on the playground
PlaygroundRescheduled
<time class="ecl-date-block ecl-date-block--rescheduled" dateTime="2019-09-26"><span
class="ecl-date-block__daytime">2019-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">2019</span></time>
Try it yourself on the playground
Playground