Style Guide

This Style Guide is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic elements. It also provides guidelines for the way your website pages should be presented to ensure consistency across your site. To copy and paste code, hover over the code block and click the copy button.

Basic Styles

The basic building blocks of any website.

Typography

Colors

Utility

Images

Videos

Tables

Forms

Buttons

Icons

Modular Elements

Use these different modular Elements to contain the content on your page.

Foundation

Modal Dialog

Callouts

Cards

Panels

Split Panels

Typography

To Top

Fonts

Primary FontAa Montserrat

Montserrat is your primary font. Paragraphs and all text are in this font. If you need to assign this font, use the class .font-primary.^*Available Weghts: 300 - 900

Headings

Headings Are Important! Search engines use the headings to index the structure and content of your web pages and Users often skim a page by its headings. It is important to use headings to show the document structure.

Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use typescale classes to override the default size.

 
h1. This is a very large header
h2. This is a large header.
h3. This is a medium header.
h4. This is a moderate header.
h5. This is a small header.
h6. This is a tiny header.
 

 
 <h1>h1. This is a very large header.</h1>
 <h2>h2. This is a large header.</h2>
 <h3>h3. This is a medium header.</h3>
 <h4>h4. This is a moderate header.</h4>
 <h5>h5. This is a small header.</h5>
 <h6>h6. This is a tiny header.</h6>

Subtitles

If you insert a <small> element into a header it will scale the header font size down, allowing you to use this for subtitles or other secondary header text.

This is a large headerI am a subtitle

Lorem ipsum dolor sit amet, consectetur 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.

I am a subtitleThis is a medium header


<h2>This is a large header<small>I am a subtitle</small></h2>
<h3 class="text-center"><small>I am a subtitle</small>This is a medium header</h3>

Paragraphs

This is a paragraph. Paragraphs are preset with a font size [18px/1.125rem], line height [1.2] and vertical spacing [margin-bottom:24px/1.5rem] to match the overall vertical rhythm.


<p>This is a paragraph.</p>

Lead Paragraph

A slightly-larger-than-normal block of text, useful for intro blurbs or other descriptive text.

Lorem ipsum dolor sit amet consectetur adipisicing elit. In tempora ex officiis quos itaque fuga.

 
 <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. In tempora ex officiis quos itaque fuga.</p>

Basic Text Highlighting

HTML provides several formatting tags for highlighting text. Use the <strong> or <em> tag to denote text that should emphasized. Browsers will bold and italicize the words, while screen readers will read them with emphasis.

Other available tags:

This is highlighted text
This is smaller text
This is _subscript text.
This is ^superscript text.


<strong>bolded text</strong>
<em>italicized text</em>
<strong><em>bolded & italicized</em></strong>
<mark>highlighted text</mark>
<small>smaller text</small>
<sub>subscript</sub>
<sup>superscript</sup>

Typescale

You may adjust font-size by overriding an element's default size with css classes. This can be useful to size a <p> or <h1> through <h6> using the existing header sizes.

Developer's Hint

Why would I want to adust font sizes like this?
It's important not to skip heading levels when structuring your document. It confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.

Like h1 | Lorem Ipsum Dolor

Like h2 | Lorem Ipsum Dolor

Like h3 | Lorem Ipsum Dolor

Like h4 | Lorem Ipsum Dolor

Like h5 | Lorem Ipsum Dolor

Like h6 | Lorem Ipsum Dolor


<p class="like-h1">Lorem Ipsum Dolor</p>
<p class="like-h2">Lorem Ipsum Dolor</p>
<p class="like-h3">Lorem Ipsum Dolor</p>
<p class="like-h4">Lorem Ipsum Dolor</p>
<p class="like-h5">Lorem Ipsum Dolor</p>
<p class="like-h6">Lorem Ipsum Dolor</p>

Text Alignment

You may adjust the text alignment of an element by adding .text-left, .text-right, .text-center or .text-justify to an element.

Left Aligned Text

This the the standard alignment for text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<p class="text-left">This the the standard alignment for text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Right Aligned Text

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.


<p class="text-right">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.</p>

