Page header - Site-wide

Core page header

<div class="ecl-page-header ecl-page-header--negative ecl-page-header--image">
  <div class="ecl-page-header__background"
    style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
    aria-hidden="true"></div>
  <div class="ecl-container">
    <nav class="ecl-breadcrumb-core ecl-page-header__breadcrumb" aria-label="You are here:"
      data-ecl-breadcrumb-core="true" data-ecl-auto-init="BreadcrumbCore">
      <ol class="ecl-breadcrumb-core__container">
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-core__link">Home</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__segment--ellipsis"
          data-ecl-breadcrumb-core-ellipsis=""><button
            class="ecl-button ecl-button--ghost ecl-breadcrumb-core__ellipsis" type="button"
            data-ecl-breadcrumb-core-ellipsis-button="" aria-label="Click to expand">…</button><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-core__link">About
            the European Commission</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon"
            focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-core__link">Organisational
            structure</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon"
            focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-core__link">How
            the Commission is organised</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__current-page"
          data-ecl-breadcrumb-core-item="static" aria-current="page">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
        class="ecl-page-header__meta-item">DD Month YYYY</span></div>
    <div class="ecl-page-header__title-container">
      <h1 class="ecl-page-header__title">Page title</h1>
    </div>
    <div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
      <p class="ecl-page-header__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec
        ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, eget dictum elit. Vestibulum gravida
        tincidunt venenatis.</p>
    </div>
  </div>
</div>

Try it yourself on the playground

Playground

Core page header with thumbnail

Fullscreen

<div class="ecl-page-header ecl-page-header--negative ecl-page-header--image">
  <div class="ecl-page-header__background"
    style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
    aria-hidden="true"></div>
  <div class="ecl-container">
    <nav class="ecl-breadcrumb-core ecl-page-header__breadcrumb" aria-label="You are here:"
      data-ecl-breadcrumb-core="true" data-ecl-auto-init="BreadcrumbCore">
      <ol class="ecl-breadcrumb-core__container">
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-core__link">Home</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__segment--ellipsis"
          data-ecl-breadcrumb-core-ellipsis=""><button
            class="ecl-button ecl-button--ghost ecl-breadcrumb-core__ellipsis" type="button"
            data-ecl-breadcrumb-core-ellipsis-button="" aria-label="Click to expand">…</button><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-core__link">About
            the European Commission</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon"
            focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-core__link">Organisational
            structure</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon"
            focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-core__link">How
            the Commission is organised</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__current-page"
          data-ecl-breadcrumb-core-item="static" aria-current="page">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
        class="ecl-page-header__meta-item">DD Month YYYY</span></div>
    <div class="ecl-page-header__title-container">
      <h1 class="ecl-page-header__title">Page title</h1>
    </div>
    <div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
      <p class="ecl-page-header__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec
        ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, eget dictum elit. Vestibulum gravida
        tincidunt venenatis.</p>
    </div>
  </div>
</div>

Try it yourself on the playground

Playground

Core page header with background image

Overlay can be configured (dark, light or none)

Fullscreen

<div class="ecl-page-header ecl-page-header--negative ecl-page-header--image">
  <div class="ecl-page-header__background"
    style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
    aria-hidden="true"></div>
  <div class="ecl-container">
    <nav class="ecl-breadcrumb-core ecl-page-header__breadcrumb" aria-label="You are here:"
      data-ecl-breadcrumb-core="true" data-ecl-auto-init="BreadcrumbCore">
      <ol class="ecl-breadcrumb-core__container">
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-core__link">Home</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__segment--ellipsis"
          data-ecl-breadcrumb-core-ellipsis=""><button
            class="ecl-button ecl-button--ghost ecl-breadcrumb-core__ellipsis" type="button"
            data-ecl-breadcrumb-core-ellipsis-button="" aria-label="Click to expand">…</button><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-core__link">About
            the European Commission</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon"
            focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-core__link">Organisational
            structure</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon"
            focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-core__link">How
            the Commission is organised</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-core__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__current-page"
          data-ecl-breadcrumb-core-item="static" aria-current="page">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
        class="ecl-page-header__meta-item">DD Month YYYY</span></div>
    <div class="ecl-page-header__title-container">
      <h1 class="ecl-page-header__title">Page title</h1>
    </div>
    <div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
      <p class="ecl-page-header__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec
        ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, eget dictum elit. Vestibulum gravida
        tincidunt venenatis.</p>
    </div>
  </div>
</div>

Try it yourself on the playground

Playground

Harmonised page header

Fullscreen

<div class="ecl-page-header ecl-page-header--image">
  <div class="ecl-page-header__background"
    style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
    aria-hidden="true"></div>
  <div class="ecl-container">
    <nav class="ecl-breadcrumb-standardised ecl-page-header__breadcrumb" aria-label="You are here:"
      data-ecl-breadcrumb-standardised="true" data-ecl-auto-init="BreadcrumbStandardised">
      <ol class="ecl-breadcrumb-standardised__container">
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">Home</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__segment--ellipsis"
          data-ecl-breadcrumb-standardised-ellipsis=""><button
            class="ecl-button ecl-button--ghost ecl-breadcrumb-standardised__ellipsis" type="button"
            data-ecl-breadcrumb-standardised-ellipsis-button="" aria-label="Click to expand">…</button><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="expandable"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">About
            the European Commission</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="expandable"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">Organisational
            structure</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon"
            focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">How
            the Commission is organised</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__current-page"
          data-ecl-breadcrumb-standardised-item="static" aria-current="page">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
        class="ecl-page-header__meta-item">DD Month YYYY</span></div>
    <div class="ecl-page-header__title-container">
      <h1 class="ecl-page-header__title">Page title</h1>
    </div>
    <div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
      <p class="ecl-page-header__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec
        ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, eget dictum elit. Vestibulum gravida
        tincidunt venenatis.</p>
    </div>
  </div>
