EU System

Page Headers: Basic

Documentation • Demo

Page header

Why and how to use this component

Users need a way to easily identify the site name.

Page header types

  • EU homepage (only for europa.eu)
    • Image background
  • EU branded homepage
    • Colour background or image background
  • Basic
    • Colour background
EU homepage EU branded homepage Basic
Mandatory components Slogan Breadcrumb
Site Identification		 Breadcrumb
Optional components Slogan Site Identification

When to use this component

EU homepage EU branded homepage Basic
europa.eu homepage only EU branded homepages Europa.eu detailpages + EU branded detail pages
Components Guidance
Site identification The site identification is the name of the site
Slogan A short and striking phrase related to the site identification (45 characters maximum) 
{#
  Parameters:
    - "variant" (string) (default: 'basic'): could be "basic", "homepage" or "branded-homepage"
    - "identity" (string) (default: ''): name of the site, i.e. "Site identity"
    - "breadcrumb" (array)  (default: []): collection of @ecl/eu-component-link
    - "introduction" (string) (default: ''): A short and striking phrase related to the site identification (45 characters maximum)
    - "background_image" (default: ''): path to background image
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
#}

{% include '@ecl/generic-component-page-header' with {
  'variant': variant|default('basic'),
  'identity': identity|default(''),
  'breadcrumb': breadcrumb|default([]),
  'introduction': introduction|default(''),
  'background_image': background_image|default(),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([]),
  'system': 'eu'
} only %}
 
{
  "_demo": {
    "scripts": "\n        document.addEventListener('DOMContentLoaded', function () { \n          ECL.initBreadcrumb();\n        });"
  },
  "variant": "basic",
  "breadcrumb": [
    {
      "href": "../../example.html#",
      "label": "Home"
    },
    {
      "href": "../../example.html#",
      "label": "Announcements"
    },
    {
      "label": "Business, Economy, Euro"
    }
  ],
  "identity": "Your gateway"
}
 
<div class="ecl-page-header ecl-page-header--basic">
  <div class="ecl-container">

    <nav class="ecl-breadcrumb" aria-label="breadcrumb">
      <span class="ecl-u-sr-only">You are here:</span>
      <ol class="ecl-breadcrumb__segments-wrapper">
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--first">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumb__link" href="../../example.html#">Home</a>
        </li>
        <li class="ecl-breadcrumb__segment">

          <a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumb__link" href="../../example.html#">Announcements</a>
        </li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--last">
          <span>Business, Economy, Euro</span>
        </li>
      </ol>
    </nav>

    <div class="ecl-page-header__body">
      <div class="ecl-page-header__identity">
        Your gateway
      </div>
    </div>
  </div>
</div>
  • Content: 
    /**
 * Page header
 * @define page-header
 */

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

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

  // Custom css
  .ecl-page-header--image::after {
    /* stylelint-disable */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#063978+0,063978+100&0.77+0,0.2+100 */
    background: -moz-linear-gradient(
      left,
      rgba(6, 57, 120, 0.77) 0%,
      rgba(6, 57, 120, 0.2) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      left,
      rgba(6, 57, 120, 0.77) 0%,
      rgba(6, 57, 120, 0.2) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to right,
      rgba(6, 57, 120, 0.77) 0%,
      rgba(6, 57, 120, 0.2) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4063978', endColorstr='#33063978',GradientType=1 ); /* IE6-9 */
    /* stylelint-enable */
  }

  // Basic
  .ecl-page-header__body {
    padding-bottom: map-get($ecl-spacing, 's');
    padding-top: map-get($ecl-spacing, 's');
  }

  .ecl-page-header__identity {
    color: #fff;
    font-size: map-get($ecl-font-size, 'xl');
    line-height: 1.15;
    margin: 0;
  }

  .ecl-page-header__intro {
    font-size: map-get($ecl-font-size, 'xl');
    line-height: 1.15;
    margin: 0;
  }

  @media (min-width: map-get($ecl-grid-breakpoints, 'sm')) {
    .ecl-page-header__body {
      padding-bottom: map-get($ecl-spacing, 'm');
      padding-top: map-get($ecl-spacing, 'm');
    }
  }

  // Homepage
  .ecl-page-header--homepage {
    .ecl-page-header__body {
      padding-bottom: map-get($ecl-spacing, 'm');
      padding-left: map-get($ecl-spacing, 's');
      padding-top: map-get($ecl-spacing, 's');
    }

    .ecl-page-header__identity {
      font-size: map-get($ecl-font-size, 'xxl');
      font-weight: bold;
      line-height: 1.3;
      text-shadow: 0 0.3rem 0.3rem #000;
    }

    .ecl-page-header__intro {
      font-size: map-get($ecl-font-size, 'l');
      line-height: 1.15;
      text-shadow: 0 0.3rem 0.3rem #000;
    }

    @media (min-width: map-get($ecl-grid-breakpoints, 'sm')) {
      .ecl-page-header__body {
        padding-bottom: map-get($ecl-spacing, 'xl');
        padding-left: 0;
        padding-top: map-get($ecl-spacing, 'l');
      }

      .ecl-page-header__identity {
        font-size: 3.4rem;
        line-height: 1.4;
      }

      .ecl-page-header__intro {
        font-size: map-get($ecl-font-size, 'xxl');
        line-height: 1.2;
      }
    }
  }

  // Branded homepage
  .ecl-page-header--branded-homepage {
    .ecl-page-header__body {
      padding-bottom: map-get($ecl-spacing, 's');
      padding-top: map-get($ecl-spacing, 's');
    }

    .ecl-page-header__identity {
      font-size: map-get($ecl-font-size, 'xxl');
      font-weight: bold;
      line-height: 1.15;
    }

    .ecl-page-header__intro {
      font-size: map-get($ecl-font-size, 'xxl');
      line-height: 1.15;
    }

    @media (min-width: map-get($ecl-grid-breakpoints, 'sm')) {
      .ecl-page-header__body {
        padding-bottom: map-get($ecl-spacing, 'l');
        padding-top: map-get($ecl-spacing, 'l');
      }
    }
  }
}
  • URL: /components/raw/eu-component-page-header/eu-component-page-header.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-page-header/eu-component-page-header.scss
  • Size: 3.4 KB