Layout Dimensions and Style Guide

Layout

Quick Snippets

Horizontal Rule

Apply the "hh-rule" class to a horizontal rule element (hr)

<hr class="hh-rule" />


Lead Paragraph

Apply the "lead" class to a paragraph element (p)

<p class="lead">


Button

Apply the "btn-md" class to an anchor/link element (a)

<a class="btn-md" >

Also try adding the classes "btn-lg" and "btn-sm" to change button sizes

<a class="btn-lg" >
<a class="btn-sm" >


Full Link Button Example
<a class="btn-lg" href="https://www.google.com/"> Google </a>

Open the link in a new window by adding: target="_blank" to the element

<a target="_blank" class="btn-lg" href="https://www.google.com/"> Google </a>

 

Quick Snippets

properties for the "hh-rule" class are as follows:

.hh-rule {
     border-top: 2px solid $black;
     height: 0;
     margin: 0;
}

Colors

Primary 1
#5e2d61

Primary 2
#7b3180

Black
#000000

White
#ffffff

Neutral 1
#333

Neutral 2
#666

Secondary 1
#b0008e

Secondary 2
#3bacee

Secondary 3
#80bb35

Secondary 4
#f12a13

Secondary 5
#fbe61d

Heading Styles

Heading 1
Elements <h1>Heading 1</h1>
Classes <p class="header-1">
Property Values font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 3.625rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 3.125rem;
text-transform: uppercase;

Heading 2
Elements <h1>Heading 2</h1>
Classes <p class="header-2">
Property Values font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 2.75rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 2.4375rem;
text-transform: uppercase;

Heading 3
Elements <h1>Heading 3</h1>
Classes <p class="header-3">
Property Values font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 2.0625rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 2.4375rem;
text-transform: uppercase;

Heading 4
Elements <h1>Heading 4</h1>
Classes <p class="header-4">
Property Values font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 1.625rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.4375rem;
text-transform: uppercase;

Heading 5
Elements <h1>Heading 5</h1>
Classes <p class="header-5">
Property Values font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1rem;
text-transform: uppercase;

Heading 6
Elements <h1>Heading 6</h1>
Classes <p class="header-6">
Property Values font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.25rem;
text-transform: none;

Style 7
Elements no elements, classes only
Classes <p class="style-7">
Property Values font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 2.75rem;
font-weight: 300;
line-height: 3.5rem;

Style 8
Elements no elements, classes only
Classes <p class="style-8">
Property Values font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 1.25rem;
font-weight: 300;
letter-spacing: -0.02em
line-height: 1.375rem;
text-transform: uppercase

Style 9
Elements no elements, classes only
Classes <p class="style-9">
Property Values font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 1rem;
font-weight: 300;
letter-spacing: -0.02em
line-height: 1.125rem;
text-transform: uppercase

Paragraph Styles

Paragraph
Elements <p>Paragraph</p>
Classes <p class="paragraph">
Property Values font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 1rem;
font-weight: 300;
line-height: 1.375rem;
Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.

Lead Paragraph
Elements no elements, classes only
Classes <p class="lead">
Property Values font-size: 1.3125rem;
font-weight: 300;
line-height: 1.9375rem;
Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.

Buttons and Links

Button: Large
Elements no elements, classes only
Classes <p class="btn-lg">
Property Values background: #6e236a;
background: linear-gradient(180deg, #6e236a, #5e2d60);
border-radius: 0;
color: #fff
cursor: pointer;
font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.25rem;
padding: 40px 30px;
text-transform: uppercase;

Button: Medium
Elements no elements, classes only
Classes <p class="btn-md">
Property Values background: #6e236a;
background: linear-gradient(180deg, #6e236a, #5e2d60);
border-radius: 0;
color: #fff
cursor: pointer;
font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.25rem;
padding: 22px 20px;
text-transform: uppercase;

Button: Small
Elements no elements, classes only
Classes <p class="btn-sm">
Property Values background: #6e236a;
background: linear-gradient(180deg, #6e236a, #5e2d60);
border-radius: 0;
color: #fff
cursor: pointer;
font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 0.75rem;
font-weight: 700;
line-height: 0.8125rem;
padding: 8px 10px;
text-transform: uppercase;

Link
Elements <a>Anchor / Link</a>
Classes <p class="link">
Property Values color: #5e2d61;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.25rem;

Title Blog
Elements no elements, classes only
Classes <p class="title-blog">
Property Values color: #5e2d61;
font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 1.625rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.8125rem;
text-transform: none;

Title Event
Elements no elements, classes only
Classes <p class="title-event">
Property Values color: #5e2d61
font-family: "Gotham A", "Gotham B", Arial, sans-serif;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25rem;
text-transform: uppercase;