Menu

Style Guide

Heading Styles

Header 1

HTML Code

<h1>CONTENT GOES HERE</h1>

Header 2

HTML Code

<h2>CONTENT GOES HERE</h2>

Header 3

HTML Code

<h3>CONTENT GOES HERE</h3>

Header 4

HTML Code

<h4>CONTENT GOES HERE</h4>
Header 5

HTML Code

<h5>CONTENT GOES HERE</h5>
Header 6

HTML Code

<h6>CONTENT GOES HERE</h6>

Paragraph Styling

HTML Code

<p>CONTENT GOES HERE...</p>

Output

This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

This is a paragraph that contains some inline styles. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.

Inline Text Styling

HTML Code

<strong>CONTENT GOES HERE...</strong>

Output

Bold Text

HTML Code

<em>CONTENT GOES HERE...</em>

Output

Italic Text

HTML Code

<u>CONTENT GOES HERE...</u>

Output

Underline Text

Button Styles

HTML Code

<a href="LINK" class="standard-button-orange">Standard Button</a>

Output

Standard Button Orange

HTML Code

<a href="LINK" class="standard-button-navy">Standard Button Navy>/a>

Output

Standard Button Navy

Colors

Orange

Dark Blue

Light Blue

Pink

Green

Gray

Color Usage in Text

Use class names to access any of the colors displayed above.

Orange: font-color ("orange-text"); background-color ("orange-background")
Dark Blue: font-color ("dark-blue-text"); background-color ("dark-blue-background")
Light Blue: font-color ("light-blue-text"); background-color ("light-blue-background")
Pink: font-color ("pink-text"); background-color ("pink-background")
Green: font-color ("green-text"); background-color ("green-background")
Gray: font-color ("gray-text"); background-color ("gray-background")

<h4 class="orange-text">Orange Text</h4>

Orange Text

<h4 class="pink-text">Pink Text</h4>

Pink Text

<h4 class="green-text">Green Text</h4>

Green Text

<div class="light-blue-background">Light Blue Background</div>

Light Blue Background

<div class="gray-background">Gray Background</div>

Gray Background

<div class="orange-background">Orange Background</div>

Orange Background

Adding Classes

How do I add a class to custom content?

I'm glad you asked! They will need to be added to the Class Field for that particular custom content.

1. Click the Gear

2. Add Your Classes

Recommended Image Sizing

Banner Image Recommended Size: 1585px x 600px

Images can be taller, but will only show the middle 300px portion of the image.