EU System

Footers

Documentation • Demo

EU Footer

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.

This is the part of the footer below the blue dividing line.

  • information about all EU relevant contacts
  • information on how to Find an EU social media account
  • Language policy
  • site map
  • about this site
  • cookies
  • legal notice: a text area notifying the end user of legal information with an inline link for more information

Custom footer (non mandatory)

This is the part of the footer above the blue dividing line.

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
  • other relevant information, such as a contact

When to use this component

Corporate footer Custom footer
Mandatory component Optional component
  • on every page of Europa Inter-instituional sites
  • consistent on all pages.

When to 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 %}

{% set system = 'eu' %}

{% if custom_footer is defined and custom_footer is not empty %}
  {% set _custom_footer %}
  {% set _identity = custom_footer.identity.label is defined ? custom_footer.identity.label : custom_footer.identity %}

  <div class="ecl-container">
    <div class="ecl-footer__custom-title">
      {{ _identity|default('') }}
    </div>
    <div class="ecl-row">
      {% if custom_footer.social_links is defined and custom_footer.social_links.links is defined %}
      <div class="ecl-col-md">
        <div class="ecl-footer__custom-label">{{ custom_footer.social_links.label }}</div>
        <ul class="ecl-list ecl-list--inline ecl-footer__list ecl-footer__list--inline ecl-footer__social-links">
          {% for menu_item in custom_footer.social_links.links %}
            <li class="ecl-footer__list-item">
              {% if menu_item.type == 'social-network' %}
                {% embed '@ecl/' ~ system ~ '-component-link' with {
                  href: menu_item.link.href,
                  extra_classes: 'ecl-footer__link',
                  icon: menu_item.icon,
                  link_label: menu_item.link.label,
                  system: system
                } only %}
                  {% block label %}
                    {% spaceless %}
                      {% include '@ecl/' ~ system ~ '-style-icon' with {
                        modifier: 'ecl-icon--' ~ icon ~ ' ecl-footer__social-icon'
                      } only %}<span>{{ link_label }}</span>
                    {% endspaceless %}
                  {% endblock %}
                {% endembed %}
              {% else %}
                {% include '@ecl/' ~ system ~ '-component-link' with {
                  href: menu_item.link.href,
                  label: menu_item.link.label,
                  extra_classes: 'ecl-footer__link',
                  variant: 'external',
                } only %}
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
      {% if custom_footer.other_links is defined and custom_footer.other_links.links is defined %}
      <div class="ecl-col-md ecl-footer__other-links">
        <ul class="ecl-list ecl-list--unstyled ecl-list--inline ecl-footer__list ecl-footer__list--inline">
          {% for menu_item in custom_footer.other_links.links %}
            <li class="ecl-footer__list-item">
              {% include '@ecl/' ~ system ~ '-component-link' with {
                'href': menu_item.link.href,
                'label': menu_item.link.label,
                'extra_classes': 'ecl-footer__link',
                'variant': link_variant,
                }
              %}
            </li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
    </div>
  </div>
  {% endset %}
{% endif %}

