Europa Component Library

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
{#

0. Expected footer variables:
- footer_menus: (iterable) root list of menus to be rendered

1. Footer menu headings:

1.1 Heading with a link:

{
  title: {
    classes: 'ecl-h4',
    link: {
      href: '#',
      label: 'Digital single market',
    },
  },
},

1.2 Menu with a title without a link:

{
  label: 'Follow us:',
  classes: 'ecl-footer__menu ecl-list--inline',
  items: [],
},

1.3 Simple menu:

{
  classes: 'ecl-footer__menu ecl-list--inline',
  items: [],
},

2. Footer menus' items:

2.1 With links which contain icons

items: [
  {
    classes: 'ecl-footer__menu-item',
    link: {
      href: '#',
      label: 'Facebook',
      label_wrapper_class:
        'ecl-icon ecl-icon--facebook ecl-footer__social-icon',
    },
  },
  ...
],

2.2 With links only

items: [
  {
    classes: 'ecl-footer__menu-item',
    link: {
      href: '#',
      label: 'Contact',
    },
  },
  ...
],

#}

<footer class="ecl-footer">
  {% if footer_menus is defined and footer_menus is iterable %}
  {% for footer_menu in footer_menus %}
  <div class="{{ footer_menu.wrapper_class }}">
    <div class="ecl-container">
      <div class="ecl-row">
        {% for menu in footer_menu.menus %}
        <div class="ecl-col-sm {{ (footer_menu.type != 'plain') ? 'ecl-footer__column' : '' }}">

          {# If there is a link in the title, respect the link: #}
          {% if menu.title.link.href is defined %}
          <h4 class="{{ menu.title.classes }}">
            {% include '@ec-europa/ecl-links' with {
              'extra_classes': 'ecl-footer__link',
              }|merge(menu.title.link)
            %}
          </h4>
          {# otherwise, if it is only a title, without a link, use the title: #}
          {% elseif menu.title is defined and menu.title.value is defined %}
          <h4 class="{{ menu.title.classes }}">{{ menu.title.value }}</h4>
          {# Show a label if there is no title #}
          {% elseif menu.label is defined %}
          <p class="ecl-footer__label">{{ menu.label }}</p>
          {% endif %}

          {% if menu.items is defined and menu.items is not empty %}
          <ul class="{{ menu.classes }}">
            {% for menu_item in menu.items %}
            {% if menu_item.link.label_wrapper_class is defined %}
            <li class="{{ menu_item.classes }}">
              {% if footer_menu.type == 'branded' %}
                {% set link_variant = menu_item.link.variant %}
              {% else %}
                {% if menu_item.link.variant is defined %}
                  {% if menu_item.link.variant is iterable %}
                    {% set link_variant = ['inverted']|merge(menu_item.link.variant) %}
                  {% else %}
                    {% set link_variant = ['inverted']|merge([menu_item.link.variant]) %}
                  {% endif %}
                {% else %}
                  {% set link_variant = 'inverted' %}
                {% endif %}
              {% endif %}

              {% include '@ec-europa/ecl-links' with {
                'href': menu_item.link.href,
                'label': '<span class="' ~ menu_item.link.label_wrapper_class ~ '"></span>' ~ menu_item.link.label,
                'extra_classes': 'ecl-footer__link',
                'variant': link_variant,
                }
              %}
            </li>
            {% else %}
            <li class="{{ menu_item.classes }}">
              {% if footer_menu.type == 'branded' %}
                {% set link_variant = menu_item.link.variant %}
              {% else %}
                {% if menu_item.link.variant is defined %}
                  {% if menu_item.link.variant is iterable %}
                    {% set link_variant = ['inverted']|merge(menu_item.link.variant) %}
                  {% else %}
                    {% set link_variant = ['inverted']|merge([menu_item.link.variant]) %}
                  {% endif %}
                {% else %}
                  {% set link_variant = 'inverted' %}
                {% endif %}
              {% endif %}

              {% include '@ec-europa/ecl-links' with {
                'href': menu_item.link.href,
                'label': menu_item.link.label,
                'extra_classes': 'ecl-footer__link',
                'variant': link_variant,
                }
              %}
            </li>
            {% endif %}
            {% endfor %}
          </ul>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
  {% endfor %}
  {% endif %}
</footer>
 
{
  "footer_menus": [
    {
      "type": "branded",
      "wrapper_class": "ecl-footer__site-identity",
      "menus": [
        {
          "title": {
            "classes": "ecl-h4",
            "link": {
              "href": "#",
              "label": "Digital single market",
              "variant": "standalone"
            }
          }
        },
        {
          "label": "Follow us:",
          "classes": "ecl-footer__menu ecl-list--inline ecl-footer__social-links",
          "items": [
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "#",
                "label": "Facebook",
                "label_wrapper_class": "ecl-icon ecl-icon--facebook ecl-footer__social-icon"
              }
            },
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "#",
                "label": "Twitter",
                "label_wrapper_class": "ecl-icon ecl-icon--twitter ecl-footer__social-icon"
              }
            },
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "#",
                "label": "Other social media",
                "variant": "external"
              }
            }
          ]
        },
        {
          "classes": "ecl-footer__menu ecl-list--unstyled",
          "items": [
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "#",
                "label": "Contact"
              }
            },
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "#",
                "label": "Site map"
              }
            }
          ]
        }
      ]
    },
    {
      "type": "normal",
      "wrapper_class": "ecl-footer__site-corporate",
      "menus": [
        {
          "title": {
            "value": "European Commission",
            "classes": "ecl-h4 ecl-footer__title"
          },
          "classes": "ecl-footer__menu",
          "items": [
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "https://ec.europa.eu/commission/index_en",
                "label": "Commission and its priorities"
              }
            },
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "https://ec.europa.eu/info/index_en",
                "label": "Policies information and services"
              }
            }
          ]
        },
        {
          "title": {
            "value": "Follow the European Commission",
            "classes": "ecl-h4 ecl-footer__title"
          },
          "classes": "ecl-footer__menu ecl-list--inline ecl-footer__social-links",
          "items": [
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "#",
                "label": "Facebook",
                "label_wrapper_class": "ecl-icon ecl-icon--facebook ecl-footer__social-icon"
              }
            },
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "#",
                "label": "Twitter",
                "label_wrapper_class": "ecl-icon ecl-icon--twitter ecl-footer__social-icon"
              }
            },
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "#",
                "label": "Other social media",
                "variant": "external"
              }
            }
          ]
        },
        {
          "title": {
            "value": "European Union",
            "classes": "ecl-h4 ecl-footer__title"
          },
          "classes": "ecl-footer__menu",
          "items": [
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "#",
                "label": "EU institutions",
                "variant": "external"
              }
            },
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "#",
                "label": "European Union",
                "variant": "external"
              }
            }
          ]
        }
      ]
    },
    {
      "type": "plain",
      "wrapper_class": "ecl-footer__ec",
      "menus": [
        {
          "classes": "ecl-list--inline ecl-footer__menu",
          "items": [
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "http://ec.europa.eu/info/about-commissions-new-web-presence_en",
                "label": "About the Commission's new web presence"
              }
            },
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "http://ec.europa.eu/info/resources-partners_en",
                "label": "Resources for partners"
              }
            },
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "http://ec.europa.eu/info/cookies_en",
                "label": "Cookies"
              }
            },
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "http://ec.europa.eu/info/legal-notice_en",
                "label": "Legal notice"
              }
            },
            {
              "classes": "ecl-footer__menu-item",
              "link": {
                "href": "http://ec.europa.eu/info/contact_en",
                "label": "Contact"
              }
            }
          ]
        }
      ]
    }
  ]
}
 
