Website Style Guide

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.



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 – Select “Intro” from right panel

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.

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

Buttons
Separators: Default 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

Question #1

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.

Question #2

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.

Question #3

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.

PHOTO DIMENSIONS & EDITING TIPS
  • Always address the dimensions and file size of every image before the image is uploaded to the website.
  • Optimize/compress all images to find the optimal smallest file size at the best quality.
  • Do not upload images directly from your phone or camera as those image sizes are way to big and will cause long load times (and poor SEO results).
  • Always name your images relevant to the image subject. Do not upload default file names such as “IMG_2345.jpg.” Instead, “dog-duvet.jpg” is a much better descriptive file name.
  • Always add ALT tags when inserting images on the website. This important for people with visual impairment using a screen reader to consume the site, as well as for SEO.
  • Applications such as Photoshop,  Pixlr, or JPEGMini are good image resizing and compression tools.
  • Use best judgement always.

General Maximum Size – no image should be larger than 2000px wide and/or over 500kb. 

Product Images – 1500px wide.

Blog Post Images – Best to use a landscape photo, no more than 1500px wide.

Content Images – content images within pages and posts don’t really need to be larger than 1200px wide in most cases. If using a wide or full-width image, you might need a 1800-2000px wide image. Just keep an eye on image size.


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.

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.

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.

Wide Block with Images
Full Screen Block with Images

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.

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.

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.

Cover Image