Image banners
Text box image banner
<section class="ecl-hero-banner ecl-hero-banner--image ecl-hero-banner--centered">
<div class="ecl-hero-banner__image"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-container">
<div class="ecl-hero-banner__container">
<div class="ecl-hero-banner__content">
<div class="ecl-hero-banner__title">EU Budget for the future</div>
<p class="ecl-hero-banner__description">Innovation, economy, environment and geopolitics</p><a href="/example"
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-hero-banner__link-cta"><span
class="ecl-link__label">Subscribe</span><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></a>
</div>
</div>
</div>
</section>
Try it yourself on the playground
PlaygroundShaded image banner
<section class="ecl-hero-banner ecl-hero-banner--image-shade ecl-hero-banner--centered">
<div class="ecl-hero-banner__image"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-container">
<div class="ecl-hero-banner__container">
<div class="ecl-hero-banner__content">
<div class="ecl-hero-banner__title">EU Budget for the future</div>
<p class="ecl-hero-banner__description">Innovation, economy, environment and geopolitics</p><a href="/example"
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-hero-banner__link-cta"><span
class="ecl-link__label">Subscribe</span><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></a>
</div>
</div>
</div>
</section>
Try it yourself on the playground
PlaygroundGradient image banner
<section class="ecl-hero-banner ecl-hero-banner--image-gradient ecl-hero-banner--centered">
<div class="ecl-hero-banner__image"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-container">
<div class="ecl-hero-banner__container">
<div class="ecl-hero-banner__content">
<div class="ecl-hero-banner__title">EU Budget for the future</div>
<p class="ecl-hero-banner__description">Innovation, economy, environment and geopolitics</p><a href="/example"
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-hero-banner__link-cta"><span
class="ecl-link__label">Subscribe</span><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></a>
</div>
</div>
</div>
</section>
Try it yourself on the playground
PlaygroundSimple banners
<section class="ecl-hero-banner ecl-hero-banner--primary ecl-hero-banner--centered">
<div class="ecl-container">
<div class="ecl-hero-banner__container">
<div class="ecl-hero-banner__content">
<div class="ecl-hero-banner__title">EU Budget for the future</div>
<p class="ecl-hero-banner__description">Innovation, economy, environment and geopolitics</p><a href="/example"
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after ecl-hero-banner__link-cta"><span
class="ecl-link__label">Subscribe</span><svg
class="ecl-icon ecl-icon--xs ecl-icon--rotate-90 ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#corner-arrow"></use>
</svg></a>
</div>
</div>
</div>
</section>
Try it yourself on the playground
PlaygroundSimple banners colour
Simple banners can be displayed with several background colours by using one css class or another. Here are the possibilities
variant | colour | css class |
---|---|---|
primary | blue | .ecl-hero-banner--primary |
secondary | light grey | .ecl-hero-banner--secondary |
white | white | .ecl-hero-banner--white |
Other variants
Note: Variants below can be applied to all kind of banners.
Check usage guidelines for more information.
Left aligned content
Removing class .ecl-hero-banner--center
will put the text back on left in the banner.
Banner width
Banners placed inside a grid container (.ecl-container
) will expand to this container width.
To have a full width banner, the recommanded way is to place it outside of the grid container.
However, if there is a need to have a full width banner inside the grid container, the css class .ecl-hero-banner--fullwidth
can be used (just put it at the same level as .ecl-hero-banner
).
Caution: if you plan to use full width banner using this fullwidth css class, we recommend to use the "website" preset, as some global rules here would improve the display (overflow-x: hidden
).