Inpage navigation

<div class="ecl-container">
  <div class="ecl-row ecl-u-mt-l">
    <div class="ecl-col-l-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="/icons.svg#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-l-9">
      <h2 class="ecl-u-type-heading-2" id="inline-nav-1">Heading 1</h2>
      <p class="ecl-u-type-paragraph-m"> Consectetur proident anim do occaecat. Et incididunt tempor eu commodo
        consequat est sit sunt consequat minim consectetur id. Duis ex velit magna aliqua laboris. Proident enim nulla
        cillum amet velit eu enim do reprehenderit irure aute sit. Minim veniam velit adipisicing excepteur voluptate
        mollit commodo adipisicing in officia ipsum dolor. Quis pariatur nostrud nisi aliquip aute irure aliqua
        reprehenderit deserunt non Lorem aliqua culpa. Quis consequat veniam sint qui do mollit sit deserunt in nulla
        deserunt. Labore exercitation proident aute enim nostrud labore nulla ullamco anim. Esse non magna non dolor
        laboris cillum qui tempor. Dolor nisi cupidatat ea occaecat velit. Veniam aliquip dolor ex nisi anim sunt
        nostrud labore non. Est proident ut consectetur irure. Ut id incididunt dolore veniam deserunt proident minim id
        nulla consectetur Lorem. Elit ut fugiat commodo quis magna incididunt minim commodo. Dolor irure et eu nulla
        aute ea laborum in. Culpa ipsum occaecat aute consectetur elit commodo et consectetur anim aliqua aliqua
        consequat sit culpa. Mollit excepteur anim nulla mollit labore amet. Labore sit eiusmod laborum aliqua aliqua
        deserunt culpa laboris. Lorem non cupidatat veniam veniam et incididunt. Laborum deserunt occaecat velit esse
        excepteur ea enim mollit et sunt nisi cupidatat enim. Anim dolore sint aliqua magna aliqua. Consequat deserunt
        nulla mollit cillum. Exercitation excepteur labore incididunt velit est irure est in ipsum. Magna reprehenderit
        non qui ut et do sit. Culpa et mollit ad deserunt dolor cupidatat in sint ex id eiusmod nostrud cupidatat. </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"> Consectetur proident anim do occaecat. Et incididunt tempor eu commodo
        consequat est sit sunt consequat minim consectetur id. Duis ex velit magna aliqua laboris. Proident enim nulla
        cillum amet velit eu enim do reprehenderit irure aute sit. Minim veniam velit adipisicing excepteur voluptate
        mollit commodo adipisicing in officia ipsum dolor. Quis pariatur nostrud nisi aliquip aute irure aliqua
        reprehenderit deserunt non Lorem aliqua culpa. Quis consequat veniam sint qui do mollit sit deserunt in nulla
        deserunt. Labore exercitation proident aute enim nostrud labore nulla ullamco anim. Esse non magna non dolor
        laboris cillum qui tempor. Dolor nisi cupidatat ea occaecat velit. Veniam aliquip dolor ex nisi anim sunt
        nostrud labore non. Est proident ut consectetur irure. Ut id incididunt dolore veniam deserunt proident minim id
        nulla consectetur Lorem. Elit ut fugiat commodo quis magna incididunt minim commodo. Dolor irure et eu nulla
        aute ea laborum in. Culpa ipsum occaecat aute consectetur elit commodo et consectetur anim aliqua aliqua
        consequat sit culpa. Mollit excepteur anim nulla mollit labore amet. Labore sit eiusmod laborum aliqua aliqua
        deserunt culpa laboris. Lorem non cupidatat veniam veniam et incididunt. Laborum deserunt occaecat velit esse
        excepteur ea enim mollit et sunt nisi cupidatat enim. Anim dolore sint aliqua magna aliqua. Consequat deserunt
        nulla mollit cillum. Exercitation excepteur labore incididunt velit est irure est in ipsum. Magna reprehenderit
        non qui ut et do sit. Culpa et mollit ad deserunt dolor cupidatat in sint ex id eiusmod nostrud cupidatat. </p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-3">Heading 3</h2>
      <p class="ecl-u-type-paragraph-m"> Consectetur proident anim do occaecat. Et incididunt tempor eu commodo
        consequat est sit sunt consequat minim consectetur id. Duis ex velit magna aliqua laboris. Proident enim nulla
        cillum amet velit eu enim do reprehenderit irure aute sit. Minim veniam velit adipisicing excepteur voluptate
        mollit commodo adipisicing in officia ipsum dolor. Quis pariatur nostrud nisi aliquip aute irure aliqua
        reprehenderit deserunt non Lorem aliqua culpa. Quis consequat veniam sint qui do mollit sit deserunt in nulla
        deserunt. Labore exercitation proident aute enim nostrud labore nulla ullamco anim. Esse non magna non dolor
        laboris cillum qui tempor. Dolor nisi cupidatat ea occaecat velit. Veniam aliquip dolor ex nisi anim sunt
        nostrud labore non. Est proident ut consectetur irure. Ut id incididunt dolore veniam deserunt proident minim id
        nulla consectetur Lorem. Elit ut fugiat commodo quis magna incididunt minim commodo. Dolor irure et eu nulla
        aute ea laborum in. Culpa ipsum occaecat aute consectetur elit commodo et consectetur anim aliqua aliqua
        consequat sit culpa. Mollit excepteur anim nulla mollit labore amet. Labore sit eiusmod laborum aliqua aliqua
        deserunt culpa laboris. Lorem non cupidatat veniam veniam et incididunt. Laborum deserunt occaecat velit esse
        excepteur ea enim mollit et sunt nisi cupidatat enim. Anim dolore sint aliqua magna aliqua. Consequat deserunt
        nulla mollit cillum. Exercitation excepteur labore incididunt velit est irure est in ipsum. Magna reprehenderit
        non qui ut et do sit. Culpa et mollit ad deserunt dolor cupidatat in sint ex id eiusmod nostrud cupidatat. </p>
      <h2 class="ecl-u-type-heading-2" id="inline-nav-4">Heading 4</h2>
      <p class="ecl-u-type-paragraph-m"> Consectetur proident anim do occaecat. Et incididunt tempor eu commodo
        consequat est sit sunt consequat minim consectetur id. Duis ex velit magna aliqua laboris. Proident enim nulla
        cillum amet velit eu enim do reprehenderit irure aute sit. Minim veniam velit adipisicing excepteur voluptate
        mollit commodo adipisicing in officia ipsum dolor. Quis pariatur nostrud nisi aliquip aute irure aliqua
        reprehenderit deserunt non Lorem aliqua culpa. Quis consequat veniam sint qui do mollit sit deserunt in nulla
        deserunt. Labore exercitation proident aute enim nostrud labore nulla ullamco anim. Esse non magna non dolor
        laboris cillum qui tempor. Dolor nisi cupidatat ea occaecat velit. Veniam aliquip dolor ex nisi anim sunt
        nostrud labore non. Est proident ut consectetur irure. Ut id incididunt dolore veniam deserunt proident minim id
        nulla consectetur Lorem. Elit ut fugiat commodo quis magna incididunt minim commodo. Dolor irure et eu nulla
        aute ea laborum in. Culpa ipsum occaecat aute consectetur elit commodo et consectetur anim aliqua aliqua
        consequat sit culpa. Mollit excepteur anim nulla mollit labore amet. Labore sit eiusmod laborum aliqua aliqua
        deserunt culpa laboris. Lorem non cupidatat veniam veniam et incididunt. Laborum deserunt occaecat velit esse
        excepteur ea enim mollit et sunt nisi cupidatat enim. Anim dolore sint aliqua magna aliqua. Consequat deserunt
        nulla mollit cillum. Exercitation excepteur labore incididunt velit est irure est in ipsum. Magna reprehenderit
        non qui ut et do sit. Culpa et mollit ad deserunt dolor cupidatat in sint ex id eiusmod nostrud cupidatat. </p>
    </div>
  </div>
</div>