EC System

Footers

Documentation • Demo

Footers

Why and how to use this component

The footer offers access to copyright information, disclaimer and terms of use, privacy and cookies policy. It allows the user to navigate to corporate social media profiles.

  • information about the European Commission and European Union: links to easily navigate between the Political/Information sites
  • information on how to connect to social platforms of the European Commission
  • external links to European Union sites
  • about the Commission’s new web presence
  • resources for partners
  • cookies
  • legal notice: a text area notifying the end user of legal information with an inline link for more information
  • contact

Custom footer (non mandatory)

In exceptional circumstances, a custom footer can be added.

A custom footer should be used only if the corporate footer does not satisfy all the page’s requirements.

There can be no overlap with other links in the corporate footer.

  • identification of the site name
  • information on how to connect to social platforms
  • contact
  • other relevant information, such as a link to the site map

When to use this component

Corporate footer Custom footer
All EC sites Improved sites
Mandatory component Optional component
  • on every page of every Commission website.
  • consistent on all pages
  • should be approved by DTT before implementation
  • On every page of every Commission website.

Do not use this component

Custom footer

  • do not try to reflect the navigation structure of the site in the footer
  • don’t exceed 2 lines of links
{% import '@ecl/generic-component-footer' as macros %}

{% if custom_footer is defined and custom_footer is not empty %}
  {% set _custom_footer = macros.footer_custom(custom_footer, 'ec') %}
{% endif %}

{% set _corporate_footer %}
<div class="ecl-footer__corporate-top">
  <div class="ecl-container">
    <div class="ecl-row">
      {% if corporate_footer.about_ec.items is defined and corporate_footer.about_ec.items is not empty %}
      <div class="ecl-footer__column ecl-col-md">
        <h2 class="ecl-heading ecl-heading--h4 ecl-footer__column-title" id="footer-corporate-about-ec">{{ corporate_footer.about_ec.title }}</h2>
        <ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-about-ec">
          {% for menu_item in corporate_footer.about_ec.items %}
            <li class="ecl-footer__list-item">
              {% include '@ecl/ec-component-link' with {
                href: menu_item.href,
                label: menu_item.label,
                extra_classes: 'ecl-footer__link',
                variant: 'inverted',
              } %}
            </li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
      {% if corporate_footer.social_media.items is defined and corporate_footer.social_media.items is not empty %}
      <div class="ecl-footer__column ecl-col-md">
        <h2 class="ecl-heading ecl-heading--h4 ecl-footer__column-title" id="footer-corporate-social-media">{{ corporate_footer.social_media.title }}</h2>
        <ul class="ecl-list ecl-list--unstyled ecl-list--inline ecl-footer__list ecl-footer__list--inline  ecl-footer__social-links" aria-labelledby="footer-corporate-social-media">
          {% for menu_item in corporate_footer.social_media.items %}
            <li class="ecl-footer__list-item">
              {% if menu_item.type == 'social-network' %}
                {% embed '@ecl/ec-component-link' with {
                  href: menu_item.link.href,
                  extra_classes: 'ecl-footer__link',
                  variant: 'inverted',
                  icon: menu_item.icon,
                  link_label: menu_item.link.label
                } only %}
                  {% block label %}
                    {% spaceless %}
                      {% include '@ecl/ec-style-icon' with {
                        modifier: 'ecl-icon--' ~ icon ~ ' ecl-footer__social-icon'
                      } only %}<span>{{ link_label }}</span>
                    {% endspaceless %}
                  {% endblock %}
                {% endembed %}
              {% else %}
                {% include '@ecl/ec-component-link' with {
                  href: menu_item.link.href,
                  label: menu_item.link.label,
                  extra_classes: 'ecl-footer__link',
                  variant: ['inverted', 'external'],
                } only %}
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
      {% if corporate_footer.about_eu.items is defined and corporate_footer.about_eu.items is not empty %}
      <div class="ecl-footer__column ecl-col-md">
        <h2 class="ecl-heading ecl-heading--h4 ecl-footer__column-title" id="footer-corporate-about-eu">{{ corporate_footer.about_eu.title }}</h2>
        <ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-about-eu">
          {% for menu_item in corporate_footer.about_eu.items %}
            <li class="ecl-footer__list-item">
              {% include '@ecl/ec-component-link' with {
                href: menu_item.href,
                label: menu_item.label,
                extra_classes: 'ecl-footer__link',
                variant: 'inverted',
              } only %}
            </li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
    </div>
  </div>
</div>
<div class="ecl-footer__corporate-bottom">
  <div class="ecl-container">
    <div class="ecl-row">
      <div class="ecl-col">
        {% if corporate_footer.bottom_links is defined and corporate_footer.bottom_links is not empty %}
        <ul class="ecl-list ecl-list--unstyled ecl-list--inline ecl-footer__list ecl-footer__list--inline">
          {% for menu_item in corporate_footer.bottom_links %}
          <li class="ecl-footer__list-item">
            {% include '@ecl/ec-component-link' with {
              'href': menu_item.href,
              'label': menu_item.label,
              'extra_classes': 'ecl-footer__link',
              'variant': 'inverted',
              }
            %}
          </li>
          {% endfor %}
        </ul>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endset %}

