Page header - Core template

Title

<div class="ecl-page-header-core">
  <div class="ecl-container">
    <nav class="ecl-page-header-core__breadcrumb ecl-breadcrumb-core" aria-label="You are here:"
      data-ecl-breadcrumb-core="true">
      <ol class="ecl-breadcrumb-core__container">
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static" aria-hidden="false"><a
            href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">Home</a><svg
            focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__segment--ellipsis" aria-hidden="false"
          data-ecl-breadcrumb-core-ellipsis="true"><button type="button" class="ecl-breadcrumb-core__ellipsis"
            aria-label="" data-ecl-breadcrumb-core-ellipsis-button="true">…</button><svg focusable="false"
            aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable" aria-hidden="false"><a
            href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">About the European
            Commission</a><svg focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable" aria-hidden="true"><a
            href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">Organisational
            structure</a><svg focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static" aria-hidden="false"><a
            href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">How the Commission is
            organised</a><svg focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__current-page" aria-current="page"
          data-ecl-breadcrumb-core-item="static" aria-hidden="false">News</li>
      </ol>
    </nav>
    <h1 class="ecl-page-header-core__title">Page title</h1>
  </div>
</div>

Try it yourself on the playground

Playground

Meta - Title

Fullscreen

<div class="ecl-page-header-core">
  <div class="ecl-container">
    <nav class="ecl-page-header-core__breadcrumb ecl-breadcrumb-core" aria-label="You are here:"
      data-ecl-breadcrumb-core="true">
      <ol class="ecl-breadcrumb-core__container">
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static" aria-hidden="false"><a
            href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">Home</a><svg
            focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__segment--ellipsis" aria-hidden="false"
          data-ecl-breadcrumb-core-ellipsis="true"><button type="button" class="ecl-breadcrumb-core__ellipsis"
            aria-label="" data-ecl-breadcrumb-core-ellipsis-button="true">…</button><svg focusable="false"
            aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable" aria-hidden="false"><a
            href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">About the European
            Commission</a><svg focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable" aria-hidden="true"><a
            href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">Organisational
            structure</a><svg focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static" aria-hidden="false"><a
            href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">How the Commission is
            organised</a><svg focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__current-page" aria-current="page"
          data-ecl-breadcrumb-core-item="static" aria-hidden="false">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header-core__meta"><span class="ecl-u-type-uppercase">Meta info</span></div>
    <h1 class="ecl-page-header-core__title">Page title</h1>
  </div>
</div>

Try it yourself on the playground

Playground

Meta - Title - Description

Fullscreen

<div class="ecl-page-header-core">
  <div class="ecl-container">
    <nav class="ecl-page-header-core__breadcrumb ecl-breadcrumb-core" aria-label="You are here:"
      data-ecl-breadcrumb-core="true">
      <ol class="ecl-breadcrumb-core__container">
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static" aria-hidden="false"><a
            href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">Home</a><svg
            focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__segment--ellipsis" aria-hidden="false"
          data-ecl-breadcrumb-core-ellipsis="true"><button type="button" class="ecl-breadcrumb-core__ellipsis"
            aria-label="" data-ecl-breadcrumb-core-ellipsis-button="true">…</button><svg focusable="false"
            aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable" aria-hidden="false"><a
            href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">About the European
            Commission</a><svg focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="expandable" aria-hidden="true"><a
            href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">Organisational
            structure</a><svg focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static" aria-hidden="false"><a
            href="/example" class="ecl-breadcrumb-core__link ecl-link ecl-link--standalone">How the Commission is
            organised</a><svg focusable="false" aria-hidden="true" role="presentation"
            class="ecl-breadcrumb-core__icon ecl-icon ecl-icon--2xs ecl-icon--rotate-90">
            <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment ecl-breadcrumb-core__current-page" aria-current="page"
          data-ecl-breadcrumb-core-item="static" aria-hidden="false">News</li>
      </ol>
    </nav>
    <div class="ecl-page-header-core__meta"><span class="ecl-u-type-uppercase">Meta info</span></div>
    <h1 class="ecl-page-header-core__title">Page title</h1>
    <p class="ecl-page-header-core__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem
      accusantium doloremque laudantium</p>
  </div>
</div>

Try it yourself on the playground

Playground