Inpage navigation - Navigation

Heading 1

Sunt do ipsum excepteur mollit do dolor amet adipisicing ea. Officia esse sunt consequat cupidatat. Voluptate ad sint duis enim duis ullamco exercitation do aute do nulla proident. Veniam fugiat excepteur cillum culpa laboris consectetur quis. Cillum mollit magna culpa dolor velit officia dolor velit voluptate cupidatat ea commodo ad id. Cillum voluptate ad occaecat ad nostrud aliquip qui exercitation occaecat ipsum aliqua. Amet ad exercitation commodo non deserunt nostrud non elit velit veniam ipsum ullamco quis. Incididunt ex sunt nisi ullamco aute esse. Ullamco velit aute mollit proident et culpa ullamco officia do minim minim deserunt officia minim. Laborum adipisicing et aute ea reprehenderit. Officia sit officia minim proident tempor ipsum aute dolor. Mollit cillum eu irure tempor elit mollit non officia tempor do. Anim nostrud dolor sit elit qui sit dolor minim cupidatat eu. Sint exercitation ad velit aute labore Lorem sit. Anim enim culpa minim id mollit magna occaecat laboris elit magna est. Ad et sint ullamco exercitation pariatur aliqua cupidatat laboris sint anim cupidatat reprehenderit. Esse anim excepteur laborum irure occaecat occaecat. Ea qui ad dolore nulla et ipsum. Duis consequat amet exercitation irure. Exercitation aute id duis nisi aute cupidatat id aliquip laborum commodo nulla eiusmod laboris aliqua. Eiusmod aute occaecat est anim sint do est occaecat Lorem labore anim eu ut ullamco. Et sit reprehenderit esse est. Excepteur do minim qui cillum consequat. Veniam proident amet nisi elit amet est quis cupidatat aliqua officia est exercitation. Esse veniam enim cillum consectetur laboris.
Heading 2 with a long title going on several lines

Heading 3

Heading 4

