Page header

<div class="ecl-page-header">
  <div class="ecl-container">
    <nav class="ecl-page-header__breadcrumb ecl-breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true">
      <ol class="ecl-breadcrumb__container">
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">Home</a><svg focusable="false" aria-hidden="true"
            role="presentation" class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">About the European Commission</a><svg
            focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" aria-current="page"
          data-ecl-breadcrumb-item="static" aria-hidden="false">News</li>
      </ol>
    </nav>
    <h1 class="ecl-page-header__title">Page title</h1>
  </div>
</div>

<div class="ecl-page-header">
  <div class="ecl-container">
    <nav class="ecl-page-header__breadcrumb ecl-breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true">
      <ol class="ecl-breadcrumb__container">
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">Home</a><svg focusable="false" aria-hidden="true"
            role="presentation" class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">About the European Commission</a><svg
            focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" aria-current="page"
          data-ecl-breadcrumb-item="static" aria-hidden="false">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header__meta-list">News article | 17 October 2015</div>
    <h1 class="ecl-page-header__title">Page title</h1>
  </div>
</div>

<div class="ecl-page-header">
  <div class="ecl-container">
    <nav class="ecl-page-header__breadcrumb ecl-breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true">
      <ol class="ecl-breadcrumb__container">
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">Home</a><svg focusable="false" aria-hidden="true"
            role="presentation" class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">About the European Commission</a><svg
            focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" aria-current="page"
          data-ecl-breadcrumb-item="static" aria-hidden="false">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header__meta-list">News article | 17 October 2015</div>
    <h1 class="ecl-page-header__title">Page title</h1>
    <p class="ecl-page-header__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
      doloremque laudantium</p>
  </div>
</div>

<div class="ecl-page-header">
  <div class="ecl-container">
    <nav class="ecl-page-header__breadcrumb ecl-breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true">
      <ol class="ecl-breadcrumb__container">
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">Home</a><svg focusable="false" aria-hidden="true"
            role="presentation" class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">About the European Commission</a><svg
            focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" aria-current="page"
          data-ecl-breadcrumb-item="static" aria-hidden="false">News</li>
      </ol>
    </nav>
    <h1 class="ecl-page-header__title">Page title</h1>
    <p class="ecl-page-header__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
      doloremque laudantium</p>
  </div>
</div>

<div class="ecl-page-header">
  <div class="ecl-container">
    <nav class="ecl-page-header__breadcrumb ecl-breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true">
      <ol class="ecl-breadcrumb__container">
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">Home</a><svg focusable="false" aria-hidden="true"
            role="presentation" class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">About the European Commission</a><svg
            focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" aria-current="page"
          data-ecl-breadcrumb-item="static" aria-hidden="false">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header__meta-list">News article | 17 October 2015</div>
    <h1 class="ecl-page-header__title">Page title</h1>
    <ul class="ecl-page-header__info-list">
      <li class="ecl-page-header__info-item"><svg focusable="false" aria-hidden="true" role="presentation"
          class="ecl-page-header__info-icon ecl-icon ecl-icon--s">
          <use xlink:href="/dist/media/icons.db866e2e.svg#general--calendar"></use>
        </svg>Monday 8 February</li>
      <li class="ecl-page-header__info-item"><svg focusable="false" aria-hidden="true" role="presentation"
          class="ecl-page-header__info-icon ecl-icon ecl-icon--s">
          <use xlink:href="/dist/media/icons.db866e2e.svg#general--location"></use>
        </svg>Munich, Germany</li>
      <li class="ecl-page-header__info-item"><svg focusable="false" aria-hidden="true" role="presentation"
          class="ecl-page-header__info-icon ecl-icon ecl-icon--s">
          <use xlink:href="/dist/media/icons.db866e2e.svg#general--livestreaming"></use>
        </svg>Live streaming available</li>
    </ul>
  </div>
</div>

<div class="ecl-page-header">
  <div class="ecl-container">
    <nav class="ecl-page-header__breadcrumb ecl-breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true">
      <ol class="ecl-breadcrumb__container">
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">Home</a><svg focusable="false" aria-hidden="true"
            role="presentation" class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
            class="ecl-breadcrumb__link ecl-link ecl-link--standalone">About the European Commission</a><svg
            focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" aria-current="page"
          data-ecl-breadcrumb-item="static" aria-hidden="false">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header__meta-list">News article | 17 October 2015</div>
    <h1 class="ecl-page-header__title">Page title</h1>
    <p class="ecl-page-header__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
      doloremque laudantium</p>
    <ul class="ecl-page-header__info-list">
      <li class="ecl-page-header__info-item"><svg focusable="false" aria-hidden="true" role="presentation"
          class="ecl-page-header__info-icon ecl-icon ecl-icon--s">
          <use xlink:href="/dist/media/icons.db866e2e.svg#general--calendar"></use>
        </svg>Monday 8 February</li>
      <li class="ecl-page-header__info-item"><svg focusable="false" aria-hidden="true" role="presentation"
          class="ecl-page-header__info-icon ecl-icon ecl-icon--s">
          <use xlink:href="/dist/media/icons.db866e2e.svg#general--location"></use>
        </svg>Munich, Germany</li>
      <li class="ecl-page-header__info-item"><svg focusable="false" aria-hidden="true" role="presentation"
          class="ecl-page-header__info-icon ecl-icon ecl-icon--s">
          <use xlink:href="/dist/media/icons.db866e2e.svg#general--livestreaming"></use>
        </svg>Live streaming available</li>
    </ul>
  </div>
</div>