Europa Component Library

Tags

Documentation • Demo

Tags

Reference tags (default)

Why and how to use this component

Reference tags indicate to the user the main topics to which a news article refers.

The tags should click through to list view pages where different articles that share the same tag are aggregated.

When to use this component

  • should be used on article pages

Facet tags

Why and how to use this component

Facet tags indicate to the user which options they have selected when refining a list by using filters.

The close functionality allows users to disable one of the previously selected refinement options without having to do it through the filters.

When to use this component

  • should be used on pages that provide filters
{#
  Accepts:
    - "modifier" (string): could be "facet", "facet-close" or left empty (default: "")
    - "label" (string): label to print before the group of tags (default: "")
    - "tags" (array):
      - "label" (string): label to print before the current tag (default: "")
      - "value" (string): text to display (default: "")
      - "href" (string): if "modifier" is different from "facet" or "facet-close", then a link is printed (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'}])
#}

{# Internal properties #}

{% set _modifier = modifier|default('') %}
{% set _label = label|default('') %}
{% set _tags = tags|default([]) %}
{% set _css_class = 'ecl-tag' %}
{% set _extra_attributes = '' %}

{% if _modifier is not empty %}
  {% set _css_class = _css_class ~ ' ecl-tag--' ~ _modifier %}
{% endif %}

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

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

<div class="{{ _css_class }}"{{ _extra_attributes|raw }}>
  {% if _label is not empty %}
    <span class="ecl-tag__label">{{ label }}</span>
  {% endif %}

  {% if _tags is not empty %}
    {% for _tag in _tags %}
      {% if _tag.label is defined and _tag.label is not empty %}
        <span class="ecl-tag__label">{{ _tag.label }}</span>
      {% endif %}

      {% if _modifier == 'facet' %}
        <span class="ecl-tag__item">{{ _tag.value }}</span>
      {% elseif _modifier == 'facet-close' %}
        {% include '@ec-europa/ecl-buttons' with {
          'label': _tag.value,
          'extra_classes': 'ecl-tag__item',
          'extra_attributes': [{ 'name': 'type', 'value': 'button'}]
        } %}
      {% else %}
        <a class="ecl-tag__item" href="{{ _tag.href }}">{{ _tag.value }}</a>
      {% endif %}
    {% endfor %}
  {% endif %}
</div>
 
/* Default tags */
{
  "label": "tags",
  "tags": [
    {
      "value": "apple",
      "href": "#"
    },
    {
      "value": "orange",
      "href": "#"
    },
    {
      "value": "lime",
      "href": "#"
    },
    {
      "value": "strawberry",
      "href": "#"
    }
  ]
}


/* Facet tags */
{
  "modifier": "facet",
  "label": "containing",
  "tags": [
    {
      "value": "Words that the facet is containing"
    }
  ]
}


/* Facet tag with close */
{
  "modifier": "facet-close",
  "tags": [
    {
      "label": "type",
      "value": "atom"
    },
    {
      "label": "status",
      "value": "wip"
    }
  ]
}


<!-- Default tags -->
<div class="ecl-tag">
  <span class="ecl-tag__label">tags</span>

  <a class="ecl-tag__item" href="#">apple</a>

  <a class="ecl-tag__item" href="#">orange</a>

  <a class="ecl-tag__item" href="#">lime</a>

  <a class="ecl-tag__item" href="#">strawberry</a>
</div>


<!-- Facet tags -->
<div class="ecl-tag ecl-tag--facet">
  <span class="ecl-tag__label">containing</span>

  <span class="ecl-tag__item">Words that the facet is containing</span>
</div>


<!-- Facet tag with close -->
<div class="ecl-tag ecl-tag--facet-close">

  <span class="ecl-tag__label">type</span>

  <button class="ecl-button ecl-button--facet-close ecl-tag__item" type="button">atom</button>
  <span class="ecl-tag__label">status</span>

  <button class="ecl-button ecl-button--facet-close ecl-tag__item" type="button">wip</button>
</div>
  • Content: 
    /**
 * Tags
 * @define tag
 */

.ecl-tag {
  align-items: center;
  display: flex;
  margin: 0;
}

.ecl-tag__label {
  font-size: map-get($ecl-font-size, 'xs');
  margin-right: map-get($ecl-spacing, 'xs');
  text-transform: uppercase;
}

.ecl-tag__item {
  background-color: map-get($ecl-colors, 'grey-15');
  border-radius: 5px;
  border-width: 0;
  color: $ecl-color-shade;
  font-family: $ecl-font-family-base;
  font-size: map-get($ecl-font-size, 'xs');
  font-weight: normal;
  line-height: 1;
  margin-right: map-get($ecl-spacing, 's');
  padding: map-get($ecl-spacing, 'xxxs');

  &:hover,
  &:active,
  &:focus {
    text-decoration: none;
  }

  &:focus {
    box-shadow: 0 0 0 3px map-get($ecl-colors, 'yellow-100');
    outline: none;
  }
}

.ecl-tag--facet-close {
  .ecl-tag__item:hover {
    background-color: $ecl-color-shade;
    color: #fff;
  }

  .ecl-tag__item::after {
    @extend %ecl-icon--after;

    @include ecl-icon('tag-close');

    margin-left: 0.6em;
  }
}
  • URL: /components/raw/ecl-tags/ecl-tags.scss
  • Filesystem Path: framework/components/ecl-tags/ecl-tags.scss
  • Size: 988 Bytes
  • Handle: @ec-europa/ecl-tags
  • Tags: atom
  • Preview:
  • Filesystem Path: framework/components/ecl-tags/ecl-tags.twig