Digital Style Guide

Stylesheet

The site's main stylesheet can be found here: /style.css

Colors

GIH logo Background
#00457c
Highlights
#00BFB3
#f9b548
#84BD00
Backgrounds
#0B5E99
#002B49
#00192A
#EEEEEE
Headings

Primary heading ("Heading 1")

Secondary heading ("Heading 2")

Tertiary heading ("Heading 3")

Paragraph text. Cookie jelly beans wafer gummi bears cheesecake liquorice. Caramels sesame snaps topping sweet roll toffee tiramisu gummi bears. Caramels cake jelly-o.

Lists

Unordered list
  • Ice cream bonbon.
  • Marzipan gummies.
  • Fruitcake chocolate bar bonbon.
Ordered list
  1. Marzipan marzipan.
  2. Pudding candy pastry lollipop cheesecake bear claw.
  3. Cake cheesecake pudding croissant.

 

Blockquotes

“Action is where philanthropy demonstrates its true value. At the Children’s Foundation, this means supporting community-led solutions, participating in collaborative funding efforts, and advocating for policies that strengthen public health, uplift nonprofit partners, and reinforce the philanthropic sector. Action requires transparency, trust, and long-term commitment.”
–Kelly Brittain, PhD, RN, Vice President of Impact at Children’s Foundation

 

Links

A standard link. A link within a sentence. A visited link.

GIH Fonts

Montserrat is used throughout the site for headings and body copy. Text color is dark grey

#333333

Adobe Garamond Regular is used to spell out "GRANTMAKERS IN HEALTH" in the GIH logo. And for serif type on printed documents.

Arial is used for GIH emails

Gill Sans MT is used for headline elements on printed templates and letters

helpful shortcodes

Publication Preview: Latest Health policy update

[ health-policy-prev-link ]
October 1, 2025 Edition

Click to Action

[ cta 'headline', 'subhead', 'button text', 'url' ]

Get Started

See what we can do for you.

Find Out More

UI components

Text Editor Buttons
<a class="button" href="#">Read more</a>
Read more
Visual Editor Buttons
* Please note: Remove the extra space around the brackets.
Basic button usage:
[ button url="https://example.com" text="Button text" ]
Button text
Force it to open in a new tab/window:
[ button url="https://example.com" text="Button text" new-window="true" ]
Button text
Add extra classes:
[ button url="https://example.com" text="Button text" class="additional-class-name another-additional-class-name" ]
Button text

Forms

 
 

Layout Classes

 
Widgets

Widgets have a limited number of classes that can be applied by checking the corresponding box when editing the widget.

full-border
Creates a border all around the widget.
no-title
Hides the title and the associated horizontal line.
alternate-widget-style
Uses alternate styling that eliminates the space around the widget title's horizontal divider and switches out the standard guillemot-style bullets for solid arrows.
 
Utility Classes
clearfix
Makes element automatically clear its child elements, so you don't need to add additional markup. The clearfix is a way to combine the zero-height container problem for floated elements.
hide
Keep the markup but don't show it in the browser.
invert
Use on dark background rows to make the contained text light.
icon-no-padding
Useful for icons that have a little too much space on top of them. Use when an icon needs to be bumped up to align with the top of text.
anti-hover
This class removes the hover effect (white bckground and drop shadow) from hoverable sections. It's useful if you have a blank section that doesn't need a hover state. Add the class to the column.

 

Optimize Images

Before uploading an image to the website, please be sure the image has been optimized. We highly recommend this free, online resource: https://optimizilla.com

 

Image Sizes

Throughout the website, we are using different image sizes. Below we'll outline the image sizes for each of the landing pages of the website.

Please note: If you don't like how an image looks after you've uploaded it (you're seeing cropping, stretching, etc.), please review the guidelines below and make sure you upload images at the correct size and proportions.

 

Homepage

 

Posts, Articles, Events, CTA Images
  • Featured Images
    • Size - at least 1200px x 630px
    • Featured images should be at least 1200 x 630px (in roughly these proportions -- about twice as wide as they are all), but the website will be smart enough to scale images that aren't that exact size. However, deviating significantly from that size, whether you're using an image that is too small, too large or an unusual shape, could result in longer load times, blurry images or unexpected cropping.
Images for Annual Conference
  • GIH.org
    • Banner for GIH Website Homepage - size: 1,000px × 523px
      • Ex: https://www.gih.org/wp-content/uploads/2019/06/gih-KY0A0395-mobile-2.jpg
    • Meetings CTA for Annual Conference - size: 700px × 437px
      • Ex: https://www.gih.org/wp-content/uploads/2019/06/GIH_2019_AnnualConference-700.png

Saved Modules

Within the website, we've saved modules, which you can access via the + sign of Beaver Builder when editing a page. Then navigate to Modules > Saved Modules and drag and drop in each of the saved modules you'd like to use. You'll find the manual approach for some of our featured modules are within.

Saved Rows

Like with Saved Modules, we also have Saved Rows within the website. You can access via the + sign of Beaver Builder when editing a page. Then navigate to Rows > Saved Rows and drag and drop in each of the saved rows you'd like to use. You'll find the manual approach for some of our featured modules are within.

Saved Elements

Within the website, we've saved a page in Private mode, like this page, so it's only accessible if you are logged in. Within this page, you can see the elements we've setup to be utilized within the website. You can check it out here.

Issue Icons

If you'd like to utilize the issue icons throughout the website, you can pull it in as an image, as they are saved within the Media Library. You have both the white and black version available.

Helper Classes

Helper classes are designed to do handy style adjustments in a hurry. To use a helper class, simply open a Beaver Builder module, click the Advanced tab, and enter the class in the Class field.

Multiple helper classes can be applied to a single module. Just add each helper class with a space between. Example, adding bg1 invert to a module will make the background blue and the text white.

bg1

Changes the background of the module to #0B5E99, or blue.

invert

Makes all text inside the module white.

bg2

Changes the background of the module to #EEEEEE, or light gray.

centered

Centers a module on the page.

bg3

Changes the background of the module to #FFFFFF, or white.

drop-shadow

Adds a subtle drop shadow behind an element. Good for columns on a white background.

shadow-cards

Adds a shadow to columns when they're hovered over.

anti-hover

Use if you want to remove the hover state of a column.