Image banner
Video banner
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).