Headings
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.
Text Styles
Fonts
Fira Sans (sans-serif) – Body Text, Small Headings
Patua (serif) – Large Headings
Font Weights
Fira – 400, 400 italic, 500, 500 italic, 600, 600 italic
Patua – 500
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. Below are two additional quote styles.
Pullquote
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
Separator
Usage: Also known as a horizontal rule, a separator defines a thematic break in a page.
Other
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.
Lists
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
- 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 eu porttitor
Usage: Use the list block to create a numbered list.
Colors
Primary Colors
dark green
#293329
mint green
#DCE1CD
Secondary Colors
yellow
#ffd200
medium green
#5A9872
orange
#729F46
Buttons
Image Sizing
Homepage Full Width
Minimum: 1400px wide by 800px tall
Recommended: 1600px wide by 845px tall
Homepage Square
Minimum: 700px wide by 700px tall
Recommended: 1200px wide by 1200px tall
Secondary Page Banner
Minimum: 1400px wide by 500px tall
Recommended: 1800px wide by 640px tall
(Recommended size is smaller than 2x to keep file size manageable)
Content image – Large
Minimum: 1200px wide by 800px tall
Recommended: 1600px wide by 1067px tall
Content image – Circle
Minimum: 500px wide by 500px tall
Recommended: 1000px wide by 1000px tall
Content image – Highlight (expandable)
Minimum: 540px wide by 385px tall
Recommended: 1080px wide by 770px tall