Europa Component Library

Labels

Documentation • Demo

Labels

Why and how to use this component

Allows the user to see an highlighted element or to indicate a status to the user.

Label types

Status Variant Colour
Upcoming upcoming EC yellow 25
Open / Highlight open EC yellow 100
Closed close EC grey 15

When to use this component

  • on the top of the listing component, close to the meta information

Do not use this component

  • if you are not using a listing component
  • with long sentences
  • with smaller case letters. Labels are always in uppercase letters
{#
  - "variant" (string): variant of the label (default: '')
  - "body" (string): content of the label (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 body = body|default('') %}

{# Internal properties #}

{% set _css_class = 'ecl-label' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if variant != '' %}
  {% set _css_class = _css_class ~ ' ecl-label--' ~ 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  #}

<span class="{{ _css_class }}" {{ _extra_attributes|raw }}>{{ body }}</span>
 
/* Upcoming */
{
  "variant": "upcoming",
  "body": "Call status: upcoming"
}


/* Open / Highlight  */
{
  "variant": "open",
  "body": "Call status: open"
}


/* Closed */
{
  "variant": "close",
  "body": "Call status: closed"
}


<!-- Upcoming -->
<span class="ecl-label ecl-label--upcoming">Call status: upcoming</span>


<!-- Open / Highlight  -->
<span class="ecl-label ecl-label--open">Call status: open</span>


<!-- Closed -->
<span class="ecl-label ecl-label--close">Call status: closed</span>
  • Content: 
    /**
 * Labels component
 * @define label
 */

.ecl-label {
  color: $ecl-color-shade;
  display: inline-block;
  font-size: map-get($ecl-font-size, 'xs');
  font-weight: 600;
  letter-spacing: 0.12em;
  margin: 0;
  padding: map-get($ecl-spacing, 'xxxs') map-get($ecl-spacing, 'xxs');
  text-transform: uppercase;
}

.ecl-label--upcoming {
  background-color: map-get($ecl-colors, 'yellow-25');
}

.ecl-label--open {
  background-color: map-get($ecl-colors, 'yellow-100');
}

.ecl-label--close {
  background-color: map-get($ecl-colors, 'grey-15');
}
  • URL: /components/raw/ecl-labels/ecl-labels.scss
  • Filesystem Path: framework/components/ecl-labels/ecl-labels.scss
  • Size: 551 Bytes
  • Handle: @ec-europa/ecl-labels
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-labels/ecl-labels.twig