{% set _corporate_footer %}
<div class="ecl-footer__corporate-top">
  <div class="ecl-container">
    <div class="ecl-row ecl-footer__row">
      <div class="ecl-footer__column ecl-col-md-4 ecl-footer__spaced-column">
        {% if corporate_footer.contact_eu.items is defined and corporate_footer.contact_eu.items is not empty %}
        <div class="ecl-footer__column-title" id="footer-corporate-contact-eu">{{ corporate_footer.contact_eu.title }}</div>
        <ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-contact-eu">
          {% for menu_item in corporate_footer.contact_eu.items %}
            {% if menu_item is not empty %}
              <li class="ecl-footer__list-item">
                {% if menu_item.href is defined and menu_item.href is not empty %}
                  {% include '@ecl/eu-component-link' with {
                    href: menu_item.href,
                    label: menu_item.label,
                    extra_classes: 'ecl-footer__link'
                  } only %}
                {% elseif menu_item.html is defined and menu_item.html is not empty %}
                  {{ menu_item.html|raw }}
                {% endif %}
              </li>
            {% endif %}
          {% endfor %}
        </ul>
        {% endif %}
        {% if corporate_footer.social_media.items is defined and corporate_footer.social_media.items is not empty %}
        <div class="ecl-footer__column-title ecl-u-mt-l" id="footer-corporate-social-media">{{ corporate_footer.social_media.title }}</div>
        <ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-social-media">
          {% for menu_item in corporate_footer.social_media.items %}
            {% if menu_item is not empty %}
              <li class="ecl-footer__list-item">
                {% if menu_item.href is defined and menu_item.href is not empty %}
                  {% include '@ecl/eu-component-link' with {
                    href: menu_item.href,
                    label: menu_item.label,
                    extra_classes: 'ecl-footer__link'
                  } only %}
                {% elseif menu_item.html is defined and menu_item.html is not empty %}
                  {{ menu_item.html|raw }}
                {% endif %}
              </li>
            {% endif %}
          {% endfor %}
        </ul>
        {% endif %}
      </div>
      {% if corporate_footer.find_institution.items is defined and corporate_footer.find_institution.items is not empty %}
      <div class="ecl-footer__column ecl-col-md-8 ecl-footer__spaced-column">
        <div class="ecl-footer__column-title" id="footer-corporate-find-institution">{{ corporate_footer.find_institution.title }}</div>
        <ul class="ecl-list ecl-list--unstyled ecl-footer__list ecl-footer__list--2-col ecl-footer__list--long" aria-labelledby="footer-corporate-find-institution">
          {% for menu_item in corporate_footer.find_institution.items %}
            {% if menu_item is not empty %}
              <li class="ecl-footer__list-item">
                {% if menu_item.href is defined and menu_item.href is not empty %}
                  {% include '@ecl/eu-component-link' with {
                    href: menu_item.href,
                    label: menu_item.label,
                    extra_classes: 'ecl-footer__link'
                  } only %}
                {% elseif menu_item.html is defined and menu_item.html is not empty %}
                  {{ menu_item.html|raw }}
                {% endif %}
              </li>
            {% endif %}
          {% endfor %}
        </ul>
        <ul class="ecl-list ecl-list--unstyled ecl-footer__list ecl-footer__list--2-col ecl-footer__list--short">
          {% for menu_item in corporate_footer.find_institution.short_list %}
            {% if menu_item is not empty %}
              <li class="ecl-footer__list-item">
                {% if menu_item.href is defined and menu_item.href is not empty %}
                  {% include '@ecl/eu-component-link' with {
                    href: menu_item.href,
                    label: menu_item.label,
                    extra_classes: 'ecl-footer__link'
                  } only %}
                {% elseif menu_item.html is defined and menu_item.html is not empty %}
                  {{ menu_item.html|raw }}
                {% endif %}
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
      {% endif %}
    </div>
  </div>