<footer class="ecl-footer">
  <div class="ecl-footer__site-identity">
    <div class="ecl-container">
      <div class="ecl-row">
        <div class="ecl-col-sm ecl-footer__column">

          <h4 class="ecl-h4">

            <a class="ecl-link ecl-link--standalone ecl-footer__link" href="#">Digital single market</a>
          </h4>

        </div>
        <div class="ecl-col-sm ecl-footer__column">

          <p class="ecl-footer__label">Follow us:</p>

          <ul class="ecl-footer__menu ecl-list--inline ecl-footer__social-links">
            <li class="ecl-footer__menu-item">

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

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

              <a class="ecl-link ecl-link--external ecl-footer__link" href="#">Other social media</a>
            </li>
          </ul>
        </div>
        <div class="ecl-col-sm ecl-footer__column">

          <ul class="ecl-footer__menu ecl-list--unstyled">
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-footer__link" href="#">Contact</a>
            </li>
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-footer__link" href="#">Site map</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="ecl-footer__site-corporate">
    <div class="ecl-container">
      <div class="ecl-row">
        <div class="ecl-col-sm ecl-footer__column">

          <h4 class="ecl-h4 ecl-footer__title">European Commission</h4>

          <ul class="ecl-footer__menu">
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-link--inverted ecl-footer__link" href="https://ec.europa.eu/commission/index_en">Commission and its priorities</a>
            </li>
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-link--inverted ecl-footer__link" href="https://ec.europa.eu/info/index_en">Policies information and services</a>
            </li>
          </ul>
        </div>
        <div class="ecl-col-sm ecl-footer__column">

          <h4 class="ecl-h4 ecl-footer__title">Follow the European Commission</h4>

          <ul class="ecl-footer__menu ecl-list--inline ecl-footer__social-links">
            <li class="ecl-footer__menu-item">

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

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

              <a class="ecl-link ecl-link--inverted ecl-link--external ecl-footer__link" href="#">Other social media</a>
            </li>
          </ul>
        </div>
        <div class="ecl-col-sm ecl-footer__column">

          <h4 class="ecl-h4 ecl-footer__title">European Union</h4>

          <ul class="ecl-footer__menu">
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-link--inverted ecl-link--external ecl-footer__link" href="#">EU institutions</a>
            </li>
            <li class="ecl-footer__menu-item">

              <a class="ecl-link ecl-link--inverted ecl-link--external ecl-footer__link" href="#">European Union</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="ecl-footer__ec">
    <div class="ecl-container">
      <div class="ecl-row">
        <div class="ecl-col-sm ">

          <ul class="ecl-list--inline ecl-footer__menu">
            <li class="ecl-footer__menu-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__menu-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__menu-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__menu-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__menu-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>
