Europa Component Library

Page Headers: Basic

Documentation • Demo

Page header

Why and how to use this component

Users need a way to easily identify the branding, to search and change the language if needed.

  • the page title functions as the top level H1.
  • it is also used to construct the <title> element (mandatory).
  • gives context and confidence to the user so they know they are looking at the right piece of content.
  • provides an H1 title for accessibility and SEO purposes.

Page header types

  • default page header
  • basic page header
Default page header Basic page header
Mandatory components Mandatory components
Breadcrumb Breadcrumb
Page title -
Optional components Optional components
Meta items Meta items
Site identification Site identification
Page introduction -

When to use this component

Default page header Basic page header
detail pages and landing pages detail pages and landing pages
navigation menu not allowed navigation menu
default implementation page title and page introduction elements should be placed on the body of the page 
{#
  Accepts the following context variables:
  - variant: (string) Could be: default, basic, highlight

  Variables for `basic` and `default`:
  - identity: (string) The name of the site, i.e. "Digital single market"
  - breadcrumb: (array) Array of links for the breadcrumb. Structure: [{'target': '#', 'title': 'lorem ipsum'}]

  Variables for `highlight`:
  - label: (string) The label of the text box.
  - highlight: (string) The value of the text box.

  Variables for `default`:
  - title: (string) Page title.
  - introduction: (string) The text inside intro area.
  - paragraph_class: (string) Possible additional classes on the intro paragraph.
  - metas (array): array of strings; each one correspond to a meta item (default: empty)
#}

{% if variant is defined and variant == "highlight" %}

<div class="ecl-page-header ecl-page-header--highlight">
  <div class="ecl-page-header__body">
    <div class="ecl-page-header__label">{{ label }}</div>
    <div class="ecl-page-header__highlight">
      {{ highlight }}
    </div>
  </div>
</div>

{% else %}

<div class="ecl-page-header">
  <div class="ecl-container">

    {% include '@ec-europa/ecl-breadcrumbs' with { 'segments': breadcrumb } %}

    <div class="ecl-page-header__body">

      {% if identity is defined %}
      <div class="ecl-page-header__identity">
        {{ identity }}
      </div>
      {% endif %}

      {% if metas is defined %}
      <div class="ecl-page-header__meta">
        {% include '@ec-europa/ecl-meta' with {
          'variant': 'header',
          'metas': metas }
        %}
      </div>
      {% endif %}

      {% if title is defined %}
      <div class="ecl-page-header__title">
        <h1 class="ecl-heading ecl-heading--h1 ecl-u-color-white">{{ title }}</h1>
      </div>
      {% endif %}

      {% if introduction is defined %}
      <div class="ecl-page-header__intro">
        <p class="{{ paragraph_class }}">{{ introduction }}</p>
      </div>
      {% endif %}

    </div>
  </div>
</div>
{% endif %}
 
{
  "identity": "Digital single market",
  "breadcrumb": [
    {
      "href": "#",
      "label": "European Commission"
    },
    {
      "href": "#",
      "label": "Announcements"
    }
  ]
}
 
<div class="ecl-page-header">
  <div class="ecl-container">

    <nav class="ecl-breadcrumbs " aria-label="breadcrumbs">
      <span class="ecl-u-sr-only">You are here:</span>
      <ol class="ecl-breadcrumbs__segments-wrapper">
        <li class="ecl-breadcrumbs__segment ecl-breadcrumbs__segment--first">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumbs__link" href="#">European Commission</a>
        </li>
        <li class="ecl-breadcrumbs__segment ecl-breadcrumbs__segment--last">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumbs__link" href="#">Announcements</a>
        </li>
      </ol>
    </nav>

    <div class="ecl-page-header__body">

      <div class="ecl-page-header__identity">
        Digital single market
      </div>

    </div>
  </div>
</div>
  • Content: 
    /**
 * Page header
 * @define page-header
 */

.ecl-page-header {
  background-color: $ecl-color-primary;
  color: #fff;
  margin: 0;

  &__body {
    padding: map-get($ecl-spacing, 'xxs') 0;
  }

  &__meta {
    margin-top: map-get($ecl-spacing, 'm');
  }

  &__title {
    margin-top: map-get($ecl-spacing, 'm');
  }

  &__identity {
    color: map-get($ecl-colors, 'blue-25');
    font-size: map-get($ecl-font-size, 'l');
    margin-bottom: map-get($ecl-spacing, 'xxs');
    margin-top: map-get($ecl-spacing, 'xxs');
  }

  &__intro {
    font-size: map-get($ecl-font-size, 'l');
    line-height: 1.33;
    max-width: 40em;
  }

  &__label {
    font-size: map-get($ecl-font-size, 'xs');
    text-transform: uppercase;
  }
}

.ecl-page-header--image {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.ecl-page-header--highlight {
  padding-bottom: map-get($ecl-spacing, 'm');

  .ecl-page-header__body {
    background-color: map-get($ecl-colors, 'blue-120');
    padding-bottom: map-get($ecl-spacing, 'xs');
  }
}

@media (min-width: map-get($ecl-grid-breakpoints, 'sm')) {
  .ecl-page-header--highlight {
    padding-bottom: 0;

    .ecl-page-header__body {
      background-color: $ecl-color-primary;
      padding-bottom: map-get($ecl-spacing, 'xxl');
      padding-top: map-get($ecl-spacing, 'xxl');
    }
  }

  .ecl-page-header__label {
    background-color: map-get($ecl-colors, 'blue-120');
    display: inline-block;
    line-height: 2.4;
    padding-left: map-get($ecl-spacing, 'm');
    padding-right: map-get($ecl-spacing, 'm');
  }

  .ecl-page-header__highlight {
    background-color: #fff;
    color: $ecl-color-primary;
    font-size: map-get($ecl-font-size, 'l');
    max-width: 22em;
    padding: map-get($ecl-spacing, 's') map-get($ecl-spacing, 'm');
  }
}
  • URL: /components/raw/ecl-page-headers/_page-headers.scss
  • Filesystem Path: framework/components/ecl-page-headers/_page-headers.scss
  • Size: 1.8 KB