Europa Component Library

Date blocks

Documentation • Demo

Date blocks

Why and how to use this component

Users need a way to quickly see an event’s date and status.\ The solution is a date block that allows users to easily visualize this information.

When to use this component

  • for lists of events and agenda pages

Do not use this component

  • in any other situation except listings
{% include '@ec-europa/ecl-date-blocks' with variant %}
 
/* Default event */
{
  "week_day": "Tue",
  "day": "12",
  "month": "Jan"
}


/* Ongoing event */
{
  "variant": "ongoing",
  "week_day": "Wed-Fri",
  "day": "31-11",
  "month": "May-Jun"
}


/* Cancelled event */
{
  "variant": "cancelled",
  "week_day": "Mon",
  "day": "11",
  "month": "Jan"
}


/* Past event */
{
  "variant": "past",
  "day": "2-4",
  "month": "Feb",
  "year": "2015"
}


<!-- Default event -->
<div class="ecl-date-block">
  <div class="ecl-date-block__body">
    <span class="ecl-date-block__week-day">Tue</span>

    <span class="ecl-date-block__day">12</span>

    <span class="ecl-date-block__month">Jan</span>

  </div>
</div>


<!-- Ongoing event -->
<div class="ecl-date-block ecl-date-block--ongoing">
  <div class="ecl-date-block__body">
    <span class="ecl-date-block__week-day">Wed-Fri</span>

    <span class="ecl-date-block__day">31-11</span>

    <span class="ecl-date-block__month">May-Jun</span>

  </div>
</div>


<!-- Cancelled event -->
<div class="ecl-date-block ecl-date-block--cancelled">
  <div class="ecl-date-block__body">
    <span class="ecl-date-block__week-day">Mon</span>

    <span class="ecl-date-block__day">11</span>

    <span class="ecl-date-block__month">Jan</span>

  </div>
</div>


<!-- Past event -->
<div class="ecl-date-block ecl-date-block--past">
  <div class="ecl-date-block__body">

    <span class="ecl-date-block__day">2-4</span>

    <span class="ecl-date-block__month">Feb</span>

    <span class="ecl-date-block__year">2015</span>
  </div>
</div>
  • Content: 
    /*
 * Date block
 * @define date-block
 */

.ecl-date-block--ongoing {
  background-color: map-get($ecl-colors, 'grey-50');
}
.ecl-date-block {
  border-bottom: 0.2em solid map-get($ecl-colors, 'grey-50');
}
  • URL: /components/raw/ema-date-blocks/ema-date-blocks.scss
  • Filesystem Path: framework/components/ema-date-blocks/ema-date-blocks.scss
  • Size: 208 Bytes
  • Handle: @ec-europa/ema-date-blocks
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ema-date-blocks/ema-date-blocks.twig