EC System

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 site switcher -
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
{#
  Parameters:
    - "variant" (string) (default: 'default'): could be "basic" or "default"
    - "identity" (string) (default: ''): name of the site, i.e. "SIte identity"
    - "breadcrumb" (array)  (default: []): collection of @ecl/ec-component-link
    - "language_switcher" (object) (default: ''): object of type @ecl/generic-component-lang-select-page
    - "title" (string) (default: ''): page title
    - "introduction" (string) (default: ''): A short and striking phrase related to the site identification (45 characters maximum)
    - "metas" (array) (default: []): array of strings ; each one corresponds to a meta item
    - "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('default'),
  'identity': identity|default(''),
  'breadcrumb': breadcrumb|default([]),
  'language_switcher': language_switcher|default({}),
  'title': title|default(''),
  'introduction': introduction|default(''),
  'metas': metas|default([]),
  'extra_classes': extra_classes|default(''),
  'extra_attributes': extra_attributes|default([]),
  'system': 'ec'
} only %}
{
  "_demo": {
    "scripts": "\n        document.addEventListener('DOMContentLoaded', function () { \n          ECL.initBreadcrumb();\n        });"
  },
  "breadcrumb": [
    {
      "href": "../../example.html#",
      "label": "Home"
    },
    {
      "href": "../../example.html#",
      "label": "Announcements"
    },
    {
      "label": "Business, Economy, Euro"
    }
  ],
  "language_switcher": {
    "is_primary": true,
    "unavailable": "français",
    "current": "Nederlands",
    "options": [
      {
        "href": "/en",
        "hreflang": "en",
        "label": "English",
        "lang": "en"
      },
      {
        "href": "/hr",
        "hreflang": "hr",
        "label": "hrvatski",
        "lang": "hr"
      },
      {
        "href": "/it",
        "hreflang": "it",
        "label": "italiano",
        "lang": "it"
      },
      {
        "href": "/lv",
        "hreflang": "lv",
        "label": "latviesu",
        "lang": "lv"
      },
      {
        "href": "/hu",
        "hreflang": "hu",
        "label": "magyar",
        "lang": "hu"
      }
    ]
  },
  "identity": "Site identity",
  "title": "Business, Economy, Euro",
  "introduction": "EU economy, finance and the euro, and practical information for EU businesses and entrepreneurs on product safety, environmental regulations, trade with non-EU countries and competition rules.",
  "metas": [
    "News article",
    "6 July 2015",
    "Brussels"
  ]
}
<div class="ecl-page-header ecl-page-header--default">
  <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>

    <section class="ecl-lang-select-page ecl-lang-select-page--primary">
      <span class="ecl-icon ecl-icon--generic-lang ecl-lang-select-page__icon"></span>
      <span class="ecl-lang-select-page__unavailable">français</span>
      <select class="ecl-lang-select-page__dropdown" aria-label="Choose your language">
        <option class="ecl-lang-select-page__dropdown-option" value="" selected>Nederlands</option>
        <option class="ecl-lang-select-page__dropdown-option" value="en" lang="en">English</option>
        <option class="ecl-lang-select-page__dropdown-option" value="hr" lang="hr">hrvatski</option>
        <option class="ecl-lang-select-page__dropdown-option" value="it" lang="it">italiano</option>
        <option class="ecl-lang-select-page__dropdown-option" value="lv" lang="lv">latviesu</option>
        <option class="ecl-lang-select-page__dropdown-option" value="hu" lang="hu">magyar</option>
      </select>
      <ul class="ecl-lang-select-page__list">
        <li class="ecl-lang-select-page__option ecl-lang-select-page__option--is-selected">Nederlands</li>
        <li class="ecl-lang-select-page__option">

          <a class="ecl-link ecl-link--inverted" href="/en" hreflang="en" lang="en" rel="alternate">English</a>
        </li>
        <li class="ecl-lang-select-page__option">

          <a class="ecl-link ecl-link--inverted" href="/hr" hreflang="hr" lang="hr" rel="alternate">hrvatski</a>
        </li>
        <li class="ecl-lang-select-page__option">

          <a class="ecl-link ecl-link--inverted" href="/it" hreflang="it" lang="it" rel="alternate">italiano</a>
        </li>
        <li class="ecl-lang-select-page__option">

          <a class="ecl-link ecl-link--inverted" href="/lv" hreflang="lv" lang="lv" rel="alternate">latviesu</a>
        </li>
        <li class="ecl-lang-select-page__option">

          <a class="ecl-link ecl-link--inverted" href="/hu" hreflang="hu" lang="hu" rel="alternate">magyar</a>
        </li>
      </ul>
    </section>

    <div class="ecl-page-header__body">
      <div class="ecl-page-header__identity">
        Site identity
      </div>
      <div class="ecl-page-header__meta">

        <div class="ecl-meta ecl-meta--header">
          <span class="ecl-meta__item">News article</span>
          <span class="ecl-meta__item">6 July 2015</span>
          <span class="ecl-meta__item">Brussels</span>
        </div>
      </div>
      <div class="ecl-page-header__title">
        <h1 class="ecl-heading ecl-heading--h1 ecl-u-color-white">Business, Economy, Euro</h1>
      </div>
      <p class="ecl-page-header__intro">EU economy, finance and the euro, and practical information for EU businesses and entrepreneurs on product safety, environmental regulations, trade with non-EU countries and competition rules.</p>
    </div>
  </div>
</div>
  • Content:
    /**
     * Page header
     * @define page-header
     */
    
    // Import base and generic
    @import '@ecl/ec-base/ec-base';
    @import '@ecl/generic-component-page-header/generic-component-page-header';
    
    // Use generic mixin
    @include exports('ec-component-page-header') {
      @include ecl-page-header();
    }
    
  • URL: /components/raw/ec-component-page-header/ec-component-page-header.scss
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-page-header/ec-component-page-header.scss
  • Size: 283 Bytes
  • Handle: @ecl/ec-component-page-header--default
  • Tags: organism
  • Variants (2): Default , Basic
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-component/ec-component-page-header/ec-component-page-header.twig