Europa Component Library

Footers

Documentation • Demo

EMA footers

{#
  - "sections" (array): [{
    - "label" (string): title of the section (default: '')
    - "links" (array): array of links components
  }]
  - "hotline" (object): {
    - "href" (string): link of the hotline (default: '#')
    - "title" (string): hotline title (default: '')
    - "description" (string): hotline description (default: '')
  }
  - "copyright" (string): copyright text (default: '')
  - "description" (string): description text (default: '')
  - "logo" (object): {
    - "src" (string): source of the image (default: '')
    - "alt" (string): alt text of the image (default: '')
  }
  - "extra_classes" (string): extra CSS classes to be added
  - "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}

{# Internal properties #}

{% set _copyright = copyright|default('') %}
{% set _description = description|default('') %}
{% set _css_class = 'ema-footer' %}
{% set _extra_attributes = '' %}

{# Internal logic - Process properties #}

{% if extra_class is defined %}
  {% set _css_class = _css_class ~ ' ' ~ extra_class %}
{% endif %}

{% if extra_attributes is defined %}
  {% for attr in extra_attributes %}
    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~'"' %}
  {% endfor %}
{% endif %}

{# Print the result  #}

<footer class="{{ _css_class }}" {{ _extra_attributes }}>
  <div class="ecl-container ema-footer__content">
    <div class="ema-footer__section">
      <div class="ema-footer__hotline">
      {% include '@ec-europa/ema-icons' with {
        'icon': 'phone',
        'extra_classes': 'ecl-u-fs-xxl ecl-u-mr-xxs ema-icon--l'
      }  only %}
        <a class="ecl-link--ema-inverted" href="{{ hotline.href }}">
          <div class="ema-footer__hotline-title">{{ hotline.title }}</div>
          <div class="ema-footer__hotline-desc">{{ hotline.description }}</div>
        </a>
      </div>
    </div>
  </div>

  <div class="ecl-container ema-footer__content">

    {% for section in sections %}
    <div class="ema-footer__section">
      <div class="ema-footer__title">{{ section.title }}</div>

      <ul class="ecl-list ecl-list--unstyled ema-footer__links">
        {% for link in section.links %}
        <li>
          {% include '@ec-europa/ema-links' with link %}
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endfor %}
  </div>

  <div class="ecl-container">
    <div class="ema-footer__social">
      {% for link in social %}
        <span class="ecl-icon ecl-icon--{{ link.icon }}"></span>
        {% include '@ec-europa/ema-links' with link %}
      {% endfor %}
    </div>
  </div>

  <div class="ecl-container ema-footer__content">
    <div class="ema-footer__copyright">{{ copyright }}</div>
    <div class="ema-footer__description">
      {{ logo_network.alt }}
      <div class="ema-footer__logo">
      <img src="{{ logo_network.src }}" alt="{{ logo_network.alt }}" /></img>
    </div></div>
    <div class="ema-footer__description">
      {{ description }}
      <div class="ema-footer__logo"><img src="{{ logo.src }}" alt="{{ logo.alt }}" /></div>
    </div>
  </div>

</footer>
 
{
  "sections": [
    {
      "title": "About",
      "links": [
        {
          "label": "Who we are",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "What's new on the site",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Expert blog",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Human regulation",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Veterinary regulation",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Commitees",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        }
      ]
    },
    {
      "title": "Ask EMA",
      "links": [
        {
          "label": "Public enquiries",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "FAQs",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Access to documents",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        }
      ]
    },
    {
      "title": "Links",
      "links": [
        {
          "label": "Legal",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Privacy",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Complaints",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Browser compatibility",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Contacts",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Business hours and holidays",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Website help",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        }
      ]
    },
    {
      "title": "Contact",
      "links": [
        {
          "label": "EMA<br />30 Churchill Place<br />Canary Whaf<br />London E14 5EU<br />United Kingdom",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Tel: +44 (0)20 3660 6000",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Fax: +44 (0)20 3660 5550",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted"
        },
        {
          "label": "Send a question",
          "href": "#",
          "extra_classes": "ecl-link--ema-inverted ecl-link--ema-external"
        }
      ]
    }
  ],
  "hotline": {
    "href": "#",
    "title": "Product emergency hotline",
    "description": "outside working hours"
  },
  "social": [
    {
      "label": "RSS",
      "href": "#",
      "icon": "rss",
      "extra_classes": "ecl-link--ema-inverted ecl-u-mr-xs"
    },
    {
      "label": "Twitter",
      "href": "#",
      "icon": "twitter",
      "extra_classes": "ecl-link--ema-inverted ecl-u-mr-xs"
    },
    {
      "label": "Youtube",
      "href": "#",
      "icon": "video",
      "extra_classes": "ecl-link--ema-inverted ecl-u-mr-xs"
    }
  ],
  "copyright": "&copy; 1995-2016 European Medicines Agency",
  "description": "An agency of the European Union",
  "logo": {
    "src": "../../framework/images/eu.png",
    "alt": "European Union flag"
  },
  "logo_network": {
    "src": "../../framework/images/euan.png",
    "alt": "European Union agencies network"
  }
}
 
<footer class="ema-footer">
  <div class="ecl-container ema-footer__content">
    <div class="ema-footer__section">
      <div class="ema-footer__hotline">

        <svg class="ema-icon ecl-u-fs-xxl ecl-u-mr-xxs ema-icon--l">
  <use xlink:href="../../framework/images/icons/ema-icons.svg#ema-icon-set_phone" />
</svg>
        <a class="ecl-link--ema-inverted" href="#">
          <div class="ema-footer__hotline-title">Product emergency hotline</div>
          <div class="ema-footer__hotline-desc">outside working hours</div>
        </a>
      </div>
    </div>
  </div>

  <div class="ecl-container ema-footer__content">

    <div class="ema-footer__section">
      <div class="ema-footer__title">About</div>

      <ul class="ecl-list ecl-list--unstyled ema-footer__links">
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Who we are</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">What's new on the site</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Expert blog</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Human regulation</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Veterinary regulation</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Commitees</a>
        </li>
      </ul>
    </div>
    <div class="ema-footer__section">
      <div class="ema-footer__title">Ask EMA</div>

      <ul class="ecl-list ecl-list--unstyled ema-footer__links">
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Public enquiries</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">FAQs</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Access to documents</a>
        </li>
      </ul>
    </div>
    <div class="ema-footer__section">
      <div class="ema-footer__title">Links</div>

      <ul class="ecl-list ecl-list--unstyled ema-footer__links">
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Legal</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Privacy</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Complaints</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Browser compatibility</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Contacts</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Business hours and holidays</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Website help</a>
        </li>
      </ul>
    </div>
    <div class="ema-footer__section">
      <div class="ema-footer__title">Contact</div>

      <ul class="ecl-list ecl-list--unstyled ema-footer__links">
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">EMA<br />30 Churchill Place<br />Canary Whaf<br />London E14 5EU<br />United Kingdom</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Tel: +44 (0)20 3660 6000</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted" href="#">Fax: +44 (0)20 3660 5550</a>
        </li>
        <li>

          <a class="ecl-link ecl-link--ema-inverted ecl-link--ema-external" href="#">Send a question</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="ecl-container">
    <div class="ema-footer__social">
      <span class="ecl-icon ecl-icon--rss"></span>

      <a class="ecl-link ecl-link--ema-inverted ecl-u-mr-xs" href="#">RSS</a>
      <span class="ecl-icon ecl-icon--twitter"></span>

      <a class="ecl-link ecl-link--ema-inverted ecl-u-mr-xs" href="#">Twitter</a>
      <span class="ecl-icon ecl-icon--video"></span>

      <a class="ecl-link ecl-link--ema-inverted ecl-u-mr-xs" href="#">Youtube</a>
    </div>
  </div>

  <div class="ecl-container ema-footer__content">
    <div class="ema-footer__copyright">&copy; 1995-2016 European Medicines Agency</div>
    <div class="ema-footer__description">
      European Union agencies network
      <div class="ema-footer__logo">
        <img src="../../framework/images/euan.png" alt="European Union agencies network" /></img>
      </div>
    </div>
    <div class="ema-footer__description">
      An agency of the European Union
      <div class="ema-footer__logo"><img src="../../framework/images/eu.png" alt="European Union flag" /></div>
    </div>
  </div>

</footer>
  • Content: 
    /**
 * Footers component
 */

.ema-footer {
  background-color: map-get($ema-colors, 'primary');
  color: #fff;
  font-size: map-get($ecl-font-size, 's');
  margin: 0;
  padding: map-get($ecl-spacing, 'm') map-get($ecl-spacing, 'xs');
}

.ema-footer__content {
  display: flex;
  flex-wrap: wrap;
}

.ema-footer__section {
  flex-basis: 100%;

  @include ecl-media-breakpoint-up(sm) {
    flex-basis: 50%;
  }

  @include ecl-media-breakpoint-up(md) {
    flex-basis: 50%;
  }

  @include ecl-media-breakpoint-up(xl) {
    flex-basis: 25%;
  }
}

.ema-footer__title {
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
}

.ema-footer__hotline {
  border: 1px solid map-get($ema-colors, 'grey-3');
  display: flex;
  margin-bottom: map-get($ecl-spacing, 'l');
  margin-right: map-get($ecl-spacing, 'xxs');
  padding: map-get($ecl-spacing, 'xxs');
}

.ema-footer__hotline-desc {
  font-size: map-get($ecl-font-size, 'xs');
  margin-top: map-get($ecl-spacing, 'xxxs');
  text-transform: uppercase;
}

.ema-footer__links {
  line-height: 1.2;

  .ecl-link {
    display: block;
    padding: map-get($ecl-spacing, 'xxxs') 0;
  }
}

.ema-footer__social {
  border-top: 1px solid map-get($ema-colors, 'grey-3');
  margin-top: map-get($ecl-spacing, 'xs');
  padding-bottom: map-get($ecl-spacing, 'xs');
  padding-top: map-get($ecl-spacing, 'xs');
}

.ema-footer__copyright {
  align-self: center;
  flex-grow: 1;
  margin-top: map-get($ecl-spacing, 'xxs');
}

.ema-footer__description {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  margin-top: map-get($ecl-spacing, 'xxs');
}

.ema-footer__logo {
  margin-left: map-get($ecl-spacing, 'xxs');
}
  • URL: /components/raw/ema-footers/ema-footers.scss
  • Filesystem Path: framework/components/ema-footers/ema-footers.scss
  • Size: 1.7 KB
  • Handle: @ec-europa/ema-footers
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ema-footers/ema-footers.twig