Style Guide

Colors

Hex Values

$navy-dk
#081b40
$navy
#092f57
$red
#eb3434
$green
#bdd32f
$pink
#e03287
$white
#fff
$off-white
#eee9e5
$gray-10
#e5e5e5
$gray-20
#c9c9c9
$gray-60
#676767
$gray-90
#353434
$black
#000

Classes

default Paragraph Text

.navy Paragraph Text

.navy-dk Paragraph Text

.red Paragraph Text

.green Paragraph Text

.pink Paragraph Text

.white Paragraph Text

.off-white Paragraph Text

Background Styles

.bg--texture
.bg--navy
.bg--pink
.bg--green
.bg--red

Font Styles

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

H1 Heading Styles.

H2 Heading Styles.

H3 Heading Styles.

H4 Heading Styles.

H5 Heading Styles.
H6 Heading Styles.


h1.fancy

Fancy Text

h4.expanded

Expanded Text Width

Body Styles


p.big

Big body copy is great for intros on pages.


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.small

Small body copy is best for menu item 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.secondary


p .button a

.button

.button.secondary

button


input[type="submit"]


Content Blocks

Accordion Block

Phasellus molestie magna non est bibendum non venenatis nisl tempor. 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. Donec congue.

Phasellus molestie magna non est bibendum non venenatis nisl tempor. 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. Donec congue.

Centered Standard Text Block

This is a text block that has the Layout set to Centered. Phasellus molestie magna non est bibendum non venenatis nisl tempor. 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. Donec congue.

Left Aligned Standard Text Block

This is a text block that has the Layout set to Left. Phasellus molestie magna non est bibendum non venenatis nisl tempor. 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. Donec congue.

Locations Blocks

Opening Fall 2020!

Cary Crossroads

Cary, NC

Page Preview Blocks

Text & Image Blocks

This is a text + image block that has the image set to the Left and is sized to 50%. Phasellus molestie magna non est bibendum non venenatis nisl tempor. 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. Donec congue.

This is a text + image block that has the image set to the Right and is sized to 25%. Phasellus molestie magna non est bibendum non venenatis nisl tempor. 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. Donec congue.

Columns of Text

Passion

The Heart

Phasellus molestie magna non est bibendum non venenatis nisl tempor. 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. Donec congue.

Passion

The Heart

Phasellus molestie magna non est bibendum non venenatis nisl tempor. 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. Donec congue.

Passion

The Heart

Phasellus molestie magna non est bibendum non venenatis nisl tempor. 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. Donec congue.