Banner - Components

Image banners

Text box banner

<section class="ecl-banner ecl-banner--text-box ecl-banner--m ecl-banner--full-width" data-ecl-banner
  data-ecl-auto-init="Banner">
  <figure class="ecl-banner__picture-container">
    <picture class="ecl-picture ecl-banner__picture" data-ecl-banner-image><img class="ecl-banner__image"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg" alt="alternative text" /></picture>
    <footer class="ecl-banner__credit"><small>© Copyright</small></footer>
  </figure>
  <div class="ecl-container">
    <div class="ecl-banner__container" data-ecl-banner-container>
      <div class="ecl-banner__content">
        <div class="ecl-banner__title"><span class="ecl-banner__title-text">Lorem ipsum dolor sit amet consectetuer
            adipiscing.</span></div>
        <p class="ecl-banner__description"><span class="ecl-banner__description-text">Lorem ipsum dolor sit amet,
            consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
            et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequate massa quis enim donec.</span></p>
        <div class="ecl-banner__cta"><a href="/example"
            class="ecl-link ecl-link--cta ecl-link--icon ecl-banner__link-cta"><span class="ecl-link__label">CTA
              link</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.b6764719.svg#corner-arrow"></use>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Try it yourself on the playground

Playground

Text overlay banner

Fullscreen

<section class="ecl-banner ecl-banner--text-overlay ecl-banner--m ecl-banner--full-width" data-ecl-banner
  data-ecl-auto-init="Banner">
  <figure class="ecl-banner__picture-container">
    <picture class="ecl-picture ecl-banner__picture" data-ecl-banner-image><img class="ecl-banner__image"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg" alt="aternative text" /></picture>
    <footer class="ecl-banner__credit"><small>© Copyright</small></footer>
  </figure>
  <div class="ecl-container">
    <div class="ecl-banner__container" data-ecl-banner-container>
      <div class="ecl-banner__content">
        <div class="ecl-banner__title"><span class="ecl-banner__title-text">Lorem ipsum dolor sit amet consectetuer
            adipiscing.</span></div>
        <p class="ecl-banner__description"><span class="ecl-banner__description-text">Lorem ipsum dolor sit amet,
            consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
            et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequate massa quis enim donec.</span></p>
        <div class="ecl-banner__cta"><a href="/example"
            class="ecl-link ecl-link--cta ecl-link--icon ecl-banner__link-cta"><span class="ecl-link__label">CTA
              link</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.b6764719.svg#corner-arrow"></use>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Try it yourself on the playground

Playground

Plain background banner

Fullscreen

<section class="ecl-banner ecl-banner--plain-background ecl-banner--m ecl-banner--full-width" data-ecl-banner
  data-ecl-auto-init="Banner">
  <div class="ecl-container">
    <div class="ecl-banner__container" data-ecl-banner-container>
      <div class="ecl-banner__content">
        <div class="ecl-banner__title"><span class="ecl-banner__title-text">Lorem ipsum dolor sit amet consectetuer
            adipiscing.</span></div>
        <p class="ecl-banner__description"><span class="ecl-banner__description-text">Lorem ipsum dolor sit amet,
            consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
            et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequate massa quis enim donec.</span></p>
        <div class="ecl-banner__cta"><a href="/example"
            class="ecl-link ecl-link--cta ecl-link--icon ecl-banner__link-cta"><span class="ecl-link__label">CTA
              link</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.b6764719.svg#corner-arrow"></use>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Try it yourself on the playground

Playground

Other variants

Note: Variants below can be applied to all kind of banners.
Check usage guidelines for more information.

Centered content

Adding class .ecl-banner--center will center the text on 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-banner--fullwidth can be used (just put it at the same level as .ecl-page-banner).

Caution: if you plan to use full width banner using this fullwidth css class, we recommend to include the optional ecl-reset.css, as some global rules here would improve the display (overflow-x: hidden).