Hero banner - Banners

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-hero-banner__credit">© Copyright or credit</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"><span class="ecl-hero-banner__description-text">Innovation, economy,
            environment and geopolitics</span></p>
        <div class="ecl-hero-banner__cta"><a href="/component-library/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="/component-library/dist/media/icons.75c96284.svg#corner-arrow"></use>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Try it yourself on the playground

Playground

Shaded image banner

Fullscreen

<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-hero-banner__credit">© Copyright or credit</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"><span class="ecl-hero-banner__description-text">Innovation, economy,
            environment and geopolitics</span></p>
        <div class="ecl-hero-banner__cta"><a href="/component-library/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="/component-library/dist/media/icons.75c96284.svg#corner-arrow"></use>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Try it yourself on the playground

Playground

Gradient image banner

Fullscreen

<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-hero-banner__credit">© Copyright or credit</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"><span class="ecl-hero-banner__description-text">Innovation, economy,
            environment and geopolitics</span></p>
        <div class="ecl-hero-banner__cta"><a href="/component-library/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="/component-library/dist/media/icons.75c96284.svg#corner-arrow"></use>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Try it yourself on the playground

Playground

Simple banners

Fullscreen

<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"><span class="ecl-hero-banner__description-text">Innovation, economy,
            environment and geopolitics</span></p>
        <div class="ecl-hero-banner__cta"><a href="/component-library/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="/component-library/dist/media/icons.75c96284.svg#corner-arrow"></use>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Try it yourself on the playground

Playground

Simple 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).