Center Aligned Text

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.


<p class="text-center">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.</p>

Justify Text

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.


<p class="text-justify">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.</p>

Media Query Dependant Text Alignment

To adjust text alignment by breakpoint, add that breakpoint to the front of your text alignment class. For example, .md:text-center will keep text left-aligned on the smallest screens, but switch to center-aligned on medium screens and larger.

Text CenteredMedium and Up

This text is left aligned for small screens below 640 pixels and center aligned for screens 640 pixels and larger.

 
 <p class="md:text-center">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.</p>

Text RightLarge and Up

This text is left aligned for small screens below 640 pixels and right aligned for screens 1024 pixels and larger.

 
 <p class="lg:text-right">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.</p>

Text Centered / LeftLarge and Up

This text is centered for screens below 1024 pixels and left aligned for screens 1024 pixels and larger.

 
 <p class="text-center lg:text-left">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.</p>

Links

Links are styled with a bolder look in your primary color. This is an example of a link.


<a href="/">This is an example of a link</a>

Dividers

Use dividers to define breaks between paragraphs or sections.

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.


<p>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.</p>
<hr />
<p>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.</p>

Lists

HTML lists are used to present list of information in a semantic way.

Unordered List - Basic

Use an unordered list to list things if the order of the items doesn't matter.

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


<ul>
   <li>List item number 1</li>
   <li>List item number 2</li>
   <li>List item number 3</li>
</ul>

Ordered List - Basic

Use an ordered list when creating a list where the order of the items is important, like ranking something from best to worst.

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


<ol>
   <li>List item number 1</li>
   <li>List item number 2</li>
   <li>List item number 3</li>
</ol>

Blockquote

"You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face. You are able to say to yourself, 'I lived through this horror. I can take the next thing that comes along.'"
Eleanor Roosevelt


<blockquote>
   <p>"You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face. You are able to say to yourself, 'I lived through this horror. I can take the next thing that comes along.'"</p>
   <cite>Eleanor Roosevelt</cite>
</blockquote>

Colors

To Top

Primary

#75C043
RGB(117,192,67)

.color-primary
.background-primary

Base

#fefefe
RGB(254,254,254)

.color-base
.background-base

Gray Accent

#222222
RGB(34,34,34)

.color-gray-accent
.background-gray-accent

White

#fefefe
RGB(254,254,254)

.color-white
.background-white

Black

#0a0a0a
RGB(10,10,10)

.color-black
.background-black

Using the color classes to switch out font colors is simple. Just assign that color class to your tag.

Heading 5 in Primary Color

This paragraph has a font color change in the very middle.


<h5 class="color-primary">Heading 5 in Primary Color</h5>
<p>This paragraph has a <span class="color-secondary">font color change</span> in the very middle.</p>

Utility

To Top

Typography Styling

You have quite a few utility classes to style text. Let's use these helper classes to add additional styling to some headings.

Available Helper Classes

.uppercase | .lowercase | .titlecase | .sentencecase | .underline

I Have All Uppercase Text.
Nope, I'd Rather be all Lowercase!
How About a Title that is Titlecased?
I display EXACTLY as I'm typed
This Title is Showing Underlined Text.


<h3 class="uppercase">I Have All Uppercase Text.</h3>
<h3 class="lowercase">Nope, I'd Rather be all Lowercase!</h3>
<h3 class="titlecase">How About a Title that is Titlecased?</h3>
<h3 class="sentencecase">I display EXACTLY as I'm typed</h3>
<h3 class="underline">This Title is Showing Underlined Text.</h3>

Weight Classes

In addition to the <strong> tag to bold text, you have several font weight classes to choose from. Note: These weight classes will only work if that weight is available in your font.

.weight300 light text | .weight400 normal text | .weight500 slightly bolded text | .weight600 semi-bolded text | .weight700 bolded text

Spacing

There are also many spacing classes available. The natural bottom margin for elements is 1rem [16px]. In addition to this, you have the following spacing classes:

Margins

Margins on Top and Bottom

Margins on Top

Margins on Bottom

Padding

Padding on all Sides

