Banner - Components

Image banner

<section
  class="ecl-banner ecl-banner--m ecl-banner--font-m ecl-banner--box-bg-light ecl-banner--color-dark ecl-banner--h-left ecl-banner--v-center"
  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"><a href="/component-library/example"
              class="ecl-link  ecl-banner__title-link">Lorem ipsum dolor sit amet consectetuer adipiscin</a></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.</span></p>
        <div class="ecl-banner__cta"><a href="/component-library/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="/component-library/dist/media/icons.a3ed8a97.svg#corner-arrow"></use>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Try it yourself on the playground

Playground

Video banner

Fullscreen

<section
  class="ecl-banner ecl-banner--m ecl-banner--font-m ecl-banner--box-bg-light ecl-banner--color-dark ecl-banner--h-left ecl-banner--v-center"
  data-ecl-banner data-ecl-auto-init="Banner">
  <div class="ecl-banner__video-container"><video class="ecl-banner__video"
      poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg" autoplay loop muted
      data-ecl-banner-video>
      <source src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4" type="video/mp4">
      <source src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm" type="video/webm">
      <track src="/captions/bunny-en.vtt" kind="captions" srclang="en" label="English">
      <track src="/captions/bunny-fr.vtt" kind="captions" srclang="fr" label="French">
    </video>
    <div class="ecl-banner__credit"><small>© Copyright</small></div><button
      class="ecl-button ecl-button--tertiary ecl-banner__play ecl-button--icon-only" type="button"
      data-ecl-banner-play><span class="ecl-button__container"><span class="ecl-button__label"
          data-ecl-label="true">Play video</span><svg class="ecl-icon ecl-icon--m ecl-button__icon" focusable="false"
          aria-hidden="true" data-ecl-icon>
          <use xlink:href="/component-library/dist/media/icons.a3ed8a97.svg#play-outline"></use>
        </svg></span></button><button class="ecl-button ecl-button--tertiary ecl-banner__pause ecl-button--icon-only"
      type="button" data-ecl-banner-pause><span class="ecl-button__container"><span class="ecl-button__label"
          data-ecl-label="true">Pause video</span><svg class="ecl-icon ecl-icon--m ecl-button__icon" focusable="false"
          aria-hidden="true" data-ecl-icon>
          <use xlink:href="/component-library/dist/media/icons.a3ed8a97.svg#pause-outline"></use>
        </svg></span></button>
  </div>
  <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"><a href="/component-library/example"
              class="ecl-link  ecl-banner__title-link">Lorem ipsum dolor sit amet consectetuer adipiscin</a></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.</span></p>
        <div class="ecl-banner__cta"><a href="/component-library/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="/component-library/dist/media/icons.a3ed8a97.svg#corner-arrow"></use>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Try it yourself on the playground

Playground

Other variants

Several variants are available for all kind of banner: size, font, background and text color, horizontal and vertical alignment, ...

Check the playground for more information.

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