Gas Innovations Style Guide

Gas Innovations Digital Style Guide

This document is a guide to the mark-up styles used throughout the site.

Typography

This site uses the free Google font Oswald, which can be found here.

Color Swatches

#ec1c2d

#046cbb

#262626

#454f58

Heading Examples

Second-Level Header

The main titles of each pages header is an h2 element. Please reserve h2 for main page titles only

I am a Second-Level Heading

Third-Level Header

The header titles shown in the below example is an h3 element, and is commonly used as the main heading titles in the pages content. More than one may be used per page.

I am a Third-Level Heading

Fourth-Level Header

The header shown in the below example is an h4 element, this heading is used in the rotating slider on the homepage

I am a Fourth-Level Heading

Fifth-Level Header

The header shown in the below example is an h5 and is commonly used as one of the main headings in this site. It usually follows the h3 in importance.

I am a Fifth-Level Heading

Paragraphs

All paragraphs are wrapped in p tags. Additionally, p elements can be wrapped with a blockquote element if the p element is indeed a quote. Historically, blockquote has been used purely to force indents, but this is now achieved using CSS. Reserve blockquote for quotes. Here’s an example of correct usage:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc ligula, scelerisque sed diam fermentum, euismod bibendum arcu. Morbi sollicitudin nulla sed ante sollicitudin ullamcorper. Suspendisse eget metus enim. Ut id viverra magna. Mauris metus ante, euismod sit amet lacus et, semper sagittis orci.