Banner - Components

Image banners

Text box banner

<section class="ecl-banner ecl-banner--text-box ecl-banner--m ecl-banner--centered">
  <picture class="ecl-picture ecl-banner__picture"><img class="ecl-banner__image"
      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="alternative text" /></picture>
  <div class="ecl-banner__credit">© Copyright or credit</div>
  <div class="ecl-container">
    <div class="ecl-banner__container">
      <div class="ecl-banner__content">
        <div class="ecl-banner__title"><span class="ecl-banner__title-text">Headline sed elit lorem. Donec
            dictum.</span></div>
        <p class="ecl-banner__description"><span class="ecl-banner__description-text">Pellentesque tempor tincidunt
            quam, finibus vulputate eros iaculis pharetra orci arcu, dictum maximus arcu pellentesque eget. Cras massa
            nunc.</span></p>
        <div class="ecl-banner__cta"><a href="/example"
            class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after 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.df9fbcbe.svg#corner-arrow"></use>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Try it yourself on the playground

Playground

Image overlay banner

Fullscreen

<section class="ecl-banner ecl-banner--image-overlay ecl-banner--m ecl-banner--centered">
  <picture class="ecl-picture ecl-banner__picture"><img class="ecl-banner__image"
      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="alternative text" /></picture>
  <div class="ecl-banner__credit">© Copyright or credit</div>
  <div class="ecl-container">
    <div class="ecl-banner__container">
      <div class="ecl-banner__content">
        <div class="ecl-banner__title"><span class="ecl-banner__title-text">Headline sed elit lorem. Donec
            dictum.</span></div>
        <p class="ecl-banner__description"><span class="ecl-banner__description-text">Pellentesque tempor tincidunt
            quam, finibus vulputate eros iaculis pharetra orci arcu, dictum maximus arcu pellentesque eget. Cras massa
            nunc.</span></p>
        <div class="ecl-banner__cta"><a href="/example"
            class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after 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.df9fbcbe.svg#corner-arrow"></use>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Try it yourself on the playground

Playground

Text highlight banner

Fullscreen

<section class="ecl-banner ecl-banner--text-highlight ecl-banner--m ecl-banner--centered">
  <picture class="ecl-picture ecl-banner__picture"><img class="ecl-banner__image"
      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="aternative text" /></picture>
  <div class="ecl-banner__credit">© Copyright or credit</div>
  <div class="ecl-container">
    <div class="ecl-banner__container">
      <div class="ecl-banner__content">
        <div class="ecl-banner__title"><span class="ecl-banner__title-text">Headline sed elit lorem. Donec
            dictum.</span></div>
        <p class="ecl-banner__description"><span class="ecl-banner__description-text">Pellentesque tempor tincidunt
            quam, finibus vulputate eros iaculis pharetra orci arcu, dictum maximus arcu pellentesque eget. Cras massa
            nunc.</span></p>
        <div class="ecl-banner__cta"><a href="/example"
            class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after 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.df9fbcbe.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--centered">
  <div class="ecl-container">
    <div class="ecl-banner__container">
      <div class="ecl-banner__content">
        <div class="ecl-banner__title"><span class="ecl-banner__title-text">Headline sed elit lorem. Donec
            dictum.</span></div>
        <p class="ecl-banner__description"><span class="ecl-banner__description-text">Pellentesque tempor tincidunt
            quam, finibus vulputate eros iaculis pharetra orci arcu, dictum maximus arcu pellentesque eget. Cras massa
            nunc.</span></p>
        <div class="ecl-banner__cta"><a href="/example"
            class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after 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.df9fbcbe.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.

Left aligned content

Removing class .ecl-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-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).