Backgrounds & Inline Content

Here you will find examples of different background styles you have access to through the Page/Panel Elements and Styles dropdown.

  • Page/Panel Element "Inline Content - Background Light", Style > Backgrounds > Background-Light - This will add a light gray background color to the element
  • Page/Panel Element "Inline Content - Background Light Gradient", Style > Backgrounds > Background-Light-Gradient - This will add a light gray gradient background color to the element
  • Page/Panel Element "Inline Content - Background Mid", Style > Backgrounds > Background-Mid - This will add the blue background color to the element
  • Page/Panel Element "Inline Content - Background Mid Gradient", Style > Backgrounds > Background-Mid-Gradient - This will add the blue gradient background color to the element
  • Page/Panel Element "Inline Content - Background Dark", Style > Backgrounds > Background-Dark - This will add the dark green background color to the element
  • Page/Panel Element "Inline Content - Background Dark Gradient", Style > Backgrounds > Background-Dark-Gradient - This will add the dark green gradient background color to the element
  • Page/Panel Element "Inline Content - No Background" - This  will wrap content in the Inline Content mark up but will not add a background

Page/Panel Elements name:
"Inline Content - Background Light"

Class names on the outer div are 'InlineContent' & 'Background-Light'.

Page/Panel Elements name:
"Inline Content - Background Light Gradient"

Class names on the outer div are 'InlineContent' & 'Background-Light-Gradient'.

Page/Panel Elements name:
"Inline Content - Background Light 2"

Class names on the outer div are 'InlineContent' & 'Background-Light-2'.

Page/Panel Elements name:
"Inline Content - Background Light Gradient 2"

Class names on the outer div are 'InlineContent' & 'Background-Light-Gradient-2'.

Page/Panel Elements name:
"Inline Content - Background Mid"

Class names on the outer div are 'InlineContent' & 'Background-Mid'.

Page/Panel Elements name:
"Inline Content - Background Mid Gradient"

Class names on the outer div are 'InlineContent' & 'Background-Mid-Gradient'.

Page/Panel Elements name:
"Inline Content - Background Mid Gradient with Curve Top and Lines"

Class names on the outer div are 'InlineContent' & 'Background-Mid-Gradient' & 'Background-Line' & 'Curve-Top".

Page/Panel Elements name:
"Inline Content - Background Primary"

Class names on the outer div are 'InlineContent' & 'Background-Primary'.

Page/Panel Elements name:
"Inline Content - Background Dark"

Class names on the outer div are 'InlineContent' & 'Background-Dark'.

Page/Panel Elements name:
"Inline Content - Background Dark Gradient"

Class names on the outer div are 'InlineContent' & 'Background-Dark-Gradient'.

Page/Panel Elements name:
"Inline Content - Background Dark Gradient Reversed"

Class names on the outer div are 'InlineContent' & 'Background-Dark-Gradient-Reversed'.

Page/Panel Elements name:
"Inline Content - Background Dark Gradient with Curve Top and Lines"

Class names on the outer div are 'InlineContent' & 'Background-Dark-Gradient' & 'Background-Line' & 'Curve-Top".

Page/Panel Elements name:
"Inline Content - Curve Top 2"

Class names on the outer div are 'InlineContent' & 'Curve-Top2'.

Page/Panel Elements name:
"Inline Content - Background Map"

Class names on the outer div are 'InlineContent' & 'Background-Map'.

Page/Panel Elements name:
"Inline Content - Background Tree"

Class names on the outer div are 'InlineContent' & 'Background-Tree'.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline Content page/panel element with the background color class removed

Class names on the outer div are 'InlineContent'.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline Content 2-up

Header Left

On the second nested div you can swap out the "Background-Light" style for another background style to change the background color of this section.

Left side CTA link

Header Right

On the second nested div you can swap out the "Background-Mid" style for another background style to change the background color of this section.

Right side CTA link