</footer>
  • Content: 
    /**
 * Footers component
 * @define footer ; weak
 */

.ecl-footer {
  margin: 0;
}

.ecl-footer__site-identity,
.ecl-footer__site-corporate,
.ecl-footer__ec {
  @include ecl-hidden-print();

  a[#{$ecl-external-link-pattern}]:not(.is-internal):not(#{$ecl-ec-link-patterns})::after {
    line-height: 2.2;
    position: absolute;
  }
}

.ecl-footer__social-icon::before {
  margin-right: 8px !important;
}

.ecl-footer__social-links li:last-child {
  display: block;
  margin-left: 0;
}

.ecl-footer__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__label {
  display: inline;
  font-weight: bold;

  /* Any adjusent unordered list to be inlined */
  + ul {
    display: inline;
  }
}

.ecl-footer__menu {
  list-style: none;
  margin: 0;
  max-width: none;
  padding-left: 0;

  .ecl-footer__menu-item {
    font-size: map-get($ecl-font-size, xs);
    margin-bottom: map-get($ecl-spacing, xxxs);
  }
}

.ecl-footer__column {
  padding-top: map-get($ecl-spacing, m);
}

.ecl-footer__column:last-child {
  padding-bottom: map-get($ecl-spacing, m);
}

.ecl-footer__site-identity {
  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__site-corporate {
  background-color: map-get($ecl-colors, blue-75);
  color: #fff;
}

.ecl-footer__ec {
  background-color: $ecl-color-primary;
  color: #fff;
  padding: map-get($ecl-spacing, s) 0;
}

@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__site-identity {
    .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/ecl-footers/ecl-footers.scss
  • Filesystem Path: framework/components/ecl-footers/ecl-footers.scss
  • Size: 2.7 KB
  • Handle: @ec-europa/ecl-footers
  • Tags: organism
  • Preview:
  • Filesystem Path: framework/components/ecl-footers/ecl-footers.twig