</div>

Try it yourself on the playground

Playground

Standardised page header

Fullscreen

<div class="ecl-page-header ecl-page-header--image">
  <div class="ecl-page-header__background"
    style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
    aria-hidden="true"></div>
  <div class="ecl-container">
    <nav class="ecl-breadcrumb-standardised ecl-page-header__breadcrumb" aria-label="You are here:"
      data-ecl-breadcrumb-standardised="true" data-ecl-auto-init="BreadcrumbStandardised">
      <ol class="ecl-breadcrumb-standardised__container">
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">Home</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__segment--ellipsis"
          data-ecl-breadcrumb-standardised-ellipsis=""><button
            class="ecl-button ecl-button--ghost ecl-breadcrumb-standardised__ellipsis" type="button"
            data-ecl-breadcrumb-standardised-ellipsis-button="" aria-label="Click to expand">…</button><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="expandable"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">About
            the European Commission</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="expandable"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">Organisational
            structure</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon"
            focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">How
            the Commission is organised</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__current-page"
          data-ecl-breadcrumb-standardised-item="static" aria-current="page">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
        class="ecl-page-header__meta-item">DD Month YYYY</span></div>
    <div class="ecl-page-header__title-container">
      <h1 class="ecl-page-header__title">Page title</h1>
    </div>
    <div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
      <p class="ecl-page-header__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec
        ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, eget dictum elit. Vestibulum gravida
        tincidunt venenatis.</p>
    </div>
  </div>
</div>

Try it yourself on the playground

Playground

Standardised page header with thumbnail

Fullscreen

<div class="ecl-page-header ecl-page-header--image">
  <div class="ecl-page-header__background"
    style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
    aria-hidden="true"></div>
  <div class="ecl-container">
    <nav class="ecl-breadcrumb-standardised ecl-page-header__breadcrumb" aria-label="You are here:"
      data-ecl-breadcrumb-standardised="true" data-ecl-auto-init="BreadcrumbStandardised">
      <ol class="ecl-breadcrumb-standardised__container">
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">Home</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__segment--ellipsis"
          data-ecl-breadcrumb-standardised-ellipsis=""><button
            class="ecl-button ecl-button--ghost ecl-breadcrumb-standardised__ellipsis" type="button"
            data-ecl-breadcrumb-standardised-ellipsis-button="" aria-label="Click to expand">…</button><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="expandable"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">About
            the European Commission</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="expandable"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">Organisational
            structure</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon"
            focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">How
            the Commission is organised</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__current-page"
          data-ecl-breadcrumb-standardised-item="static" aria-current="page">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
        class="ecl-page-header__meta-item">DD Month YYYY</span></div>
    <div class="ecl-page-header__title-container">
      <h1 class="ecl-page-header__title">Page title</h1>
    </div>
    <div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
      <p class="ecl-page-header__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec
        ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, eget dictum elit. Vestibulum gravida
        tincidunt venenatis.</p>
    </div>
  </div>
</div>

Try it yourself on the playground

Playground

Standardised page header with background image

Overlay can be configured (dark, light or none)

Fullscreen

<div class="ecl-page-header ecl-page-header--image">
  <div class="ecl-page-header__background"
    style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
    aria-hidden="true"></div>
  <div class="ecl-container">
    <nav class="ecl-breadcrumb-standardised ecl-page-header__breadcrumb" aria-label="You are here:"
      data-ecl-breadcrumb-standardised="true" data-ecl-auto-init="BreadcrumbStandardised">
      <ol class="ecl-breadcrumb-standardised__container">
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">Home</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__segment--ellipsis"
          data-ecl-breadcrumb-standardised-ellipsis=""><button
            class="ecl-button ecl-button--ghost ecl-breadcrumb-standardised__ellipsis" type="button"
            data-ecl-breadcrumb-standardised-ellipsis-button="" aria-label="Click to expand">…</button><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="expandable"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">About
            the European Commission</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="expandable"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">Organisational
            structure</a><svg class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon"
            focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment" data-ecl-breadcrumb-standardised-item="static"><a
            href="/example"
            class="ecl-link ecl-link--standalone ecl-link--negative ecl-link--no-visited ecl-breadcrumb-standardised__link">How
            the Commission is organised</a><svg
            class="ecl-icon ecl-icon--2xs ecl-icon--rotate-90 ecl-breadcrumb-standardised__icon" focusable="false"
            aria-hidden="true" role="presentation">
            <use xlink:href="/dist/media/icons.cec58484.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-standardised__segment ecl-breadcrumb-standardised__current-page"
          data-ecl-breadcrumb-standardised-item="static" aria-current="page">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
        class="ecl-page-header__meta-item">DD Month YYYY</span></div>
    <div class="ecl-page-header__title-container">
      <h1 class="ecl-page-header__title">Page title</h1>
    </div>
    <div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
      <p class="ecl-page-header__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec
        ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, eget dictum elit. Vestibulum gravida
        tincidunt venenatis.</p>
    </div>
  </div>
</div>

Try it yourself on the playground

Playground