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 4 Orange (set text color in styles panel)
Heading 5
Heading 6
Body text styles – use Dimensions > Margin > Margin Top to set custom margins (default margins are margin-top)
Body Text
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)
Gray Cards – use Group block – content width 800 and card columns inside (set columns class = card-simple-gray)
Heading
Subhead
Content
Heading
Subhead
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