Fullscreen
<header data-ecl-auto-init="SiteHeaderCore" class="ecl-site-header-core">
  <div class="ecl-site-header-core__container ecl-container">
    <div class="ecl-site-header-core__top"><a class="ecl-link ecl-link--standalone ecl-site-header-core__logo-link"
        href="/component-library/v2-test-link/example" aria-label="Home (European Commission)"><img
          alt="European Commission logo" title="Home (European Commission)" class="ecl-site-header-core__logo-image"
          src="/component-library/v2-test-link/dist/media/logo--en.5055ef4f.svg" /></a>
      <div class="ecl-site-header-core__action">
        <div class="ecl-site-header-core__login-container"><a
            class="ecl-link ecl-link--standalone ecl-site-header-core__login-toggle"
            href="/component-library/v2-test-link/example"><svg focusable="false" aria-hidden="true"
              class="ecl-site-header-core__icon ecl-icon ecl-icon--s">
              <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#general--log-in"></use>
            </svg>Log in</a></div><a class="ecl-link ecl-link--standalone ecl-site-header-core__language-selector"
          href="/component-library/v2-test-link/example" aria-label="English" data-ecl-language-selector="true"
          aria-controls="language-list-overlay"><span class="ecl-site-header-core__language-icon"><svg focusable="false"
              aria-hidden="true" class="ecl-site-header-core__icon ecl-icon ecl-icon--s">
              <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#general--language"></use>
            </svg><span class="ecl-site-header-core__language-code">en</span></span>English</a>
        <div class="ecl-site-header-core__search-container"><a
            class="ecl-link ecl-link--standalone ecl-site-header-core__search-toggle"
            href="/component-library/v2-test-link/example" data-ecl-search-toggle="true" aria-controls="search-form-id"
            aria-expanded="false"><svg focusable="false" aria-hidden="true" class="ecl-icon ecl-icon--s">
              <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#general--search"></use>
            </svg>Search</a>
          <form id="search-form-id" data-ecl-search-form="true" class="ecl-site-header-core__search ecl-search-form"
            role="search">
            <div class="ecl-form-group"><label class="ecl-search-form__label ecl-form-label"
                for="search-input-id">Search</label><input type="search" id="search-input-id"
                class="ecl-search-form__text-input ecl-text-input" /></div><button aria-label="Search" type="submit"
              class="ecl-search-form__button ecl-button ecl-button--search"><span class="ecl-button__container"><span
                  class="ecl-button__label" data-ecl-label="true">Search</span><svg focusable="false" aria-hidden="true"
                  data-ecl-icon="true" class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--xs">
                  <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#general--search"></use>
                </svg></span></button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div id="language-list-overlay" hidden="" class="ecl-language-list ecl-language-list--overlay"
    aria-labelledby="ecl-language-list__title" role="dialog" data-ecl-language-list-overlay="true">
    <div class="ecl-language-list__container ecl-container">
      <div class="ecl-row">
        <div class="ecl-language-list__close ecl-col-12 ecl-col-lg-8 ecl-offset-lg-2"><button
            data-ecl-language-list-close="true" type="submit"
            class="ecl-language-list__close-button ecl-button ecl-button--ghost"><span
              class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Close</span><svg
                focusable="false" aria-hidden="true" data-ecl-icon="true"
                class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--s">
                <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--close"></use>
              </svg></span></button></div>
        <div class="ecl-language-list__title ecl-col-12 ecl-col-lg-8 ecl-offset-lg-2" id="ecl-language-list__title">
          Select your language</div>
      </div>
      <div class="ecl-row ecl-language-list__eu">
        <div class="ecl-language-list__category ecl-col-12 ecl-col-lg-8 ecl-offset-lg-2">EU official languages</div>
        <div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4 ecl-offset-lg-2">
          <ul class="ecl-language-list__list">
            <li class="ecl-language-list__item "><a lang="bg" hrefLang="bg" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">български</a></li>
            <li class="ecl-language-list__item "><a lang="es" hrefLang="es" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">español</a></li>
            <li class="ecl-language-list__item "><a lang="cs" hrefLang="cs" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">čeština</a></li>
            <li class="ecl-language-list__item "><a lang="da" hrefLang="da" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">dansk</a></li>
            <li class="ecl-language-list__item "><a lang="de" hrefLang="de" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">Deutsch</a></li>
            <li class="ecl-language-list__item "><a lang="et" hrefLang="et" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">eesti</a></li>
            <li class="ecl-language-list__item "><a lang="el" hrefLang="el" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">ελληνικά</a></li>
            <li class="ecl-language-list__item ecl-language-list__item--is-active"><a lang="en" hrefLang="en"
                rel="alternate" href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
                  class="ecl-link__label">English</span>&nbsp;<svg focusable="false" aria-hidden="true"
                  class="ecl-link__icon ecl-icon ecl-icon--xs">
                  <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--check"></use>
                </svg></a></li>
            <li class="ecl-language-list__item "><a lang="fr" hrefLang="fr" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">français</a></li>
            <li class="ecl-language-list__item "><a lang="ga" hrefLang="ga" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">Gaeilge</a></li>
            <li class="ecl-language-list__item "><a lang="hr" hrefLang="hr" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">hrvatski</a></li>
            <li class="ecl-language-list__item "><a lang="it" hrefLang="it" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">italiano</a></li>
          </ul>
        </div>
        <div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4">
          <ul class="ecl-language-list__list">
            <li class="ecl-language-list__item "><a lang="lv" hrefLang="lv" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">latviešu</a></li>
            <li class="ecl-language-list__item "><a lang="lt" hrefLang="lt" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">lietuvių</a></li>
            <li class="ecl-language-list__item "><a lang="hu" hrefLang="hu" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">magyar</a></li>
            <li class="ecl-language-list__item "><a lang="mt" hrefLang="mt" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">Malti</a></li>
            <li class="ecl-language-list__item "><a lang="nl" hrefLang="nl" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">Nederlands</a></li>
            <li class="ecl-language-list__item "><a lang="pl" hrefLang="pl" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">polski</a></li>
            <li class="ecl-language-list__item "><a lang="pt" hrefLang="pt" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">português</a></li>
            <li class="ecl-language-list__item "><a lang="ro" hrefLang="ro" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">română</a></li>
            <li class="ecl-language-list__item "><a lang="sk" hrefLang="sk" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">slovenčina</a></li>
            <li class="ecl-language-list__item "><a lang="sl" hrefLang="sl" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">slovenščina</a></li>
            <li class="ecl-language-list__item "><a lang="fi" hrefLang="fi" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">suomi</a></li>
            <li class="ecl-language-list__item "><a lang="sv" hrefLang="sv" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">svenska</a></li>
          </ul>
        </div>
      </div>
      <div class="ecl-row ecl-language-list__non-eu">
        <div class="ecl-language-list__category ecl-col-12 ecl-col-lg-8 ecl-offset-lg-2">Non-EU languages</div>
        <div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4 ecl-offset-lg-2">
          <ul class="ecl-language-list__list">
            <li class="ecl-language-list__item "><a lang="zh" hrefLang="zh" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">中文</a></li>
            <li class="ecl-language-list__item "><a lang="tr" hrefLang="tr" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">Türk</a></li>
            <li class="ecl-language-list__item "><a lang="ru" hrefLang="ru" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">pусский</a></li>
          </ul>
        </div>
        <div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4">
          <ul class="ecl-language-list__list">
            <li class="ecl-language-list__item "><a lang="ca" hrefLang="ca" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">Català</a></li>
            <li class="ecl-language-list__item "><a lang="ar" hrefLang="ar" rel="alternate"
                href="/component-library/v2-test-link/example"
                class="ecl-language-list__link ecl-link ecl-link--standalone">عَرَبِيّ</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>
