Colors
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
- Marzipan marzipan.
- Pudding candy pastry lollipop cheesecake bear claw.
- 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
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.
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" ]
Force it to open in a new tab/window:
[ button url="https://example.com" text="Button text" new-window="true" ]
Add extra classes:
[ button url="https://example.com" text="Button text" class="additional-class-name another-additional-class-name" ]
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.
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.