Congratulations on your new website! Here is a reference guide to help you visualize what will display on the front-end of your website when you make updates. If you have any questions, feel free to contact us at support@statusforward.com.

---

Fonts Used in Website

It’s important to be consistent with font (and color) use across all marketing channels. Here are the two typefaces and their fonts that are being used throughout the site, with links to purchase licenses for use outside of the website. The license for website usage is covered under Status Forward’s Adobe Creative Cloud subscription, nowhere else.

Priori Sans: https://www.emigre.com/Fonts/Priori

This is the sans-serif font. We used “black” for the logo, and “black”, “bold”, “regular” and “regular italic” for select body copy and most headlines throughout the website.

Davis: https://www.myfonts.com/fonts/canadatype/davis/

This is the slab-serif font. We used “bold”, “regular” and “regular italic” fonts for most body copy, some headlines and navigation throughout the website.

---

Headlines

This is an H1 headline

H1 headlines are only used for page and post titles and are automatically generated by the system. You should never need to insert an H1 into your page or post.

This is an H2 HEADLINE

I am a smaller H3 Headline

THIS IS AN H4 HEADLINE

THIS IS AN H5 HEADLINE

This is an h6 headline

---

Body Copy

This is how body copy looks throughout the website. Lorem ipsum dolor sit amet, consectetur elit. I am a text link in eros elementum tristique. I am bold text, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Intro Body Copy: Use style “intro” in Additional CSS Class field.

This is example lead-in text that is set apart from the body copy. It is often used at the start of a page to lead visitors into the content.

---

Colors Used Site-wide

---

Blockquote

“This is a block quote. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.”

Pull Quote Default

“Pull Quote ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare”

CITATION – WHO’S IT BY

Pull Quote Blue Background: Choose “solid color” option

“Pull Quote ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare”

CITATION – WHO’S IT BY

---

Buttons – Text link with style .button & Content Editor Button (same style)

Separators: Default (short), Dots, and Wide

---

---

---

Lists: bullet style and numbered style

• Aenean faucibus nibh et justo cursus id rutrum
• Dolor sit amet consectetur adipiscing
• Eros dolor interdum nulla ut commodo

1. Aenean faucibus nibh et justo cursus id rutrum
2. Dolor sit amet consectetur adipiscing
3. Eros dolor interdum nulla ut commodo

---

Accordions

Frequently Asked Questions

---

Form Style

---

Page Layouts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

1/3 and 2/3 columns: need to insert style in Additional CSS Class field.

Wide Block with Images

Full Screen Block with Images

Full Screen Block of Images with left/right gutter

Style “gutter” must be placed in the Columns Additional CSS Class field to work.

Full Screen Block of Images with no gap (edge-to-edge columns)

Style “no-gap” must be placed in the Columns Additional CSS Class field to work.

Image with Caption

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Right Aligned Image – lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Left Aligned Image – Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.