Styleguide

Heading 1 Page Title

Usage: Heading 1 is the largest header and is typically used as the page title.

Heading 2

Usage: H2 is the first level heading in the content area. When adding new content to pages or posts, this should be the top level heading and should be used to break up text into main sections.

Heading 3

Usage: H3 is the second level heading in the content area.

Heading 4

Usage: H4 is the third level heading in the content area.

Heading 5

Usage: H5 is the fourth level heading in the content area.

Font Stack

Large headings – Inter, sans-serif

Small headings and body – Work Sans, sans-serif

Font Weights

Inter – 400, 500

Work Sans – 400, 400 italic; 600, 600 italic; 700, 700 italic


Intro Text

Vivamus imperdiet pharetra tempus. Duis cursus iaculis lectus, sed rutrum turpis sollicitudin sit amet.

Usage: The intro class should be used for introductory paragraphs on landing pages that need more visual prominence or need to be set apart in some way from the rest of the text. To apply an intro class, create a paragraph block, open the sidebar block settings, and add “is-style-introduction” to the “Advanced > Additional CSS Class” area.

Body Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus nunc consequat mauris volutpat, eleifend accumsan metus tempor. Cras venenatis, urna in tincidunt maximus, nisi mauris cursus sem, quis volutpat ex nulla nec est. Mauris ornare orci diam, ut pretium eros tristique in. Donec massa mi, ultricies sit amet velit ut, semper vestibulum arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.

Quote

Mauris eleifend sem id velit tincidunt, nec dapibus ex consectetur. Pellentesque dignissim vestibulum neque nec varius. Estibulum a varius metus. Quisque a ex ante. Morbi purus urna, tristique a cursus vel, dictum id felis. Proin nec tristique mi.

Lorem Ipsum, dolor semet

Usage: A quote block is used for quotations or to highlight a specific piece of content. A citation can be added below the quote, if necessary.

Separator


Usage: Also known as a horizontal rule, a separator defines a thematic break in a page.

Other

Link in paragraph text

Usage: A hyperlink is used to link from one page to another, or to an image or document. Use the popup toolbar to add a link.

This is bold, this is italic, this is underlined

Usage: Italics can be used for added emphasis or to denote an article. Bold defines important text. Tip: Avoid using underline since it could be confused for a hyperlink.

This is small text and can be used for downplaying elements, like citations at the end of an article.

Bulleted List

  • Risus ipsum maximus enim
  • Tincidunt tellus lectus non elit. Praesent consequat, nisl id semper lobortis, dolor urna sodales dolor, eget hendrerit velit nunc eu nunc
  • Sed sagittis dictum felis

Usage: Use the list block to create an unordered list.

Numbered List

  1. Risus ipsum maximus enim
  2. Tincidunt tellus lectus non elit. Praesent consequat, nisl id semper lobortis, dolor urna sodales dolor, eget hendrerit velit nunc eu nunc
  3. Sed sagittis dictum felis eu porttitor

Usage: Use the list block to create a numbered list.

Orange
#EA6606

Teal
#297384

Dark Gray
#444444

Light Gray
#ECEEE9

Light Blue
#CED9DB

White
#F8D569

It is important that images are sized appropriately. They should be large enough to appear crisp, but small enough that they do not slow the site down unnecessarily. Many modern displays have a very high pixel density, sometimes referred to as “retina” display. To appear crisp on these displays, images need twice the normal resolution. Below are recommended sizes for images – with two sizes for each, a minimum size, and a recommended size (for high-res displays).

Homepage HERO & PORTFOLIO Banner IMAGEs

Minimum: 1100px wide by 630px tall
Recommended: 2200px wide by 1260px tall

BLOG IMAGES

Minimum: 950px wide by 540px tall
Recommended: 1900px wide by 1080px tall

SNAPSHOTS

Minimum:  750px wide, height is variable
Recommended:  1500px wide, height is variable

STAFF PROFILES

Minimum: 325px wide by 325px tall
Recommended: 650px wide by 650px tall