Components

Banner

Image banner

Try it yourself on the playground

Playground

Video banner

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