<div class="ecl-page-header-core">
  <div class="ecl-container">
    <nav data-ecl-auto-init="BreadcrumbCore" 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="/component-library/v2-test-link/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="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
          </svg></li>
        <li class="ecl-breadcrumb-core__segment" data-ecl-breadcrumb-core-item="static" aria-hidden="false"><a
            href="/component-library/v2-test-link/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="/component-library/v2-test-link/dist/media/icons.3cf410f9.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">A demo page</h1>
  </div>
</div>
<div class="ecl-container">
  <div class="ecl-row ecl-u-mt-l" data-ecl-inpage-navigation-container="true">
    <div class="ecl-col-lg-3">
      <nav data-ecl-auto-init="InpageNavigation" class="ecl-inpage-navigation" data-ecl-inpage-navigation="true">
        <div class="ecl-inpage-navigation__title">Page contents</div>
        <div class="ecl-inpage-navigation__body"><button type="button" class="ecl-inpage-navigation__trigger"
            id="ecl-inpage-navigation-trigger" data-ecl-inpage-navigation-trigger="true"
            aria-controls="ecl-inpage-navigation-list" aria-expanded="false"><span
              class="ecl-inpage-navigation__trigger-current"
              data-ecl-inpage-navigation-trigger-current="true">&nbsp;</span><svg focusable="false" aria-hidden="true"
              class="ecl-inpage-navigation__trigger-icon ecl-icon ecl-icon--s ecl-icon--rotate-180">
              <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--corner-arrow"></use>
            </svg></button>
          <ul class="ecl-inpage-navigation__list" aria-labelledby="ecl-inpage-navigation-trigger"
            data-ecl-inpage-navigation-list="true" id="ecl-inpage-navigation-list">
            <li class="ecl-inpage-navigation__item"><a data-ecl-inpage-navigation-link="true" href="#inline-nav-1"
                class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Heading 1</a></li>
            <li class="ecl-inpage-navigation__item"><a data-ecl-inpage-navigation-link="true" href="#inline-nav-2"
                class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Heading 2 with a long title going on
                several lines</a></li>
            <li class="ecl-inpage-navigation__item"><a data-ecl-inpage-navigation-link="true" href="#inline-nav-3"
                class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Heading 3</a></li>
            <li class="ecl-inpage-navigation__item"><a data-ecl-inpage-navigation-link="true" href="#inline-nav-4"
                class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Heading 4</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="ecl-col-lg-9">
      <h2 class="ecl-u-type-heading-2" id="inline-nav-1">Heading 1</h2>
      <p class="ecl-u-type-paragraph-m">Irure fugiat consectetur et esse occaecat laborum eiusmod ad aliqua officia
        cillum cillum dolor consectetur. In nostrud officia cillum reprehenderit elit sit ex dolore dolore laboris
        officia ullamco Lorem. Non minim deserunt exercitation sunt sit cillum pariatur aute sunt voluptate ipsum
        aliquip eu. Labore aute qui est qui cillum quis id ut nulla in duis. Sint ut quis id nostrud Lorem enim nisi
        mollit irure. Cupidatat laboris laborum aliquip reprehenderit pariatur sit elit amet officia culpa pariatur
        excepteur amet minim. Duis est cillum magna eiusmod pariatur anim aute Lorem voluptate. Ea elit nulla excepteur
        voluptate sunt pariatur voluptate pariatur. Nostrud sint culpa consectetur aliqua ex id. Quis est culpa labore
        officia ea commodo elit esse veniam do fugiat. In incididunt reprehenderit ex esse voluptate eiusmod do
        voluptate fugiat qui eu. Excepteur non incididunt Lorem non ex fugiat do pariatur fugiat nisi. Lorem enim
        eiusmod dolor nulla elit adipisicing amet reprehenderit et sunt in irure. Elit enim aliquip incididunt officia
        Lorem commodo ut dolore consequat esse anim. Lorem commodo ullamco occaecat anim. Cupidatat consequat qui nisi
        labore non duis qui laborum proident laborum laborum eiusmod. Consequat incididunt ut mollit est quis aute sit
        et veniam labore anim nisi. Culpa tempor in pariatur nostrud duis reprehenderit sit excepteur deserunt officia.
        Ad labore reprehenderit laborum officia duis anim pariatur. Exercitation consectetur exercitation nisi amet ex
        eu minim consectetur irure dolore ullamco. In id aute ipsum minim in. Excepteur non non aliqua reprehenderit
        incididunt non cillum ea sint exercitation. Dolore proident ad Lorem sit ex excepteur consequat laboris ea
        cillum. Consequat sint commodo cupidatat velit nulla et. Reprehenderit eu amet laboris ex esse sunt.</p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-2">Heading 2 with a long title going on several lines</h2>
      <p class="ecl-u-type-paragraph-m">Irure fugiat consectetur et esse occaecat laborum eiusmod ad aliqua officia
        cillum cillum dolor consectetur. In nostrud officia cillum reprehenderit elit sit ex dolore dolore laboris
        officia ullamco Lorem. Non minim deserunt exercitation sunt sit cillum pariatur aute sunt voluptate ipsum
        aliquip eu. Labore aute qui est qui cillum quis id ut nulla in duis. Sint ut quis id nostrud Lorem enim nisi
        mollit irure. Cupidatat laboris laborum aliquip reprehenderit pariatur sit elit amet officia culpa pariatur
        excepteur amet minim. Duis est cillum magna eiusmod pariatur anim aute Lorem voluptate. Ea elit nulla excepteur
        voluptate sunt pariatur voluptate pariatur. Nostrud sint culpa consectetur aliqua ex id. Quis est culpa labore
        officia ea commodo elit esse veniam do fugiat. In incididunt reprehenderit ex esse voluptate eiusmod do
        voluptate fugiat qui eu. Excepteur non incididunt Lorem non ex fugiat do pariatur fugiat nisi. Lorem enim
        eiusmod dolor nulla elit adipisicing amet reprehenderit et sunt in irure. Elit enim aliquip incididunt officia
        Lorem commodo ut dolore consequat esse anim. Lorem commodo ullamco occaecat anim. Cupidatat consequat qui nisi
        labore non duis qui laborum proident laborum laborum eiusmod. Consequat incididunt ut mollit est quis aute sit
        et veniam labore anim nisi. Culpa tempor in pariatur nostrud duis reprehenderit sit excepteur deserunt officia.
        Ad labore reprehenderit laborum officia duis anim pariatur. Exercitation consectetur exercitation nisi amet ex
        eu minim consectetur irure dolore ullamco. In id aute ipsum minim in. Excepteur non non aliqua reprehenderit
        incididunt non cillum ea sint exercitation. Dolore proident ad Lorem sit ex excepteur consequat laboris ea
        cillum. Consequat sint commodo cupidatat velit nulla et. Reprehenderit eu amet laboris ex esse sunt.</p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-3">Heading 3</h2>
      <p class="ecl-u-type-paragraph-m">Irure fugiat consectetur et esse occaecat laborum eiusmod ad aliqua officia
        cillum cillum dolor consectetur. In nostrud officia cillum reprehenderit elit sit ex dolore dolore laboris
        officia ullamco Lorem. Non minim deserunt exercitation sunt sit cillum pariatur aute sunt voluptate ipsum
        aliquip eu. Labore aute qui est qui cillum quis id ut nulla in duis. Sint ut quis id nostrud Lorem enim nisi
        mollit irure. Cupidatat laboris laborum aliquip reprehenderit pariatur sit elit amet officia culpa pariatur
        excepteur amet minim. Duis est cillum magna eiusmod pariatur anim aute Lorem voluptate. Ea elit nulla excepteur
        voluptate sunt pariatur voluptate pariatur. Nostrud sint culpa consectetur aliqua ex id. Quis est culpa labore
        officia ea commodo elit esse veniam do fugiat. In incididunt reprehenderit ex esse voluptate eiusmod do
        voluptate fugiat qui eu. Excepteur non incididunt Lorem non ex fugiat do pariatur fugiat nisi. Lorem enim
        eiusmod dolor nulla elit adipisicing amet reprehenderit et sunt in irure. Elit enim aliquip incididunt officia
        Lorem commodo ut dolore consequat esse anim. Lorem commodo ullamco occaecat anim. Cupidatat consequat qui nisi
        labore non duis qui laborum proident laborum laborum eiusmod. Consequat incididunt ut mollit est quis aute sit
        et veniam labore anim nisi. Culpa tempor in pariatur nostrud duis reprehenderit sit excepteur deserunt officia.
        Ad labore reprehenderit laborum officia duis anim pariatur. Exercitation consectetur exercitation nisi amet ex
        eu minim consectetur irure dolore ullamco. In id aute ipsum minim in. Excepteur non non aliqua reprehenderit
        incididunt non cillum ea sint exercitation. Dolore proident ad Lorem sit ex excepteur consequat laboris ea
        cillum. Consequat sint commodo cupidatat velit nulla et. Reprehenderit eu amet laboris ex esse sunt.</p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-4">Heading 4</h2>
      <p class="ecl-u-type-paragraph-m">Irure fugiat consectetur et esse occaecat laborum eiusmod ad aliqua officia
        cillum cillum dolor consectetur. In nostrud officia cillum reprehenderit elit sit ex dolore dolore laboris
        officia ullamco Lorem. Non minim deserunt exercitation sunt sit cillum pariatur aute sunt voluptate ipsum
        aliquip eu. Labore aute qui est qui cillum quis id ut nulla in duis. Sint ut quis id nostrud Lorem enim nisi
        mollit irure. Cupidatat laboris laborum aliquip reprehenderit pariatur sit elit amet officia culpa pariatur
        excepteur amet minim. Duis est cillum magna eiusmod pariatur anim aute Lorem voluptate. Ea elit nulla excepteur
        voluptate sunt pariatur voluptate pariatur. Nostrud sint culpa consectetur aliqua ex id. Quis est culpa labore
        officia ea commodo elit esse veniam do fugiat. In incididunt reprehenderit ex esse voluptate eiusmod do
        voluptate fugiat qui eu. Excepteur non incididunt Lorem non ex fugiat do pariatur fugiat nisi. Lorem enim
        eiusmod dolor nulla elit adipisicing amet reprehenderit et sunt in irure. Elit enim aliquip incididunt officia
        Lorem commodo ut dolore consequat esse anim. Lorem commodo ullamco occaecat anim. Cupidatat consequat qui nisi
        labore non duis qui laborum proident laborum laborum eiusmod. Consequat incididunt ut mollit est quis aute sit
        et veniam labore anim nisi. Culpa tempor in pariatur nostrud duis reprehenderit sit excepteur deserunt officia.
        Ad labore reprehenderit laborum officia duis anim pariatur. Exercitation consectetur exercitation nisi amet ex
        eu minim consectetur irure dolore ullamco. In id aute ipsum minim in. Excepteur non non aliqua reprehenderit
        incididunt non cillum ea sint exercitation. Dolore proident ad Lorem sit ex excepteur consequat laboris ea
        cillum. Consequat sint commodo cupidatat velit nulla et. Reprehenderit eu amet laboris ex esse sunt.</p>
    </div>
  </div>