Padding on Top and Bottom

Padding on Top

Padding on Bottom

Padding on Left and Right

Padding on Left

Padding on Right

Responsive Spacing

If you would like your spacing to have different ratios on larger (desktop) viewports, use the above classing system with lg: added to it. For example, pad-y-100 would become lg:pad-y-100.


<section class="pad-y-300 lg:pad-y-1200">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</section>

Width Classes

Height Classes

.height50 | .height100

Positioning Classes

.float-left | .float-right | .position-center

Box Shadows

.has-drop-shadow

Border Radius

.has-border-radius

Images

To Top

Let's put some of those helper classes together to position and style images.

Image Floated Left 25% Width with Drop Shadow

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.


<p><img class="float-left width25 has-drop-shadow" src="images/img-funny.jpg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>

Image Floated Right 50% Width with Border Radius


<p><img class="float-right width50 has-border-radius" src="images/img-funny.jpg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>

Image Centered 75% Width with Drop Shadow and Border Radius


<p><img class="position-center width75 has-drop-shadow has-border-radius" src="images/img-funny2.jpg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>

Videos

To Top

To make an embedded video responsive, add the class .responsive-embed.widescreen to the containing tag.


<p class="responsive-embed widescreen">
   <iframe src="//www.youtube.com/embed/CmzKQ3PSrow" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</p>

Styled Videos

Use utility classes to style videos.

Responsive Video with Drop Shadow

 
 <p class="responsive-embed widescreen has-drop-shadow">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/CmzKQ3PSrow" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 </p>

Responsive Video with Border Radius

 
 <p class="responsive-embed widescreen has-border-radius">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/CmzKQ3PSrow" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 </p>

Play Button

Thumbnail image with clickable play button that opens a video modal.

 
 <p>
   <a class="has-play-btn" data-open="videoSamplePlayButton">
     <img class="display-block width100" src="../images/img-sample-02-650x460.jpg" alt="Two women looking at a tablet together" width="650" height="460">
   </a>
   <div class="reveal reveal--video-modal" id="videoSamplePlayButton" data-reveal data-reset-on-close="true">
     <p class="responsive-embed widescreen">
       <iframe width="560" height="315" src="https://www.youtube.com/embed/CmzKQ3PSrow" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
     </p>
     <button class="close-button close-button--for-video-modal" data-close aria-label="Close modal" type="button"><span aria-hidden="true">&times;</span></button>
   </div>
 </p>

Tables

To Top

Use tables for tabular data.

Your Table Title

Header 1
Header 2


Item 1
Item 2

Item 1
Item 2

Item 1
Item 2

Item 1
Item 2

Item 1
Item 2

 
 Footer 1
 Footer 2
 

Your Table Title
Header 1	Header 2
Item 1	Item 2
Item 1	Item 2
Item 1	Item 2
Item 1	Item 2
Item 1	Item 2
Footer 1	Footer 2


 <table>
   <caption>Your Table Title</caption>
   <thead>
     <tr>
       <th>Header 1</th>
       <th>Header 2</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Item 1</td>
       <td>Item 2</td>
     </tr>
     <tr>
       <td>Item 1</td>
       <td>Item 2</td>
     </tr>
     <tr>
       <td>Item 1</td>
       <td>Item 2</td>
     </tr>
     <tr>
       <td>Item 1</td>
       <td>Item 2</td>
     </tr>
     <tr>
       <td>Item 1</td>
       <td>Item 2</td>
     </tr>
   </tbody>
   <tfoot>
     <tr>
       <td>Footer 1</td>
       <td>Footer 2</td>
     </tr>
   </tfoot>
 </table>

Stacked Table

If you would like your table to stack on small screens, add the class .stack.

Your Table Title

Header 1
Header 2
Header 3


Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Your Table Title
Header 1	Header 2	Header 3
Item 1	Item 2	Item 3
Item 1	Item 2	Item 3
Item 1	Item 2	Item 3


 <table class="stack">
 </table>

Scrolling Table

