Banner - Components

Image banners

Text box banner

Headline sed elit lorem. Donec dictum.

Pellentesque tempor tincidunt quam, finibus vulputate eros iaculis pharetra orci arcu, dictum maximus arcu pellentesque eget. Cras massa nunc.

CTA link

Fullscreen

<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.16df4a0c.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.16df4a0c.svg#corner-arrow"></use>
            </svg></a></div>
      </div>
    </div>
  </div>
</section>

Try it yourself on the playground

Playground

Text highlight banner

Headline sed elit lorem. Donec dictum.

Pellentesque tempor tincidunt quam, finibus vulputate eros iaculis pharetra orci arcu, dictum maximus arcu pellentesque eget. Cras massa nunc.

CTA link

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