Style Standards

This page is designed to illustrate the standard styling and typography used throughout the website. For specific page templates, see the subpages of this section.


Typography

A variety of styling is common. Here is a list of typography elements:

 

Heading 1: This is the Page Title (Title Case)

Heading 2: This is the section title (sentence case)

Heading 3: This is the subtitle (sentence case)

Heading 4: This is a smaller subtitle (sentence case)

Heading 5: This is used for minor emphasis (sentence case)

 

This is standard paragraph text, used in general content that is not a headline or subhead. Bold can be used for strong emphasis. Italics font will look like this. It is possible to link to other pages within a sentence of paragraph text.

This is a block quote for highlighting quotes, information or other noteworthy text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales purus ut ipsum semper fringilla. Aliquam vel felis ac leo feugiat luctus.


 

Example of typography & image styling

Here is an example of how the above typography will look as used on a normal page, including use of images.

 

Heading 1: This is the Page Title (Title Case)

This is standard paragraph text, used in general content that is not a headline or subhead.

Heading 2: This is the section title (sentence case)

This is standard paragraph text, used in general content that is not a headline or subhead. 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.

This is standard paragraph text, used in general content that is not a headline or subhead.

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.

Heading 3: This is the subtitle (sentence case)

This is standard paragraph text, used in general content that is not a headline or subhead. "P" tags were added to create a standard spacing between these two paragraphs. The reason this paragraph exists is to show how thumbnails may be used in various locations as determined by the need. This paragraph shows how a thumbnail may be used alongside a block of standard paragraph text.

You may be surprised to know how much text is required to fill this space. At this point there isn't much more to read here. If you're still reading this is probably getting pretty monotonous. But as you can see, this text should flow correctly as it wraps around the thumbnail. The text shouldn't run into the thumbnail as you read this.

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.

Primary button CTA

Heading 4: This is a smaller subtitle (sentence case)

This is standard paragraph text, used in general content that is not a headline or subhead. 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.

Heading 5: This is used for minor emphasis (sentence case)

This is standard paragraph text, used in general content that is not a headline or subhead. 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.

 

This is a block quote for highlighting quotes, information or other noteworthy text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales purus ut ipsum semper fringilla. Aliquam vel felis ac leo feugiat luctus.

Other Bootstrap Options:

Base Typography

Other Typography Components


Lists

Bulleted lists

This is standard paragraph text, used in general content that is not a headline or subhead.

  • Item one
  • Item two
  • Item three
  • Etc.

Let's not forget that lists are often used in between paragraphs.

Numbered Lists

This is standard paragraph text, used in general content that is not a headline or subhead.

  1. The first item
  2. The second item
  3. The third item
  4. Etc.

Let's not forget that lists are often used in between paragraphs.

Inline Style

  • The first item
  • The second item
  • The third item

 


Tables

Try to avoid using tables whenever possible, as they do not look good with more than 2-3 columns on mobile. If you need to use a table, however, there are three kinds of table styles that can be used on the site:

Option A is the standard table for organizing information:

Option A Title

Option A Title

Information goes hereInformation goes here
Table linkTable link
Information goes hereInformation goes here
Information goes hereInformation goes here

Option B includes a white background.

Option B Table Title Goes Here

InformationInformationInformation
Table LinkTable LinkTable Link
 More informationMore informationMore information, etc.

Button & icon styles

Icons can be various sizes and colors

Icons (can increase size or change color):

Did you know that we use Font Awesome for all icons?

 

Buttons Primarily Used in Design:

Scroll to top