<div class="ecl-u-pv-3xl ecl-u-pv-lg-4xl">
<div class="ecl-container">
<div class="ecl-row">
<div class="ecl-col-12 ecl-col-lg-3">
<aside class="ecl-u-height-100">
<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"> </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="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></button>
<ul class="ecl-inpage-navigation__list" hidden="" 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="#description"
class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Description</a></li>
<li class="ecl-inpage-navigation__item"><a data-ecl-inpage-navigation-link="true" href="#latest"
class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Latest</a></li>
<li class="ecl-inpage-navigation__item"><a data-ecl-inpage-navigation-link="true" href="#documents"
class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Documents</a></li>
<li class="ecl-inpage-navigation__item"><a data-ecl-inpage-navigation-link="true" href="#contact"
class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Contact</a></li>
<li class="ecl-inpage-navigation__item"><a data-ecl-inpage-navigation-link="true" href="#related"
class="ecl-inpage-navigation__link ecl-link ecl-link--standalone">Related</a></li>
</ul>
</div>
</nav>
</aside>
</div>
<div class="ecl-col-12 ecl-col-lg-9">
<main>
<h2 class="ecl-u-type-heading-2 ecl-u-mv-none" id="description">Description</h2>
<p class="ecl-u-type-paragraph ecl-u-mt-m ecl-u-mb-none">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Curabitur tempus enim sed massa vulputate, id finibus nulla eleifend. Sed placerat ligula ut augue
ultrices, non gravida odio mattis.</p>
<h2 class="ecl-u-type-heading-2 ecl-u-mt-xl ecl-u-mb-none" id="latest">Latest</h2>
<article class="ecl-u-border-bottom ecl-u-border-color-grey-15 ecl-u-pv-m ecl-u-mt-m">
<div class="ecl-u-type-s ecl-u-type-color-grey-75"><span class="ecl-u-type-uppercase">News article</span> |
<time dateTime="2019-10-17">17 October 2019</time></div>
<div class="ecl-u-type-prolonged-m ecl-u-type-bold ecl-u-mt-xs"><a href="/example"
class="ecl-link ecl-link--standalone">EU funded Ebola treatment</a></div>
<p class="ecl-u-type-paragraph ecl-u-type-color-grey-100 ecl-u-mt-xs ecl-u-mb-none">Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula
lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.</p>
</article>
<article class="ecl-u-border-bottom ecl-u-border-color-grey-15 ecl-u-pv-m">
<div class="ecl-u-type-s ecl-u-type-color-grey-75"><span class="ecl-u-type-uppercase">News article</span> |
<time dateTime="2019-10-17">17 October 2019</time></div>
<div class="ecl-u-type-prolonged-m ecl-u-type-bold ecl-u-mt-xs"><a href="/example"
class="ecl-link ecl-link--standalone">EU funded Ebola treatment</a></div>
<p class="ecl-u-type-paragraph ecl-u-type-color-grey-100 ecl-u-mt-xs ecl-u-mb-none">Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Phasellus ut ex tristique, dignissim sem ac, bibendum est. Sed vehicula
lorem non nunc tincidunt hendrerit. Nunc tristique ante et fringilla fermentum.</p>
</article>
<h2 class="ecl-u-type-heading-2 ecl-u-mt-xl ecl-u-mb-none" id="documents">Documents</h2>
<div class="ecl-u-mt-m ecl-file" data-ecl-file="true">
<div class="ecl-file__container"><svg focusable="false" aria-hidden="true"
class="ecl-file__icon ecl-icon ecl-icon--2xl">
<use xlink:href="/dist/media/icons.1dbe9812.svg#general--copy"></use>
</svg>
<div class="ecl-file__info">
<div class="ecl-file__title">Call for proposals - FISMA/2015/135/D</div>
<div class="ecl-file__language">English</div>
<div class="ecl-file__meta">(104.1 KB - PDF)</div>
</div><a download="" href="/example"
class="ecl-file__download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Download</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--fluid">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--download"></use>
</svg></a>
</div>
</div>
<div class="ecl-u-mt-m ecl-file" data-ecl-file="true">
<div class="ecl-file__container"><svg focusable="false" aria-hidden="true"
class="ecl-file__icon ecl-icon ecl-icon--2xl">
<use xlink:href="/dist/media/icons.1dbe9812.svg#general--copy"></use>
</svg>
<div class="ecl-file__info">
<div class="ecl-file__title">FISMA/2015/135/D - clarification</div>
<div class="ecl-file__language">English</div>
<div class="ecl-file__meta">(28.9 KB - PDF)</div>
</div><a download="" href="/example"
class="ecl-file__download ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Download</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--fluid">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--download"></use>
</svg></a>
</div>
</div>
<h2 class="ecl-u-type-heading-2 ecl-u-mt-xl ecl-u-mb-none" id="contact">Contact</h2>
<dl class="ecl-u-mt-m ecl-description-list ecl-description-list--horizontal">
<dt class="ecl-description-list__term">Name</dt>
<dd class="ecl-description-list__definition">Christian Windand</dd>
<dt class="ecl-description-list__term">Email</dt>
<dd class="ecl-description-list__definition">ecfin-pericles@ec.europa.eu</dd>
</dl>
<h2 class="ecl-u-type-heading-2 ecl-u-mt-xl ecl-u-mb-none" id="related">Related</h2>
<ul class="ecl-u-mt-m ecl-unordered-list ecl-unordered-list--no-bullet">
<li class="ecl-u-pv-m ecl-u-border-bottom ecl-u-border-color-grey-15 ecl-unordered-list__item"><a
href="/example" class="ecl-u-type-bold ecl-link ecl-link--standalone">Economy, finance and the euro</a>
</li>
<li class="ecl-u-pv-m ecl-u-border-bottom ecl-u-border-color-grey-15 ecl-unordered-list__item"><a
href="/example" class="ecl-u-type-bold ecl-link ecl-link--standalone">Economy, finance and the euro</a>
</li>
<li class="ecl-u-pv-m ecl-u-border-bottom ecl-u-border-color-grey-15 ecl-unordered-list__item"><a
href="/example" class="ecl-u-type-bold ecl-link ecl-link--standalone">Economy, finance and the euro</a>
</li>
</ul>
<div class="ecl-u-mt-xl ecl-u-mt-lg-4xl ecl-social-media-share">
<p class="ecl-social-media-share__description">Share this page</p>
<ul class="ecl-social-media-share__list">
<li class="ecl-social-media-share__item"><a href="/example"
class="ecl-social-media-share__link--twitter ecl-social-media-share__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before"><svg
focusable="false" aria-hidden="true"
class="ecl-social-media-share__icon ecl-link__icon ecl-icon ecl-icon--xl">
<use xlink:href="/dist/media/icons-social.ecbc3e33.svg#twitter"></use>
</svg><svg focusable="false" aria-hidden="true"
class="ecl-social-media-share__icon-hover ecl-social-media-share__icon ecl-link__icon ecl-icon ecl-icon--xl">
<use xlink:href="/dist/media/icons-social.ecbc3e33.svg#twitter_hover"></use>
</svg> <span class="ecl-link__label">Twitter</span></a></li>
<li class="ecl-social-media-share__item"><a href="/example"
class="ecl-social-media-share__link--facebook ecl-social-media-share__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before"><svg
focusable="false" aria-hidden="true"
class="ecl-social-media-share__icon ecl-link__icon ecl-icon ecl-icon--xl">
<use xlink:href="/dist/media/icons-social.ecbc3e33.svg#facebook"></use>
</svg><svg focusable="false" aria-hidden="true"
class="ecl-social-media-share__icon-hover ecl-social-media-share__icon ecl-link__icon ecl-icon ecl-icon--xl">
<use xlink:href="/dist/media/icons-social.ecbc3e33.svg#facebook_hover"></use>
</svg> <span class="ecl-link__label">Facebook</span></a></li>
<li class="ecl-social-media-share__item"><a href="/example"
class="ecl-social-media-share__link--linkedin ecl-social-media-share__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before"><svg
focusable="false" aria-hidden="true"
class="ecl-social-media-share__icon ecl-link__icon ecl-icon ecl-icon--xl">
<use xlink:href="/dist/media/icons-social.ecbc3e33.svg#linkedin"></use>
</svg><svg focusable="false" aria-hidden="true"
class="ecl-social-media-share__icon-hover ecl-social-media-share__icon ecl-link__icon ecl-icon ecl-icon--xl">
<use xlink:href="/dist/media/icons-social.ecbc3e33.svg#linkedin_hover"></use>
</svg> <span class="ecl-link__label">Linkedin</span></a></li>
<li class="ecl-social-media-share__item"><a href="/example"
class="ecl-social-media-share__link--email ecl-social-media-share__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before"><svg
focusable="false" aria-hidden="true"
class="ecl-social-media-share__icon ecl-link__icon ecl-icon ecl-icon--xl">
<use xlink:href="/dist/media/icons-social.ecbc3e33.svg#email"></use>
</svg><svg focusable="false" aria-hidden="true"
class="ecl-social-media-share__icon-hover ecl-social-media-share__icon ecl-link__icon ecl-icon ecl-icon--xl">
<use xlink:href="/dist/media/icons-social.ecbc3e33.svg#email_hover"></use>
</svg> <span class="ecl-link__label">E-mail</span></a></li>
<li class="ecl-social-media-share__item"><a href="/example"
class="ecl-social-media-share__link ecl-link ecl-link--standalone">Other social networks</a></li>
</ul>
</div>
</main>
</div>
</div>
</div>
</div>Try it yourself on the playground
Playground