EU System

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
{#
  Parameters:
    - "modifier" (string) (default: ''): '', 'facet', 'facet-close'
    - "label" (string) (default: ''): label to print before the group of tags
    - "tags" (array) (default: []):
      - "label" (string) (default: ''): label to print before the current tag
      - "value" (string) (default: ''): text to display
      - "href" (string) (default: ''): if not provided, a <span> would be printed
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-tag' with {
  'modifier': modifier|default(''),
  'label': label|default(''),
  'tags': tags|default([]),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default(''),
  'system': 'eu'
} only %}
 
/* Default tags */
{
  "label": "tags",
  "tags": [
    {
      "value": "apple",
      "href": "../../example.html#"
    },
    {
      "value": "orange",
      "href": "../../example.html#"
    },
    {
      "value": "lime",
      "href": "../../example.html#"
    },
    {
      "value": "strawberry",
      "href": "../../example.html#"
    }
  ]
}


/* 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="../../example.html#">apple</a>
  <a class="ecl-tag__item" href="../../example.html#">orange</a>
  <a class="ecl-tag__item" href="../../example.html#">lime</a>
  <a class="ecl-tag__item" href="../../example.html#">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>
  <span class="ecl-tag__item">atom</span>
  <span class="ecl-tag__label">status</span>
  <span class="ecl-tag__item">wip</span>
</div>
  • Content: 
    /**
 * Tags
 * @define tag
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-tag/generic-component-tag';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(('eu-component-button'));

// Use generic mixin
@include exports('eu-component-tag') {
  @include ecl-tag();
}
  • URL: /components/raw/eu-component-tag/eu-component-tag.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-tag/eu-component-tag.scss
  • Size: 352 Bytes
  • Handle: @ecl/eu-component-tag
  • Tags: atom
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-tag/eu-component-tag.twig