Style Guide

Content Blocks

Optional Caption

Two Column Layouts

Two Column Layouts have the ability to display two text columns, two photo columns, or a mix of the two. You can set the rotation of the photo to give it some *spice*.

You can also customize the text within the editor, similar to the Text Block.

Text Blocks

Text Blocks can have a Small, Medium, Large or Full width. You can also add a background pattern, color or photo. You can also style your text, add buttons and more within the editor.

Button

Single Image Blocks are a great way to break up page content.

Colors

Hex Values

$primary
#005D8C
$secondary
#37A8B2
$accent
#A5DADB
$black
#000
$white
#fff
$text
#4F4F4F
$border
#BDBDBD
$off-white
#FFF9EE

Classes

default Paragraph Text

.primary Paragraph Text

.secondary Paragraph Text

.accent Paragraph Text

.black Paragraph Text

.white Paragraph Text

.text Paragraph Text

.border Paragraph Text

.off-white Paragraph Text

Background Textures

.bg--pattern
.bg--texture
.bg--secondary
.bg--accent

Font Styles

Font Families


Body Copy

Fugue Mono



Heading Font

Avenir Next Pro Bold



Alternate Heading (.alt)

BN Rendall Script



Heading Styles

Achieve these styles by using: h1, .h1, or span.h1



I am an H1 Heading

I am an H2 Heading

I am an H3 Heading

I am an H4 Heading

I am an H5 Heading

Body Styles


p

This is the default size and styling for paragraph body copy throughout the site. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue.


p.big

Big body copy styling for paragraph body copy throughout the site. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue.


p.small

Best used for descriptions.


p a

This text is a hyperlink


mark

This text is highlighted.


blockquote
"Blockquote suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio."
Blockquote Footer, Author

Lists

  • This is an Unordered List.
  • This is an Unordered List.
    • This is a nested Unordered List.
    • This is a nested Unordered List.
  • This is an Unordered List.
  • This is an Unordered List.
  • This is an Unordered List.
  1. This is an Ordered List.
  2. This is an Ordered List.
    1. This is a nested Ordered List.
    2. This is a nested Ordered List.
  3. This is an Ordered List.
  4. This is an Ordered List.
  5. This is an Ordered List.

Logos

Form Elements


Buttons & Styled Links


p a.button

.button .button.button__secondary


p a span.button

Button Secondary Button


p span.button a

Button Secondary Button


button


input[type="submit"]