EU System

Link blocks

Documentation • Demo

Link blocks

Link block component displays a list of links, with an optional title. It is used for instance in the dropdown component.

{#
  Parameters:
    - "title" (string) (default: ''): optional title of the link block
    - "links" (array) (default: []): collection of standalone @ecl/eu-component-link
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-link-block' with {
  'title': title|default(''),
  'links': links|default([]),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([]),
  'system': 'eu'
} only %}
 
/* Standalone block of links */
{
  "links": [
    {
      "href": "../../example.html#",
      "label": "European Commission"
    },
    {
      "href": "../../example.html#",
      "label": "Priorities"
    },
    {
      "href": "../../example.html#",
      "label": "Jobs, Growth and Investment"
    }
  ]
}


/* Block of links with title */
{
  "title": "More information",
  "links": [
    {
      "href": "../../example.html#",
      "label": "European Commission"
    },
    {
      "href": "../../example.html#",
      "label": "Priorities"
    },
    {
      "href": "../../example.html#",
      "label": "Jobs, Growth and Investment"
    }
  ]
}


<!-- Standalone block of links -->
<div class="ecl-link-block">
  <ul class="ecl-link-block__list">
    <li class="ecl-link-block__item">

      <a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">European Commission</a>
    </li>
    <li class="ecl-link-block__item">

      <a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">Priorities</a>
    </li>
    <li class="ecl-link-block__item">

      <a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">Jobs, Growth and Investment</a>
    </li>
  </ul>
</div>


<!-- Block of links with title -->
<div class="ecl-link-block">
  <div class="ecl-link-block__title">More information</div>
  <ul class="ecl-link-block__list">
    <li class="ecl-link-block__item">

      <a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">European Commission</a>
    </li>
    <li class="ecl-link-block__item">

      <a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">Priorities</a>
    </li>
    <li class="ecl-link-block__item">

      <a class="ecl-link ecl-link--standalone ecl-link-block__link" href="../../example.html#">Jobs, Growth and Investment</a>
    </li>
  </ul>
</div>
  • Content: 
    /**
 * ECL Link blocks
 * @define link-block
 */

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

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

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