Europa Component Library

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
{#
  - "variant" (string); display variant (default: '')
  - "week_day" (string); day(s) of the week of the event (default: '')
  - "day" (string); day number(s) of the event (default: '')
  - "month" (string); month(s) of the event (default: '')
  - "year" (string); year(s) of the event (default: '')
  - "extra_classes" (string): extra CSS classes to be added
  - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}

{% set variant = variant|default('') %}
{% set week_day = week_day|default('') %}
{% set day = day|default('') %}
{% set month = month|default('') %}
{% set year = year|default('') %}

{# Internal properties #}

{% set _css_class = 'ecl-date-block' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if variant != '' %}
  {% set _css_class = _css_class ~ ' ecl-date-block--' ~ variant %}
{% endif %}

{% if extra_class is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_Class %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~'"' %}
  {% endfor %}
{% endif %}

{# Print the result  #}

<div class="{{ _css_class }}" {{ _extra_attributes|raw }}>
  <div class="ecl-date-block__body">
    {% if week_day != '' %}
    <span class="ecl-date-block__week-day">{{ week_day }}</span>
    {% endif %}

    {% if day != '' %}
    <span class="ecl-date-block__day">{{ day }}</span>
    {% endif %}

    {% if month != '' %}
    <span class="ecl-date-block__month">{{ month }}</span>
    {% endif %}

    {% if year != '' %}
    <span class="ecl-date-block__year">{{ year }}</span>
    {% endif %}
  </div>
</div>
/* 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 {
      background-color: map-get($ecl-colors, 'grey-5');
      border-bottom: 0.2em solid map-get($ecl-colors, 'yellow-100');
      display: inline-flex;
      margin: 0;
      position: relative;
    
      &::before {
        border-left: 1.2em solid transparent;
        border-top: 1.2em solid #fff;
        content: '';
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    
    .ecl-date-block__body {
      align-items: center;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      min-height: 5.55rem;
      min-width: 5.55rem;
    }
    
    .ecl-date-block__week-day {
      font-size: map-get($ecl-font-size, 'xs');
      line-height: 1.2;
    }
    
    .ecl-date-block__day {
      font-size: map-get($ecl-font-size, 'xl');
      font-weight: 700;
      line-height: 1.2;
    }
    
    .ecl-date-block__month {
      font-size: map-get($ecl-font-size, 's');
      font-weight: 700;
      line-height: 1.1;
    }
    
    .ecl-date-block__year {
      font-size: map-get($ecl-font-size, 's');
      line-height: 1.2;
    }
    
    // ongoing
    .ecl-date-block--ongoing {
      background-color: map-get($ecl-colors, 'yellow-100');
    }
    
    // cancelled
    .ecl-date-block--cancelled {
      border-bottom-color: map-get($ecl-colors, 'grey-10');
      text-decoration: line-through;
    }
    
    // past
    .ecl-date-block--past {
      background-color: #fff;
      border: 0.2em solid map-get($ecl-colors, 'grey-50');
    
      &::before {
        border-left-width: 1.35em;
        border-top-width: 1.35em;
        right: -0.2em;
        top: -0.2em;
      }
    
      &::after {
        border-right: 0.2em solid map-get($ecl-colors, 'grey-50');
        content: '';
        height: 1.85em;
        position: absolute;
        right: 0.45em;
        top: -0.4em;
        transform: rotate(135deg);
      }
    }
    
  • URL: /components/raw/ecl-date-blocks/ecl-date-blocks.scss
  • Filesystem Path: framework/components/ecl-date-blocks/ecl-date-blocks.scss
  • Size: 1.7 KB
  • Handle: @ec-europa/ecl-date-blocks
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-date-blocks/ecl-date-blocks.twig