Style Guide

The SourceDay website (and this style guide) is powered by WordPress and the Gutenberg editor. This is a living example of what’s possible inside our build.

TYPEFACE

Aa

Logo

Color

Navy

#0f2832

Green

#18aa05

Bright Green

#1bcf02

Emerald

#007c5e

Gray

#f6f5f5

Blue

#0097f7

Typography➞

A range of headings and body copy styles.

Buttons➞

A visual call-to-action, available in multiple styles

Images➞

Images with options for width, placement, and captions.

Lists➞

Simple bulleted or numbered lists

Blockquote➞

A simpler, text-only quote with citation

Feature Grid➞

A simple grid with icons, title, copy, and call-to-action.

Logos➞

A grid of logos available in two sizes.

Hero➞

Large page intro with image, big text, and smaller copy.

Feature Quote➞

A large quote with citation and color/image options.

Utility Box➞

A simple gray box with title, copy, and CTA, used for wayfaring.

Video➞

Embed a YouTube video with custom cover and style

Lead Form➞

A customizable iframe embed for adding Marketo forms

Stat Grid➞

A stat grid, each with a label and large number.

Resource Hero➞

A large callout with options for case studies and white papers

Value➞

A pair of lists for showing before/after comparisons

Companies➞

A pair of companies, with logos and descriptions

Blog Posts➞

A row of posts with image, title, and category

Testimonials➞

3-column grid of quotes with citations and a small photo with a speech bubble background.

Resource➞

Larger, styled links to other content on the site

Banner➞

Alternate hero-style image, but short and wide with text over it.

Cover➞

Like a group, but with custom background.

Media & Text➞

2-column layout with a heading and/or paragraphs, buttons on one side, image on the other

Group➞

Combine multiple blocks into one

Columns➞

Admin-only for now

Video Columns➞

3-column grid of videos with titles and descriptions

Platform➞

This block is currently only used on the homepage and is not configurable.

People➞

4-column grid of people with photos, name, title, and bio, which links to a LinkedIn profile

Photo Cluster➞

Do not use. Collage of photos that have parallax scrolling.

Accordion➞

Displays sections of content one at a time with a photo, title, description, intro, body, and CTA over a shared background image.

Marketo Pop-Up➞

A pop-up form that shows when a user clicks a button, locked video, or other trigger

Call to Action➞

A compact banner with title, style, and button link.

Reviews➞

A swipeable quote slider in two distinct flavors.