The first “Group” block on a page has preset padding top and bottom for consistency on page layout. This can be overridden in the styles panel if needed.

Heading styles – use Dimensions > Margin > Margin Top to set custom margins

Heading 1

Heading 2

Main color. For secondary color must Edit as HTML and set add <span class=”two-tone”></span> .

Heading 3

Heading 4

Heading 5
Heading 6

Body text styles – use Dimensions > Margin > Margin Top to set custom margins (default margins are margin-top)

Body Text

Default Links

Right arrow link (css class = right-arrow-after)

Small primary color right arrow link (css class = roboto-label-small right-arrow-after)

Small contrast color (#222) right arrow link (css class = roboto-label-small-gray right-arrow-after)

Link with vimeo lightbox (add add-vimeo-pop to additional css classes)

Lightbox link tips:

  • Use “add-vimeo-pop” to add a lightbox video to a button or link (Select block >> Advanced >> Additional CSS Classes)
  • Use “popup-vimeo” to add lightbox class to images (Image >> Hyperlink >> link settings)

List style check-circle:

  • Add css class “check-circle” to additional css classes for List (not list item)
  • Item 2

List style check-square:

  • Add css class “check-square” to additional css classes for List (not list item)
  • Item 2

Button styles – use Styles panel to choose style

Blue Cards – use Group block – content width 800 and card columns inside (set columns class = card-simple-lt-blue)

Heading

Content

Heading

Content

Gray Cards – use Group block – content width 800 and card columns inside (set columns class = card-simple-gray)

Heading

Content

Heading

Content

Horizontal Logos – use Group block > select Row > set justification under Settings

Blue background with rounded corners for forms – use Columns block

Heading

Content

Set individual column css = form-bg
And add padding top/bottom=small, left/right=xsmall

HTML Block with form code here

Gray Columns with rounded corners – set css = gray-columns

[icon]

HEading 4

Heading 3

Content

[icon]

HEading 4

Heading 3

Content

[icon]

HEading 4

Heading 3

Content

Columns with larger gap between – select columns block, in styles panel > Dimensions > Block Spacing L&R to xLarge

Heading 3

Content

Heading 3

Content

Image that opens a vimeo link on click – add link and link clsss = popup-vimeo

Light gray background

Use Group > select Group > css class = lt-gray-background, set group alignment to full width. Padding is set in style.css.

Light blue background

Use Group > select Group > css class = lt-blue-background, set group alignment to full width. Padding is set in style.css.

Stats styles

give columns below css style = stats
and set width per column as needed

$00

text

$00

text

00%

text

(CTA Example from old site) Want to Learn More?

Talk to a team member to learn more about the Foundant solutions that best meet your organization’s unique needs and free up more time to focus on your mission.