8 #date-block Date Block

Date components

Example

Mon 12 Oct

Mon-Wed 04-06 Apr

<div class="date-block">
  <span class="date-block__day-text">Mon</span>
  <span class="date-block__day">12</span>
  <span class="date-block__month">Oct</span>
</div>

<br><br>

<div class="date-block">
  <span class="date-block__day-text">Mon-Wed</span>
  <span class="date-block__day">04-06</span>
  <span class="date-block__month">Apr</span>
</div>

8.1 #date-block.event Event Date Block

Date components

Examples

Mon 12 Oct

Mon-Wed 04-06 Apr-May

.ongoing

Ongoing live-streaming event date block

Mon 12 Oct

Mon-Wed 04-06 Apr-May

.cancelled

cancelled Event date block

Mon 12 Oct

Mon-Wed 04-06 Apr-May

<div class="date-block event [modifier class]">
  <span class="date-block__day-text">Mon</span>
  <span class="date-block__day">12</span>
  <span class="date-block__month">Oct</span>
</div>
<br><br>

<div class="date-block event [modifier class]">
  <span class="date-block__day-text">Mon-Wed</span>
  <span class="date-block__day">04-06</span>
  <span class="date-block__month">Apr-May</span>
</div>

8.1.1 #date-block.event.past Past Event Date Block

Date components

Examples

12 Oct 2015

04-06 Apr 2015

.past

past Event date block

12 Oct 2015

04-06 Apr 2015

<div class="date-block event [modifier class]">
  <span class="date-block__day">12</span>
  <span class="date-block__month">Oct</span>
  <span class="date-block__year">2015</span>
</div>
<br><br>

<div class="date-block event [modifier class]">
  <span class="date-block__day">04-06</span>
  <span class="date-block__month">Apr</span>
  <span class="date-block__year">2015</span>
</div>