Got a lot of tubular tabular data? Add a wrapper element with the class .table-scroll around your table to enable horizontal scrolling.

 
 The Four Chrises, Ranked
 
 Rank
 Name
 Famous For
 Best Comedic Role
 Best Dramatic Role
 Most Embarassing Movie
 What Kind of Dog Would They Be
 

 
 1
 Chris Hemsworth
 The MCU, The Cabin in the Woods
 Thor in Thor: Ragnarok
 Nicholas Hathaway in Blackhat
 The Huntsman: Winter's War
 Four-foot-tall labradoodle
 

 2
 Chris Evans
 The MCU, Knives Out
 Jake Wyler in Not Another Teen Movie
 Curtis Everett in Snowpiercer
 Push
 Boston Terrier with a Husky
 

 3
 Chris Pine
 Star Trek, Wonder Woman
 Rex Hanson in Horrible Bosses 2
 Toby Howard in Hell or Highwater
 This Means War
 A Dalmatian
 

 4
 Chris Pratt
 Guardians of the Galaxy
 Andy Dwyer in Parks and Rec
 Scott Hatteberg in Moneyball
 Passengers
 Golden Retriever
 

 
 

The Four Chrises, Ranked
Rank	Name	Famous For	Best Comedic Role	Best Dramatic Role	Most Embarassing Movie	What Kind of Dog Would They Be
1	Chris Hemsworth	The MCU, The Cabin in the Woods	Thor in Thor: Ragnarok	Nicholas Hathaway in Blackhat	The Huntsman: Winter's War	Four-foot-tall labradoodle
2	Chris Evans	The MCU, Knives Out	Jake Wyler in Not Another Teen Movie	Curtis Everett in Snowpiercer	Push	Boston Terrier with a Husky
3	Chris Pine	Star Trek, Wonder Woman	Rex Hanson in Horrible Bosses 2	Toby Howard in Hell or Highwater	This Means War	A Dalmatian
4	Chris Pratt	Guardians of the Galaxy	Andy Dwyer in Parks and Rec	Scott Hatteberg in Moneyball	Passengers	Golden Retriever


 <div class="table-scroll">
   <table>
   </table>
 </div>

Sample of Form Styling

To Top

Buttons

To Top

A basic button can be created using the .btn class. If you'd like your button to be larger, add the class .btn-large.

If you'd like a button in an alternate color, add the class .btn-alt.

Style Guide

Modular Elements

Fonts

Primary FontAa Montserrat

Headings

h1. This is a very large header

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.

h6. This is a tiny header.

Subtitles

This is a large headerI am a subtitle

I am a subtitleThis is a medium header

Paragraphs

Lead Paragraph

Basic Text Highlighting

Typescale

Developer's Hint

Text Alignment

Left Aligned Text

Right Aligned Text

Center Aligned Text

Justify Text

Media Query Dependant Text Alignment

Text CenteredMedium and Up

Text RightLarge and Up

Text Centered / LeftLarge and Up

Links

Dividers

Lists

Unordered List - Basic

Ordered List - Basic

Blockquote

Primary

Base

Gray Accent

White

Black

Heading 5 in Primary Color

Typography Styling

Available Helper Classes

I Have All Uppercase Text.

Nope, I'd Rather be all Lowercase!

How About a Title that is Titlecased?

I display EXACTLY as I'm typed

This Title is Showing Underlined Text.

Weight Classes

Spacing

Margins

Margins on Top and Bottom

Margins on Top

Margins on Bottom

Padding

Padding on all Sides

Padding on Top and Bottom

Padding on Top

Padding on Bottom

Padding on Left and Right

Padding on Left

Padding on Right

Responsive Spacing

Width Classes

Height Classes

Positioning Classes

Box Shadows

Border Radius

Image Floated Left 25% Width with Drop Shadow

Image Floated Right 50% Width with Border Radius

Image Centered 75% Width with Drop Shadow and Border Radius

Styled Videos

Responsive Video with Drop Shadow

Responsive Video with Border Radius

Play Button

Stacked Table

Scrolling Table

Standard Button

Standard Button | Large

Alternate Button

Alternate Button | Large

`.align-justify`

`.align-spaced`