Image banner
<section class="ecl-page-banner ecl-page-banner--image ecl-page-banner--centered">
<div class="ecl-page-banner__image"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-container ecl-page-banner__container">
<div class="ecl-page-banner__content">
<h1 class="ecl-page-banner__title">EU Budget for the future</h1>
<p class="ecl-page-banner__baseline">Innovation, economy, environment and geopolitics</p><a href="/example"
class="ecl-page-banner__link-cta ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Subscribe</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></a>
</div>
</div>
</section>
Try it yourself on the playground
PlaygroundShade image banner
<section class="ecl-page-banner ecl-page-banner--image-shade ecl-page-banner--centered">
<div class="ecl-page-banner__image"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-container ecl-page-banner__container">
<div class="ecl-page-banner__content">
<h1 class="ecl-page-banner__title">EU Budget for the future</h1>
<p class="ecl-page-banner__baseline">Innovation, economy, environment and geopolitics</p><a href="/example"
class="ecl-page-banner__link-cta ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Subscribe</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></a>
</div>
</div>
</section>
Try it yourself on the playground
PlaygroundPrimary banner
<section class="ecl-page-banner ecl-page-banner--primary ecl-page-banner--centered">
<div class="ecl-container ecl-page-banner__container">
<div class="ecl-page-banner__content">
<h1 class="ecl-page-banner__title">EU Budget for the future</h1>
<p class="ecl-page-banner__baseline">Innovation, economy, environment and geopolitics</p><a href="/example"
class="ecl-page-banner__link-cta ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Subscribe</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></a>
</div>
</div>
</section>
Try it yourself on the playground
PlaygroundDefault banner
<section class="ecl-page-banner ecl-page-banner--default ecl-page-banner--centered">
<div class="ecl-container ecl-page-banner__container">
<div class="ecl-page-banner__content">
<h1 class="ecl-page-banner__title">EU Budget for the future</h1>
<p class="ecl-page-banner__baseline">Innovation, economy, environment and geopolitics</p><a href="/example"
class="ecl-page-banner__link-cta ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Subscribe</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></a>
</div>
</div>
</section>
Try it yourself on the playground
PlaygroundAlign left
<section class="ecl-page-banner ecl-page-banner--default">
<div class="ecl-container ecl-page-banner__container">
<div class="ecl-page-banner__content">
<h1 class="ecl-page-banner__title">EU Budget for the future</h1>
<p class="ecl-page-banner__baseline">Innovation, economy, environment and geopolitics</p><a href="/example"
class="ecl-page-banner__link-cta ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Subscribe</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.1dbe9812.svg#ui--corner-arrow"></use>
</svg></a>
</div>
</div>
</section>
Try it yourself on the playground
Playground