Core page header
<div class="ecl-page-header ecl-page-header--image">
<div class="ecl-page-header__background"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
aria-hidden="true"></div>
<div class="ecl-container">
<nav class="ecl-breadcrumb ecl-page-header__breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true"
data-ecl-auto-init="Breadcrumb">
<ol class="ecl-breadcrumb__container">
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Home</a><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis=""><button
class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
data-ecl-breadcrumb-ellipsis-button="" aria-label="Click to expand">…</button><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">About the European
Union</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Organisational
structure</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">How the Union is
organised</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
aria-current="page">News</li>
</ol>
</nav>
<div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
class="ecl-page-header__meta-item">DD Month YYYY</span></div>
<div class="ecl-page-header__title-container">
<h1 class="ecl-page-header__title">Page title</h1>
</div>
<div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
<p class="ecl-page-header__description">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing
elit</a>. Quisque nec ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, <a
class="ecl-link" href="/example">eget dictum elit</a>. Vestibulum gravida tincidunt venenatis.</p>
</div>
</div>
</div>Try it yourself on the playground
PlaygroundCore page header with thumbnail
<div class="ecl-page-header ecl-page-header--image">
<div class="ecl-page-header__background"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
aria-hidden="true"></div>
<div class="ecl-container">
<nav class="ecl-breadcrumb ecl-page-header__breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true"
data-ecl-auto-init="Breadcrumb">
<ol class="ecl-breadcrumb__container">
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Home</a><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis=""><button
class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
data-ecl-breadcrumb-ellipsis-button="" aria-label="Click to expand">…</button><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">About the European
Union</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Organisational
structure</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">How the Union is
organised</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
aria-current="page">News</li>
</ol>
</nav>
<div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
class="ecl-page-header__meta-item">DD Month YYYY</span></div>
<div class="ecl-page-header__title-container">
<h1 class="ecl-page-header__title">Page title</h1>
</div>
<div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
<p class="ecl-page-header__description">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing
elit</a>. Quisque nec ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, <a
class="ecl-link" href="/example">eget dictum elit</a>. Vestibulum gravida tincidunt venenatis.</p>
</div>
</div>
</div>Try it yourself on the playground
PlaygroundCore page header with background image
Overlay can be configured (dark, light or none)
<div class="ecl-page-header ecl-page-header--image">
<div class="ecl-page-header__background"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
aria-hidden="true"></div>
<div class="ecl-container">
<nav class="ecl-breadcrumb ecl-page-header__breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true"
data-ecl-auto-init="Breadcrumb">
<ol class="ecl-breadcrumb__container">
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Home</a><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis=""><button
class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
data-ecl-breadcrumb-ellipsis-button="" aria-label="Click to expand">…</button><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">About the European
Union</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Organisational
structure</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">How the Union is
organised</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
aria-current="page">News</li>
</ol>
</nav>
<div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
class="ecl-page-header__meta-item">DD Month YYYY</span></div>
<div class="ecl-page-header__title-container">
<h1 class="ecl-page-header__title">Page title</h1>
</div>
<div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
<p class="ecl-page-header__description">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing
elit</a>. Quisque nec ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, <a
class="ecl-link" href="/example">eget dictum elit</a>. Vestibulum gravida tincidunt venenatis.</p>
</div>
</div>
</div>Try it yourself on the playground
PlaygroundHarmonised page header
<div class="ecl-page-header ecl-page-header--image">
<div class="ecl-page-header__background"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
aria-hidden="true"></div>
<div class="ecl-container">
<nav class="ecl-breadcrumb ecl-page-header__breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true"
data-ecl-auto-init="Breadcrumb">
<ol class="ecl-breadcrumb__container">
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Home</a><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis=""><button
class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
data-ecl-breadcrumb-ellipsis-button="" aria-label="Click to expand">…</button><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">About the European
Union</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Organisational
structure</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">How the Union is
organised</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
aria-current="page">News</li>
</ol>
</nav>
<div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
class="ecl-page-header__meta-item">DD Month YYYY</span></div>
<div class="ecl-page-header__title-container">
<h1 class="ecl-page-header__title">Page title</h1>
</div>
<div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
<p class="ecl-page-header__description">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing
elit</a>. Quisque nec ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, <a
class="ecl-link" href="/example">eget dictum elit</a>. Vestibulum gravida tincidunt venenatis.</p>
</div>
</div>
</div>Try it yourself on the playground
PlaygroundHarmonised page header with thumbnail
<div class="ecl-page-header ecl-page-header--image">
<div class="ecl-page-header__background"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
aria-hidden="true"></div>
<div class="ecl-container">
<nav class="ecl-breadcrumb ecl-page-header__breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true"
data-ecl-auto-init="Breadcrumb">
<ol class="ecl-breadcrumb__container">
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Home</a><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis=""><button
class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
data-ecl-breadcrumb-ellipsis-button="" aria-label="Click to expand">…</button><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">About the European
Union</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Organisational
structure</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">How the Union is
organised</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
aria-current="page">News</li>
</ol>
</nav>
<div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
class="ecl-page-header__meta-item">DD Month YYYY</span></div>
<div class="ecl-page-header__title-container">
<h1 class="ecl-page-header__title">Page title</h1>
</div>
<div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
<p class="ecl-page-header__description">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing
elit</a>. Quisque nec ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, <a
class="ecl-link" href="/example">eget dictum elit</a>. Vestibulum gravida tincidunt venenatis.</p>
</div>
</div>
</div>Try it yourself on the playground
PlaygroundHarmonised page header with background image
Overlay can be configured (dark, light or none)
<div class="ecl-page-header ecl-page-header--image">
<div class="ecl-page-header__background"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg)"
aria-hidden="true"></div>
<div class="ecl-container">
<nav class="ecl-breadcrumb ecl-page-header__breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true"
data-ecl-auto-init="Breadcrumb">
<ol class="ecl-breadcrumb__container">
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Home</a><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--ellipsis" data-ecl-breadcrumb-ellipsis=""><button
class="ecl-button ecl-button--ghost ecl-breadcrumb__ellipsis" type="button"
data-ecl-breadcrumb-ellipsis-button="" aria-label="Click to expand">…</button><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false" aria-hidden="true"
role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">About the European
Union</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="expandable"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">Organisational
structure</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--no-visited ecl-breadcrumb__link">How the Union is
organised</a><svg class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-breadcrumb__icon" focusable="false"
aria-hidden="true" role="presentation">
<use xlink:href="/dist/media/icons.96a6ea95.svg#corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" data-ecl-breadcrumb-item="static"
aria-current="page">News</li>
</ol>
</nav>
<div class="ecl-page-header__meta"><span class="ecl-page-header__meta-item">Meta info</span><span
class="ecl-page-header__meta-item">DD Month YYYY</span></div>
<div class="ecl-page-header__title-container">
<h1 class="ecl-page-header__title">Page title</h1>
</div>
<div class="ecl-page-header__description-container"><img class="ecl-page-header__description-thumbnail"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Europe map" />
<p class="ecl-page-header__description">Lorem ipsum dolor sit amet, <a href="/example">consectetur adipiscing
elit</a>. Quisque nec ullamcorper mi. Morbi interdum fermentum tempus. Nam nec rhoncus risus, <a
class="ecl-link" href="/example">eget dictum elit</a>. Vestibulum gravida tincidunt venenatis.</p>
</div>
</div>
</div>Try it yourself on the playground
Playground