<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>
Try it yourself on the playground
Playground