{# Render component #}

{{ macros.footer({
  custom_footer: _custom_footer|default(''),
  corporate_footer: _corporate_footer,
}) }}
 
{
  "custom_footer": {
    "identity": "Site identity",
    "social_links": {
      "label": "Follow us:",
      "links": [
        {
          "type": "social-network",
          "icon": "facebook",
          "link": {
            "href": "../../example.html#",
            "label": "Facebook"
          }
        },
        {
          "type": "social-network",
          "icon": "twitter",
          "link": {
            "href": "../../example.html#",
            "label": "Twitter"
          }
        },
        {
          "type": "external",
          "link": {
            "href": "../../example.html#",
            "label": "Other social media"
          }
        }
      ]
    },
    "other_links": {
      "links": [
        {
          "link": {
            "href": "../../example.html#",
            "label": "Contact"
          }
        },
        {
          "link": {
            "href": "../../example.html#",
            "label": "Site map"
          }
        }
      ]
    }
  },
  "corporate_footer": {
    "about_ec": {
      "title": "European Commission",
      "items": [
        {
          "href": "https://ec.europa.eu/info/index",
          "label": "European Commission website"
        }
      ]
    },
    "social_media": {
      "title": "Follow the European Commission",
      "items": [
        {
          "type": "social-network",
          "icon": "facebook",
          "link": {
            "href": "../../example.html#",
            "label": "Facebook"
          }
        },
        {
          "type": "social-network",
          "icon": "twitter",
          "link": {
            "href": "../../example.html#",
            "label": "Twitter"
          }
        },
        {
          "type": "external",
          "link": {
            "href": "../../example.html#",
            "label": "Other social media"
          }
        }
      ]
    },
    "about_eu": {
      "title": "European Union",
      "items": [
        {
          "href": "../../example.html#",
          "label": "EU institutions"
        },
        {
          "href": "../../example.html#",
          "label": "European Union"
        }
      ]
    },
    "bottom_links": [
      {
        "href": "http://ec.europa.eu/info/about-commissions-new-web-presence_en",
        "label": "About the Commission's new web presence"
      },
      {
        "href": "https://ec.europa.eu/info/language-policy_en",
        "label": "Language policy"
      },
      {
        "href": "http://ec.europa.eu/info/resources-partners_en",
        "label": "Resources for partners"
      },
      {
        "href": "http://ec.europa.eu/info/cookies_en",
        "label": "Cookies"
      },
      {
        "href": "https://ec.europa.eu/info/privacy-policy_en",
        "label": "Privacy policy"
      },
      {
        "href": "http://ec.europa.eu/info/legal-notice_en",
        "label": "Legal notice"
      },
      {
        "href": "http://ec.europa.eu/info/contact_en",
        "label": "Contact"
      }
    ]
  }
}
 
<footer class="ecl-footer">
  <div class="ecl-footer__custom">

    <div class="ecl-container">
      <div class="ecl-row">
        <div class="ecl-footer__column ecl-col-md">
          <h2 class="ecl-heading ecl-heading--h4 ecl-u-mt-xxxs ecl-u-mb-none ecl-footer__column-title ecl-footer__custom-title-identity">
            Site identity
          </h2>
        </div>
        <div class="ecl-footer__column ecl-col-md">
          <p class="ecl-footer__custom-label">Follow us:</p>
          <ul class="ecl-list ecl-list--inline ecl-footer__list ecl-footer__list--inline ecl-footer__social-links ecl-u-d-inline">
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#"> <span class="ecl-icon ecl-icon--facebook ecl-footer__social-icon"></span><span>Facebook</span> </a>
            </li>
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#"> <span class="ecl-icon ecl-icon--twitter ecl-footer__social-icon"></span><span>Twitter</span> </a>
            </li>
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-link--external ecl-footer__link" href="../../example.html#">Other social media</a>
            </li>
          </ul>
        </div>
        <div class="ecl-footer__column ecl-col-md">
          <ul class="ecl-list ecl-list--unstyled ecl-footer__list">
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#">Contact</a>
            </li>
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#">Site map</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
  <div class="ecl-footer__corporate">
    <div class="ecl-footer__corporate-top">
      <div class="ecl-container">
        <div class="ecl-row">
          <div class="ecl-footer__column ecl-col-md">
            <h2 class="ecl-heading ecl-heading--h4 ecl-footer__column-title" id="footer-corporate-about-ec">European Commission</h2>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-about-ec">
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-footer__link" href="https://ec.europa.eu/info/index">European Commission website</a>
              </li>
            </ul>
          </div>
          <div class="ecl-footer__column ecl-col-md">
            <h2 class="ecl-heading ecl-heading--h4 ecl-footer__column-title" id="footer-corporate-social-media">Follow the European Commission</h2>
            <ul class="ecl-list ecl-list--unstyled ecl-list--inline ecl-footer__list ecl-footer__list--inline  ecl-footer__social-links" aria-labelledby="footer-corporate-social-media">
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-footer__link" href="../../example.html#"> <span class="ecl-icon ecl-icon--facebook ecl-footer__social-icon"></span><span>Facebook</span> </a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-footer__link" href="../../example.html#"> <span class="ecl-icon ecl-icon--twitter ecl-footer__social-icon"></span><span>Twitter</span> </a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-link--external ecl-footer__link" href="../../example.html#">Other social media</a>
              </li>
            </ul>
          </div>
          <div class="ecl-footer__column ecl-col-md">
            <h2 class="ecl-heading ecl-heading--h4 ecl-footer__column-title" id="footer-corporate-about-eu">European Union</h2>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-about-eu">
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-footer__link" href="../../example.html#">EU institutions</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-footer__link" href="../../example.html#">European Union</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="ecl-footer__corporate-bottom">
      <div class="ecl-container">
        <div class="ecl-row">
          <div class="ecl-col">
            <ul class="ecl-list ecl-list--unstyled ecl-list--inline ecl-footer__list ecl-footer__list--inline">
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/about-commissions-new-web-presence_en">About the Commission's new web presence</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-footer__link" href="https://ec.europa.eu/info/language-policy_en">Language policy</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/resources-partners_en">Resources for partners</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/cookies_en">Cookies</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-footer__link" href="https://ec.europa.eu/info/privacy-policy_en">Privacy policy</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/legal-notice_en">Legal notice</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-link--inverted ecl-footer__link" href="http://ec.europa.eu/info/contact_en">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</footer>
  • Content: 
    /**
 * Footers component
 * @define footer
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-component-footer/generic-component-footer';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(
  (
    'ec-layout-grid',
    'ec-component-link',
    'ec-style-typography-list',
    'ec-style-icon'
  )
);

// Use generic mixin
@include exports('ec-component-footer') {
  @include ecl-footer();

  .ecl-footer__custom {
    background-color: map-get($ecl-colors, 'blue-25');
    color: map-get($ecl-colors, 'blue-120');

    // Links should have a different color because of their background.
    .ecl-footer__link {
      color: map-get($ecl-colors, 'blue-120');
    }

    .ecl-footer__link:hover,
    .ecl-footer__link:active,
    .ecl-footer__link:focus {
      color: map-get($ecl-colors, 'blue-120');
    }

    .ecl-footer__column {
      padding-bottom: 0;
      padding-top: map-get($ecl-spacing, 's');
    }

    .ecl-footer__column:last-child {
      padding-bottom: map-get($ecl-spacing, 's');
      padding-top: 0;
    }
  }

  .ecl-footer__corporate {
    color: #fff;
  }

  .ecl-footer__corporate-top {
    background-color: map-get($ecl-colors, 'blue-75');
  }

  .ecl-footer__corporate-bottom {
    background-color: $ecl-color-primary;
    padding: map-get($ecl-spacing, 's') 0;
  }

  .ecl-footer__column-title {
    border-bottom: 2px solid map-get($ecl-colors, 'blue-50');
    color: #fff;
    margin-bottom: map-get($ecl-spacing, 'xxxs');
    padding-bottom: map-get($ecl-spacing, 'xxxs');

    @include ecl-media-breakpoint-between('md', 'lg') {
      min-height: map-get($ecl-spacing, 'xl');
      padding-bottom: 0;
    }

    // Make titles height auto on large screens.
    @include ecl-media-breakpoint-up('xl') {
      margin-bottom: map-get($ecl-spacing, 's');
      min-height: auto;
    }
  }

  .ecl-footer__custom-title-identity {
    border-bottom: 0;
    color: map-get($ecl-colors, 'blue-120');
  }

  /* stylelint-disable-next-line order/order */
  @include ecl-media-breakpoint-up(sm) {
    .ecl-footer__column {
      padding-bottom: map-get($ecl-spacing, 'l');
      padding-top: map-get($ecl-spacing, 'l');
    }

    // Specifics for this type of footer when non-mobile
    .ecl-footer__custom {
      .ecl-footer__column {
        padding-bottom: map-get($ecl-spacing, 's');
      }

      .ecl-footer__column:last-child {
        padding-top: map-get($ecl-spacing, 's');
      }
    }

    .ecl-footer__link {
      padding: 0;
    }
  }
}
  • URL: /components/raw/ec-component-footer/ec-component-footer.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-footer/ec-component-footer.scss
  • Size: 2.6 KB
  • Handle: @ecl/ec-component-footer
  • Tags: organism
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-footer/ec-component-footer.twig