</div>
<footer class="ecl-footer-core">
  <div class="ecl-container ecl-footer-core__container">
    <section class="ecl-footer-core__section ecl-footer-core__section1"><a
        href="/component-library/v2-test-link/example"
        class="ecl-footer-core__title ecl-link ecl-link--standalone">European Commission website</a>
      <div class="ecl-footer-core__description">This site is managed by the Directorate-General for Communication</div>
    </section>
    <section class="ecl-footer-core__section ecl-footer-core__section2 ecl-footer-core__section--separator">
      <div class="ecl-footer-core__content">More information on:</div>
      <ul class="ecl-footer-core__list ecl-footer-core__list--columns">
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone" aria-label="Link to Strategy">Strategy</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone"
            aria-label="Link About the European Commission">About the European Commission</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone"
            aria-label="Link to Business, Economy, Euro">Business, Economy, Euro</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone" aria-label="Link work, travel in the EU">Live,
            work, travel in the EU</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone" aria-label="Link to Law">Law</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone" aria-label="Link to Funding, Tenders">Funding,
            Tenders</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone"
            aria-label="Link to Research and innovation">Research and innovation</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone"
            aria-label="Link to Climate change, Environment">Energy, Climate change, Environment</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone" aria-label="Link to Education">Education</a>
        </li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone"
            aria-label="Link to Aid, Development cooperation, Fundamental rights">Aid, Development cooperation,
            Fundamental rights</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone"
            aria-label="Link to Food, Farming, Fisheries">Food, Farming, Fisheries</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone"
            aria-label="Link to EU regionaland urban development">EU regional and urban development</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone"
            aria-label="Link to Jobs at the European Commission">Jobs at the European Commission</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone" aria-label="Link to Statistics">Statistics</a>
        </li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone" aria-label="Link to News">News</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone" aria-label="Link to Events">Events</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone"
            aria-label="Link to Publications">Publications</a></li>
      </ul>
    </section>
    <section class="ecl-footer-core__section ecl-footer-core__section3">
      <ul class="ecl-footer-core__list">
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone"
            aria-label="Link to Contact the European Commission">Contact the European Commission</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"
            aria-label="Link to Follow the European Commission on social media"><span class="ecl-link__label">Follow the
              European Commission on social media</span>&nbsp;<svg focusable="false" aria-hidden="true"
              class="ecl-link__icon ecl-icon ecl-icon--xs">
              <use xlink:href="/component-library/v2-test-link/dist/media/icons.3cf410f9.svg#ui--external"></use>
            </svg></a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone"
            aria-label="Link to Resources for partners">Resources for partners</a></li>
      </ul>
    </section>
    <section class="ecl-footer-core__section ecl-footer-core__section4">
      <ul class="ecl-footer-core__list">
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone" aria-label="Link to Language policy">Language
            policy</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone" aria-label="Link to Cookies">Cookies</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone" aria-label="Link to Privacy policy">Privacy
            policy</a></li>
        <li class="ecl-footer-core__list-item"><a href="/component-library/v2-test-link/example"
            class="ecl-footer-core__link ecl-link ecl-link--standalone" aria-label="Link to Legal notice">Legal
            notice</a></li>
      </ul>
    </section>
  </div>
</footer>
Try it yourself on the playground
Playground