x

COPY ONLY BLUE SECTION

• Use for important call-out
• Formatting/Styling
  • H2 Secondary (if SEO recommended) or Paragraph Large ALL CAPS
  • or Paragraph Medium

x

PICTURE BANNER

• **Add custom class: section-behind-hero-mobile to the section
• Example 1 (Paragraph Medium)
• Layout: split column 50/50

x

GREY CIRCLE

• Example 1 (Copy = Paragraph Medium)
• Example 2 (Copy = Paragraph Large)
• Layout: split column 66/33 (or 75/25 if that fits better)

   

HEADING & COPY ONLY BLUE SECTION

• Formatting/Styling:
  • Title = H1 OR Primary H2 (if SEO recommended) or large style ALL CAPS
  • Subtitle = Secondary H2 or Paragraph Large ALL CAPS
  • Copy = Normal (typically if 2 paragraphs) and Paragraph Medium (typically if 1 paragraph)

x

PICTURE BANNER

• **Add custom class: section-behind-hero-mobile to the blue section
• Example 1 - with subtitle 
• Example 2 - 2 paragraphs
• Example 3 - paragraph medium
• Layout: 50/50 split column

x

GREY CIRCLE

• Example 1
• Example 2
• Layout: Use a 12 column double layout (75/25 or 66/33) whichever best fits the content

x

HEADING | COPY + BUTTON(S) BLUE SECTION

• Formatting/Styling
  • Title = H1 or Primary H2 (if SEO recommended) or Large Style ALL CAPS 
  • Subtitle (if used) = Secondary H2 (if SEO recommended) or Paragraph Large ALL CAPS
  • Copy = Normal (if multiple paragraphs) OR Paragraph Medium (if only 1 paragraph)

PICTURE BANNER

• **Add custom class: section-behind-hero-mobile to the section
• Layouts:
  • Use a 12 column double layout (50/50)
  • Use 8/4 template and add the paragraph to the left and the button to right right (7/5 template can be used if needed to fit the whole button)
  • Do not include the title in the template
• Example 1 - (Title, subtitle, copy, button)
• Example 2 (2 buttons)

x

GREY CIRCLE

• Layouts: 
  • Use a 12-column double layout (75/25) OR single 12 column section to better fit the buttons, if needed
  • Use a 8/4 template and add the paragraph to the left and the button to the right (7/5 template can be used if needed to fit the whole button)
  • Do not include the title in the template
• Example 1 (1 paragraph, 1 button)
• Example 2 (Multiple paragraphs, 1 button, single 12 column)
• Example 3 (Multiple buttons, single 12 column)

x

HEADING + COPY | COPY + BUTTONS(S) BLUE SECTION

Formatting/Styling:

• Title = H1 or Primary H2 (if SEO recommended) or Large style ALL CAPS
• Subtitle (if used) = Secondary H2 or Paragraph Large ALL CAPS
• Copy = Normal and/or Paragraph Medium

x

PICTURE BANNER

• **Add custom class: section-behind-hero-mobile to the section
• Use a 12 column double layout (50/50)
• In 8/4 template, add the paragraphs to the left and button to the right (7/5 template can be used if needed to fit the whole button)
• Do not include the title in the template
• Example 1

x

GREY CIRCLE

• Layouts
  • Use a 12 column double layout (75/25) or single 12 column if the content fits better
  • In 8/4 template, add the paragraphs to the left and button to the right (7/5 template can be used if needed to fit the whole button)
  • Do not include the title in the template
• Example 1

x

66/33 LAYOUT

33/66 LAYOUT

50/50 LAYOUTS

TITLE = H1/H2 (SEO) OR LARGE HEADING (ADD IN SINGLE 12 COLUMN SECTION)

SINGLE 12 COLUMN SECTION

TITLE = H1/H2 (SEO) OR LARGE HEADING

SUBTITLE = H3 

Copy = Normal

x

VERTICAL CTA

• Section Layout
  • Standard 12 Column, Brand Primary background
• Setting up the banner:
  • CTA Banner Title goes in the Heading > COPY field (not the heading > HEADING field)
    • Primary H2, or alternate H2 ALL CAPS. You may have to manually change the color of the font to white. 
  • Add CTA Item(s)
    • Title = goes in the SUBHEADING field, not the HEADING field. Paragraph Large style. ALL CAPS. Need to manually change the color to white. 
    • Copy = goes in the SUBHEADING field. Need to manually change the color to white. 
    • Add "vertical-button" to custom class field. 
• Background color = Primary background color
• click "Show CTA Buttons Inline" checkbox
• Example 1 (2 CTAs - bottom of page)
• See example 2 below: