Banners

Hide Banner Image on Mobile

Toggle (eg. If an image if not optimal for a mobile view, text over image placement makes it hard to read)

Hide Banner Header

Toggle ( The preference for a colour background)

Banner Subheading Small Text Class

Small font size: small-text, Normal font style : no-italic - Field, (eg. "small-text no-italic" no punctuation, space only)

live example

Banner Text Color Custom Class must be specified as shown here with eg. p-black
options: Sub headings and description text color: p-white or p-black

Banner Header Custom Class

Options listed, (no punctuation, space only)
Full width container: full-width
Center align text - Vertical : middle-alignment
Center align text - Horizontal : text-center
Tall banner of height 600px : tall-banner

Banner Text Color Custom Class

Live example

Headings text color: h1-black or h1-white
Sub headings and description text color: p-white or p-black

Banner Background Color Custom Class

we have removed the banner default dark background color. All the banner background colors have been added as an option now. If you want to use dark background color then you can add the “dark-bg” class in CMS or select colour as the banner or to appear instead of image on mobile

Live example

Option: crimson | sky-blue | black | white | dark-bg

Hide Banner Background Color on Desktop - toggle

Live example

We have added new toggle property to Hide Bg color on desktops/tablets in cases where you want to hide the background color on desktop/tablets but show on mobile. 

Reason: some screens with an image may show background colour as a "flash" of colour as you click from one screen to another. The colour is there by default (dark-bg) as well as selected as a mobile only option ir sky-blue.