</div>
<div class="ecl-footer__corporate-bottom">
  <div class="ecl-container">
    <div class="ecl-row ecl-footer__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--inline ecl-footer__list ecl-footer__list--inline">
          {% if corporate_footer.published_date is defined and corporate_footer.published_date is not empty %}
            <li class="ecl-footer__list-item ecl-footer__publication-date">{{ corporate_footer.published_date }}</li>
          {% endif %}
          {% for menu_item in corporate_footer.bottom_links %}
            {% if menu_item is not empty %}
              <li class="ecl-footer__list-item">
                {% if menu_item.href is defined and menu_item.href is not empty %}
                  {% include '@ecl/eu-component-link' with {
                    href: menu_item.href,
                    label: menu_item.label,
                    extra_classes: 'ecl-footer__link'
                  } only %}
                {% elseif menu_item.html is defined and menu_item.html is not empty %}
                  {{ menu_item.html|raw }}
                {% endif %}
              </li>
            {% endif %}
          {% 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 Identification",
    "social_links": {
      "label": "Follow us:",
      "links": [
        {
          "type": "social-network",
          "icon": "facebook",
          "link": {
            "href": "../../example.html#facebook",
            "label": "Facebook"
          }
        },
        {
          "type": "social-network",
          "icon": "twitter",
          "link": {
            "href": "../../example.html#twitter",
            "label": "Twitter"
          }
        },
        {
          "type": "social-network",
          "icon": "instagram",
          "link": {
            "href": "../../example.html#instagram",
            "label": "Instagram"
          }
        }
      ]
    },
    "other_links": {
      "links": [
        {
          "link": {
            "href": "../../example.html#loremipsum1",
            "label": "Lorem ipsum"
          }
        },
        {
          "link": {
            "href": "../../example.html#loremipsum2",
            "label": "Lorem ipsum"
          }
        },
        {
          "link": {
            "href": "../../example.html#loremipsum3",
            "label": "Lorem ipsum dolor sit"
          }
        },
        {
          "link": {
            "href": "../../example.html#loremipsum4",
            "label": "Lorem ipsum dolor sit"
          }
        }
      ]
    }
  },
  "corporate_footer": {
    "contact_eu": {
      "title": "Contact the EU",
      "items": [
        {
          "html": "Call us <a href=\"../../example.html#call\" class=\"ecl-link ecl-link--standalone\">00 800 6 7 8 9 10 11</a>"
        },
        {
          "html": "Use other <a href=\"../../example.html#call-other-options\" class=\"ecl-link ecl-link--standalone\">telephone options</a>"
        },
        {
          "html": "Write to us via our <a href=\"../../example.html#contact-form\" class=\"ecl-link ecl-link--standalone\">contact form</a>"
        },
        {
          "html": "Meet us at a <a href=\"../../example.html#local-office\" class=\"ecl-link ecl-link--standalone\">local EU office</a>"
        }
      ]
    },
    "social_media": {
      "title": "Find a social media account",
      "items": [
        {
          "html": "<a href=\"../../example.html#call\" class=\"ecl-link ecl-link--standalone\">Search for EU social media channels</a>"
        }
      ]
    },
    "find_institution": {
      "title": "EU institutions",
      "items": [
        {
          "href": "../../example.html#",
          "label": "European Parliament"
        },
        {
          "href": "../../example.html#",
          "label": "European Council"
        },
        {
          "href": "../../example.html#",
          "label": "Council of the European Union"
        },
        {
          "href": "../../example.html#",
          "label": "European Commission"
        },
        {
          "href": "../../example.html#",
          "label": "Court of Justice of the European Union"
        },
        {
          "href": "../../example.html#",
          "label": "European Central Bank"
        },
        {
          "href": "../../example.html#",
          "label": "European Court of Auditors"
        },
        {
          "href": "../../example.html#",
          "label": "European External Action Service"
        },
        {
          "href": "../../example.html#",
          "label": "European Economic and Social Committee"
        },
        {
          "href": "../../example.html#",
          "label": "European Committee of the Regions"
        },
        {
          "href": "../../example.html#",
          "label": "European Investment Bank"
        },
        {
          "href": "../../example.html#",
          "label": "European Ombudsman"
        },
        {
          "href": "../../example.html#",
          "label": "European Data Protection Supervisor"
        },
        {
          "href": "../../example.html#",
          "label": "European Personnel Selection Office"
        },
        {
          "href": "../../example.html#",
          "label": "Publications Office of the European Union"
        },
        {
          "href": "../../example.html#",
          "label": "Agencies"
        }
      ],
      "short_list": [
        {
          "html": "Search for <a href=\"../../example.html#call\" class=\"ecl-link ecl-link--standalone\">EU institutions</a>"
        }
      ]
    },
    "bottom_links": [
      {
        "href": "../../example.html#",
        "label": "Work for the EU"
      },
      {
        "href": "../../example.html#",
        "label": "Sitemap"
      },
      {
        "href": "../../example.html#",
        "label": "About this site"
      },
      {
        "href": "../../example.html#",
        "label": "Language policy"
      },
      {
        "href": "../../example.html#",
        "label": "Legal notice"
      },
      {
        "href": "../../example.html#",
        "label": "Cookies"
      }
    ],
    "published_date": "Last published 26/06/2018"
  }
}
 
