Page header

<div class="ecl-page-header">
  <div class="ecl-container">
    <nav class="ecl-breadcrumb ecl-page-header__breadcrumb" aria-label="You are here:"
      data-ecl-breadcrumb="true" data-ecl-auto-init="Breadcrumb">
      <ol class="ecl-breadcrumb__container">
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Home</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis
          aria-hidden="true"><button class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
            data-ecl-breadcrumb-ellipsis-button aria-label="Show more breadcrumb items">…</button><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Parent Page label</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Parent Page label</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Parent Page label</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Parent Page label</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
          aria-current="page">Current Page Label</li>
      </ol>
    </nav>
    <div class="ecl-page-header__info">
      <ul class="ecl-page-header__meta">
        <li class="ecl-page-header__meta-item">Meta info</li>
        <li class="ecl-page-header__meta-item">DD Month YYYY</li>
      </ul>
      <h1 class="ecl-page-header__title">Page title</h1>
    </div>
    <div class="ecl-page-header__description-container">
      <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, <a class="ecl-link" href="/example">eget
          dictum elit</a>. Vestibulum gravida tincidunt venenatis.</p>
    </div>
  </div>
</div>

<div class="ecl-page-header ecl-page-header--image">
  <div class="ecl-page-header__background-container" aria-hidden="true">
    <picture class="ecl-picture ecl-page-header__picture-background"><img class="ecl-page-header__background"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" /></picture>
  </div>
  <div class="ecl-container">
    <nav class="ecl-breadcrumb ecl-page-header__breadcrumb" aria-label="You are here:"
      data-ecl-breadcrumb="true" data-ecl-auto-init="Breadcrumb">
      <ol class="ecl-breadcrumb__container">
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Home</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis
          aria-hidden="true"><button class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
            data-ecl-breadcrumb-ellipsis-button aria-label="Show more breadcrumb items">…</button><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Parent Page label</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Parent Page label</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Parent Page label</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Parent Page label</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
          aria-current="page">Current Page Label</li>
      </ol>
    </nav>
    <div class="ecl-page-header__info">
      <ul class="ecl-page-header__meta">
        <li class="ecl-page-header__meta-item">Meta info</li>
        <li class="ecl-page-header__meta-item">DD Month YYYY</li>
      </ul>
      <h1 class="ecl-page-header__title">Page title</h1>
    </div>
    <div class="ecl-page-header__description-container">
      <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, <a class="ecl-link" href="/example">eget
          dictum elit</a>. Vestibulum gravida tincidunt venenatis.</p>
    </div>
  </div>
</div>

<div class="ecl-page-header">
  <div class="ecl-container">
    <nav class="ecl-breadcrumb ecl-page-header__breadcrumb" aria-label="You are here:"
      data-ecl-breadcrumb="true" data-ecl-auto-init="Breadcrumb">
      <ol class="ecl-breadcrumb__container">
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Home</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis
          aria-hidden="true"><button class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
            data-ecl-breadcrumb-ellipsis-button aria-label="Show more breadcrumb items">…</button><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Parent Page label</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Parent Page label</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Parent Page label</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Parent Page label</a><svg
            class="ecl-icon ecl-icon--fluid ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
            role="presentation">
            <use xlink:href="/dist/media/icons.e3d8f25c.svg#corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
          aria-current="page">Current Page Label</li>
      </ol>
    </nav>
    <div class="ecl-page-header__info">
      <ul class="ecl-page-header__meta">
        <li class="ecl-page-header__meta-item">Meta info</li>
        <li class="ecl-page-header__meta-item">DD Month YYYY</li>
      </ul>
      <h1 class="ecl-page-header__title">Page title</h1>
    </div>
    <div class="ecl-page-header__description-container">
      <picture class="ecl-picture ecl-page-header__picture-thumbnail"><img
          class="ecl-page-header__description-thumbnail"
          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" /></picture>
      <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, <a class="ecl-link" href="/example">eget
          dictum elit</a>. Vestibulum gravida tincidunt venenatis.</p>
    </div>
  </div>
</div>