Style Guide
Dark banner header with slight gradient and curve
Use style “curved-edge” on group
The first “Group” block on a page (no banner above) 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 – movement (add css class “movement”)
Heading 1 – 44px/900 (black)
Heading 2 – 40px/900 (black)
Main color. For secondary color must Edit as HTML and set add <span class=”two-tone”></span> .
Heading 3 – 22px/900 (black)
Heading 2 – separator hr under – left align (for separator use “Wide Line” style and class “h-underline”)
Heading 2 – separator hr under – center align – (for separator use “Default” style and class “h-underline”)
Heading 4 – 16px/400 (regular)
Heading 4 Orange (set text color in styles panel) – 16px/400 (regular)
Heading 5 – 18px/700 (bold)
Heading 6 – 18px/400 (regular)
Body text styles – use Dimensions > Margin > Margin Top to set custom margins (default margins are margin-top)
Body Text – 18px/400 (regular)
Right arrow link (css class = right-arrow-after)
Small primary color right arrow link (css class = roboto-label-small right-arrow-after)
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)
Zoom and zoom box: Add class “zoom” to image for zoom on hover style. Add class “zoom-box” to image for zoom/grow on hover style.
List styles
List style default:
- List item 1
- List item 2
List style green-bullet:
- List item 1
- List item 2
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
List style check-simple:
- Add css class “check-simple” to additional css classes for List (not list item)
- Item 2
List style plus-simple:
- Add css class “plus-simple” to additional css classes for List (not list item)
- Item 2
Button styles – use Styles panel to choose style
Regular Quote Block – use Styles panel to choose style (default or plain)
Default Style: Lorem ipsum dolor sit amet, consectetur adipisicing 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.”
Plain Style: Lorem ipsum dolor sit amet, consectetur adipisicing 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.”
Gray or Light Blue Cards with link – use Group block – content width 800 and card columns inside (set columns class = card-simple-lt-blue or card-simple-gray and column class = linked-container and for linked arrow, add class=bottom-align)
Gray or Blue Cards no link – use Group block – content width 800 and card columns inside (set columns class)
Heading
Content
Heading
Content
Dark Blue (Primary color) Cards – same as above (set columns class = card-simple-primary and column class = linked-container if linked)
Horizontal Logos – use Group block > select Row > set justification under Settings
Gray 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
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
Quote boxes – set css for columns = quote-boxes, set css for column quote = quote-box-blue, headshot should sized prior to upload to 75px x 75px.
Our Foundation has been using GLM for over a decade and it has streamlined our grantmaking immensely. Our subscription to this service is some of the best money we spend every year. I couldn’t imagine doing our work without it.”
Holly Launchbaugh
South Central Community Foundation
We have been using Foundant for 6 years and I love that the organization listens to feedback, is accessible, and is continually improving the product.”
James Nelson
Michigan Humanities Council
Photo style – set css for photo = photo-shadow
VPAT style – set css for columns = vpat-column, check image has to be a transparent png (or gif) and should be sized to 96px x 96px.
Grant management made more accessible
Foundant’s grant lifecycle management platform is designed to be inclusive. We believe that everyone, regardless of ability, should have equal access to funding opportunities. That’s why we’re committed to providing a platform that supports your applicants and helps you run an inclusive program.
A more inclusive experience
We achieved a VPAT certification, demonstrating our commitment to meeting industry-leading accessibility standards. Our platform is compliant with WCAG 2.1, Section 508, and other relevant guidelines.
Gradient background
set in container styles > background > gradient > radial gradient
Color bar divider line (below)
Add separator block, set Align width, in Styles, set to Wide Line, in Background set Gradient to Color Bar