<footer class="ecl-footer">
  <div class="ecl-footer__custom">

    <div class="ecl-container">
      <div class="ecl-footer__custom-title">
        Site Identification
      </div>
      <div class="ecl-row">
        <div class="ecl-col-md">
          <div class="ecl-footer__custom-label">Follow us:</div>
          <ul class="ecl-list ecl-list--inline ecl-footer__list ecl-footer__list--inline ecl-footer__social-links">
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#facebook"> <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#twitter"> <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-footer__link" href="../../example.html#instagram"> <span class="ecl-icon ecl-icon--instagram ecl-footer__social-icon"></span><span>Instagram</span> </a>
            </li>
          </ul>
        </div>
        <div class="ecl-col-md ecl-footer__other-links">
          <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-footer__link" href="../../example.html#loremipsum1">Lorem ipsum</a>
            </li>
            <li class="ecl-footer__list-item">

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

              <a class="ecl-link ecl-footer__link" href="../../example.html#loremipsum3">Lorem ipsum dolor sit</a>
            </li>
            <li class="ecl-footer__list-item">

              <a class="ecl-link ecl-footer__link" href="../../example.html#loremipsum4">Lorem ipsum dolor sit</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 ecl-footer__row">
          <div class="ecl-footer__column ecl-col-md-4 ecl-footer__spaced-column">
            <div class="ecl-footer__column-title" id="footer-corporate-contact-eu">Contact the EU</div>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-contact-eu">
              <li class="ecl-footer__list-item">
                Call us <a href="../../example.html#call" class="ecl-link ecl-link--standalone">00 800 6 7 8 9 10 11</a>
              </li>
              <li class="ecl-footer__list-item">
                Use other <a href="../../example.html#call-other-options" class="ecl-link ecl-link--standalone">telephone options</a>
              </li>
              <li class="ecl-footer__list-item">
                Write to us via our <a href="../../example.html#contact-form" class="ecl-link ecl-link--standalone">contact form</a>
              </li>
              <li class="ecl-footer__list-item">
                Meet us at a <a href="../../example.html#local-office" class="ecl-link ecl-link--standalone">local EU office</a>
              </li>
            </ul>
            <div class="ecl-footer__column-title ecl-u-mt-l" id="footer-corporate-social-media">Find a social media account</div>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list" aria-labelledby="footer-corporate-social-media">
              <li class="ecl-footer__list-item">
                <a href="../../example.html#call" class="ecl-link ecl-link--standalone">Search for EU social media channels</a>
              </li>
            </ul>
          </div>
          <div class="ecl-footer__column ecl-col-md-8 ecl-footer__spaced-column">
            <div class="ecl-footer__column-title" id="footer-corporate-find-institution">EU institutions</div>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list ecl-footer__list--2-col ecl-footer__list--long" aria-labelledby="footer-corporate-find-institution">
              <li class="ecl-footer__list-item">

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

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

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Council of the European Union</a>
              </li>
              <li class="ecl-footer__list-item">

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

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Court of Justice of the European Union</a>
              </li>
              <li class="ecl-footer__list-item">

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

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Court of Auditors</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European External Action Service</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Economic and Social Committee</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Committee of the Regions</a>
              </li>
              <li class="ecl-footer__list-item">

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

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

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Data Protection Supervisor</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">European Personnel Selection Office</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Publications Office of the European Union</a>
              </li>
              <li class="ecl-footer__list-item">

                <a class="ecl-link ecl-footer__link" href="../../example.html#">Agencies</a>
              </li>
            </ul>
            <ul class="ecl-list ecl-list--unstyled ecl-footer__list ecl-footer__list--2-col ecl-footer__list--short">
              <li class="ecl-footer__list-item">
                Search for <a href="../../example.html#call" class="ecl-link ecl-link--standalone">EU institutions</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="ecl-footer__corporate-bottom">
      <div class="ecl-container">
        <div class="ecl-row ecl-footer__row">
          <div class="ecl-col">
            <ul class="ecl-list ecl-list--inline ecl-footer__list ecl-footer__list--inline">
              <li class="ecl-footer__list-item ecl-footer__publication-date">Last published 26/06/2018</li>
              <li class="ecl-footer__list-item">

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

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

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

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

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

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

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

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

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

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

  .ecl-footer__custom {
    background-color: map-get($ecl-colors, 'grey-5');
    padding-bottom: map-get($ecl-spacing, 'm');
    padding-top: map-get($ecl-spacing, 'm');
  }

  .ecl-footer__custom-label {
    color: map-get($ecl-colors, 'grey-100');
    display: inline-block;
    font-size: map-get($ecl-font-size, 's');
    font-weight: normal;
    margin-bottom: map-get($ecl-spacing, 's');
  }

  .ecl-footer__custom-title {
    color: map-get($ecl-colors, 'grey-100');
    display: inline-block;
    font-size: map-get($ecl-font-size, 'm');
    margin-bottom: map-get($ecl-spacing, 's');
  }

  .ecl-footer__corporate {
    border-top: 4px solid map-get($ecl-colors, 'blue-100');
  }

  .ecl-footer__corporate-top {
    background-color: map-get($ecl-colors, 'grey-15');
    color: map-get($ecl-colors, 'grey-100');
    padding-bottom: map-get($ecl-spacing, 'l');
    padding-top: map-get($ecl-spacing, 'l');
  }

  .ecl-footer__list {
    margin-top: -(map-get($ecl-spacing, 's'));
  }

  .ecl-footer__list-item {
    line-height: 1.125;
    padding-top: map-get($ecl-spacing, 's');
  }

  .ecl-footer__list--inline {
    margin-top: -(map-get($ecl-spacing, 's'));

    .ecl-footer__list-item {
      margin-left: 0;
      margin-right: map-get($ecl-spacing, 'm');
      padding-top: map-get($ecl-spacing, 's');
    }
  }

  .ecl-footer__corporate-bottom {
    background-color: map-get($ecl-colors, 'grey-20');
    color: map-get($ecl-colors, 'grey-100');
    padding-bottom: map-get($ecl-spacing, 'm');
    padding-top: map-get($ecl-spacing, 'm');

    /* stylelint-disable-next-line */
    .ecl-footer__list--inline {
      display: flex;
      flex-wrap: wrap;
    }

    /* stylelint-disable-next-line */
    .ecl-footer__list-item {
      margin-right: map-get($ecl-spacing, 'l');
      margin-top: map-get($ecl-spacing, 's');
      padding-top: 0;
    }

    /* stylelint-disable-next-line */
    .ecl-footer__publication-date {
      border-right: 1px solid map-get($ecl-colors, 'grey-50');
      margin-right: map-get($ecl-spacing, 'm');
      padding-right: map-get($ecl-spacing, 'm');
    }
  }

  .ecl-footer__other-links {
    margin-top: map-get($ecl-spacing, 's');

    @include ecl-media-breakpoint-up(md) {
      margin-top: 0;
    }
  }

  .ecl-footer__spaced-column {
    padding-top: 0;
  }

  .ecl-footer__spaced-column:last-child {
    padding-bottom: 0;
  }

  .ecl-footer__row + .ecl-footer__row {
    padding-top: map-get($ecl-spacing, 'xl');
  }

  // Links in EU footers should look like standalone links
  // The rule is added via CSS in order to allow better context management in twig, i.e. external links having variant

  .ecl-footer__link {
    font-size: map-get($ecl-font-size, 's');
    text-decoration: none;

    &:hover,
    &:focus {
      color: map-get($ecl-colors, 'blue-100');
      text-decoration: underline;
    }
  }

  .ecl-footer__column-title {
    border-bottom: 2px solid map-get($ecl-colors, 'grey-25');
    color: map-get($ecl-colors, 'grey-100');
    font-size: map-get($ecl-font-size, 'm');
    font-weight: bold;
    margin-bottom: map-get($ecl-spacing, 'm');
    padding-bottom: map-get($ecl-spacing, 'xs');
  }

  .ecl-footer__list--2-col {
    column-count: 2;
  }

  .ecl-footer__list--3-col {
    column-count: 3;
  }

  .ecl-footer__social-links {
    display: inline-block;
  }

  .ecl-footer__list--short {
    display: block;
  }

  .ecl-footer__list--long {
    display: none;
  }

  /* stylelint-disable-next-line order/order */
  @include ecl-media-breakpoint-up(sm) {
    .ecl-footer__list--short {
      display: none;
    }

    .ecl-footer__list--long {
      display: block;
    }
  }

  /* stylelint-disable-next-line order/order */
  @include ecl-media-breakpoint-down(sm) {
    .ecl-footer__list--2-col,
    .ecl-footer__list--3-col {
      column-count: 1;
    }

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

    .ecl-footer__custom-title {
      margin-bottom: map-get($ecl-spacing, 's');
    }

    .ecl-footer__custom-label {
      display: inline-block;
      margin-bottom: map-get($ecl-spacing, 's');
    }

    .ecl-footer__corporate-top {
      padding-bottom: map-get($ecl-spacing, 'l');
      padding-top: map-get($ecl-spacing, 'l');
    }

    .ecl-footer__column-title {
      margin-bottom: map-get($ecl-spacing, 'm');
      padding-bottom: map-get($ecl-spacing, 'xs');
    }

    .ecl-footer__spaced-column + .ecl-footer__spaced-column {
      padding-top: map-get($ecl-spacing, 'l');
    }
  }
}
  • URL: /components/raw/eu-component-footer/eu-component-footer.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-footer/eu-component-footer.scss
  • Size: 5.1 KB
  • Handle: @ecl/eu-component-footer
  • Tags: organism
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-footer/eu-component-footer.twig