Europa Component Library

Headers

Documentation • Demo

EMA Header

{#
  - "links" (array): array of links components, with icon
  - "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 _css_class = 'ema-header' %}
{% set _extra_attributes = '' %}
{% set _has_search = has_search|default('true') %}

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

<header class="{{ _css_class }}" {{ _extra_attributes }}>
  <div class="ecl-container ema-header__extra">
    <div class="ema-header__links">
      {% for link in links %}
        {% include '@ec-europa/ema-links' with link %}
      {% endfor %}
    </div>
  </div>

  <div class="ecl-container ema-header__banner">
    <div class="ema-header__logo"><img src="{{ logo.src }}" alt="{{ logo.alt }}" /></div>

    {% if (_has_search != 'false') %}
    {% include '@ec-europa/ema-search-forms' with {
      'input': { 'id': 'global-search' },
      'extra_classes': 'ecl-site-header__search ecl-search-form--ema'
    } %}
    {% endif %}
  </div>
</header>
 
{
  "logo": {
    "src": "../../framework/images/logo_ema.jpg",
    "alt": "EMA logo"
  },
  "links": []
}
 
<header class="ema-header">
  <div class="ecl-container ema-header__extra">
    <div class="ema-header__links">
    </div>
  </div>

  <div class="ecl-container ema-header__banner">
    <div class="ema-header__logo"><img src="../../framework/images/logo_ema.jpg" alt="EMA logo" /></div>

    <form class="ecl-search-form ecl-site-header__search ecl-search-form--ema">
      <label class="ecl-search-form__textfield-wrapper">
    <span class="ecl-u-sr-only">Search this website</span>
    






  

  


<input
  type="search"
  class="ecl-text-input ecl-search-form__textfield ecl-text-input--ema"
  id="global-search"
  name="default-name"
  
/>
  </label>

      <button class="ecl-button ecl-button--form ecl-search-form__button ecl-button--primary ecl-button--ema-primary" type="submit">Search</button>
    </form>
  </div>
</header>
  • Content: 
    /**
* EMA Header component
*/

.ema-header {
  margin: 0;
  padding: map-get($ecl-spacing, 'xs') 0;
}

.ema-header__extra {
  align-items: center;
  display: flex;
  font-size: map-get($ecl-font-size, 's');
  justify-content: flex-end;
}

.ema-header__link-item {
  margin-left: map-get($ecl-spacing, 'xxs');

  &:first-child {
    margin-left: 0;
  }
}
.ema-header__user {
  align-items: center;
  display: flex;
  margin-left: map-get($ecl-spacing, 'm');
}

.ema-header__user-picture {
  background-color: map-get($ema-colors, 'light-grey-1');
  border-radius: 50%;
  height: 2rem;
  margin-left: map-get($ecl-spacing, 'xxs');
  width: 2rem;
}

.ema-header__languages {
  margin-left: map-get($ecl-spacing, 'm');
}

.ema-header__logo {
  flex-grow: 1;
}

.ema-header__banner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
  • URL: /components/raw/ema-headers/ema-headers.scss
  • Filesystem Path: framework/components/ema-headers/ema-headers.scss
  • Size: 867 Bytes
  • Handle: @ec-europa/ema-headers
  • Tags: molecule
  • Preview:
  • Filesystem Path: framework/components/ema-headers/ema-headers.twig