Color Palette

Colors

Black

#333333

Primary

#55773E

Secondary

#A5AA59

Tertiary

#F7C960

Error

#ac6a49

Caution

#ddab6f

Tan

#F2E3D5

Gray

#AEB0B5

Light Gray

#F3F3F3

White

#FFFFFF

Gradients

Dark Gradient

#333333 - #55773E

Primary Gradient

#A5AA59 - #55773E

Secondary Gradient

#ac6a49 - #ddab6f

Tertiary Gradient

#F7C960 - #ddab6f

Primary Gradient Top

#F7C960 - #ffffff

Primary Gradient Bottom

#ffffff - #F7C960

Primary Gradient Both

#F7C960 - #ffffff - #F7C960

Secondary Gradient Top

#A5AA59 - #ffffff

Secondary Gradient Bottom

#ffffff - #A5AA59

Secondary Gradient Both

#A5AA59 - #ffffff - #A5AA59

Transparency

Transparent

Transparent Bottom

Transparent Top

Transparent Both

Typography

Headings

Typeface

FatFrank

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Note: It is a best practice to only using H1-H4 heading levels to maintain clear hierarchies and create more minimal layout structures.

Element - 3.5rem / 1.25 / Normal

H1

Element - 2.5rem / 1.25 / Normal

H2

Element - 1.5rem / 1.25 / Normal

H3

Element - 1rem / 1.25 / Normal

H4

Class

Body

Typeface

Co Text

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Note: The body font should be set on the root 'Body (All Pages)' tag.

Blockquote - 1.5rem/ 1.5 / Normal

Lorem ipsum dolor sit amen

Paragraph - 1rem / 1.5 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Italic - Italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bold - Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph Small (text-small) - 0.8rem / 1.5 / Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ordered List - 1rem / 1.5 / Normal

Example Ordered List
Example Ordered List

Unordered List - 1.15rem / 1.5 / Normal

Example Unordered List
Example Unordered List

Rich Text

All H1 Headings

All H2 Headings

All H3 Headings

All H4 Headings

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

"This is a block quote"

Buttons

Light Background

Default Primary Secondary W-100

Default Small Primary Secondary

Text Link

Dark Background

Default Primary Secondary W-100

Default Small Primary Secondary

Text Link

Forms

Light Background

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Dark Background

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Cards

Standard Cards

Cepteur sint occaecat cupidatat non proident, sunt in culpa qui

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Cepteur sint occaecat cupidatat non proident, sunt in culpa qui

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Cepteur sint occaecat cupidatat non proident, sunt in culpa qui

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

Responsive Grid

Full Width Container

Define your div with a class of "container-fluid" for full width.

col

Getting Started

Columns need to be nested within a "row". All columns start off at equal-widths by defining the class of "col" and auto-collapse at the mobile portrait breakpoint if no responsive classes are defined.

col

Grid - Desktop

To define our 12 column grid for desktop, all classes must precede with the initial class of "col" + "col-lg-(1-12)"

Grid - Tablet (Breakpoint)

To define our 12 column grid for tablet, all classes must precede with the initial class of "col"+ "col-md-(1-12)"

Grid - Mobile Landscape (Breakpoint)

To define our 12 column grid for mobile landscape, all classes must precede with the initial class of "col"+ "col-sm-(1-12)"

Grid - Mobile Portrait (Breakpoint)

To define our 12 column grid for mobile portrait, all classes must precede with the initial class of "col"+ "col-xs-(1-12)"

Column Wrapping

If responsive columns are placed within a single row and which the total result in greater then 12, they will automatically wrap onto a new line.

Vertical Alignment

Align-Start

To align columns from the top, combine a class of "align-start" with any other class with a predefined height

align-start

Align-Center

To align columns from the center, combine a class of "align-center" with any other class with a predefined height

align-center

Align-End

To align columns from the bottom, combine a class of "align-end" with any other class with a predefined height

align-end

Horizontal Alignment

Justify-Start

To justify columns to the left, use the "justify-start" class

justify-start

Justify-Center

To justify columns to the center, use the "justify-center" class

justify-center

Justify-End

To justify columns to the right, use the "justify-end" class

justify-end

Justify-Between

To evenly space columns between each-other, use the "justify-between" class

justify-between

Justify-Around

To evenly space columns around each-other, use the "justify-around" class

justify-around

Self-Align Columns

To individually self-align columns, combine a class of "self-start", "self-center", "self-end" preceded by the by class of "col"

self-start

self-center

self-end

Column Reordering

To individually reorder columns in a row, simply define the order on each viewport size

order-lg-last

order-lg-first

order-md-last

order-md-first

order-sm-last

order-sm-first

order-xs-last

order-xs-first

Navigation

Landing Page Navigation

Interactive

Modal

Open Modal

Accordion

What is the sound a doggy makes?

Woof...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Custom Card Slider

Copy labeled custom CSS and JS in page settings and apply the below:

Add 'card-slider_wrapper' class to list wrapper element (or collection list wrapper element).
Add 'owl-carousel, owl-theme, and card-slider' classes to the list item (or collection list element).
Add 'card-slider_item' to the single card element (or collection item element).
Create separate nav wrapper element and add class 'card-slider_nav'.
Add 'card-slider_left' ID to the left nav button within the 'card-slider_nav' wrapper.
Add 'card-slider_right' ID to the right nav button within the 'card-slider_nav' wrapper.

Margin

Margin (X&Y Axis)

m-0

Margin (X&Y Axis + Responsive)

m-md-0

m-sm-0

m-xs-0

Margin (X-Axis)

mx-auto

mx-0

mx-1

mx-2

mx-3

mr-0

mr-1

mr-2

mr-3

ml-0

ml-1

ml-2

ml-3

Margin (X-Axis + Responsive)

mx-md-auto

mx-sm-auto

mx-xs-auto

mx-md-0

mx-md-1

mx-sm-0

mx-sm-1

mx-xs-0

mx-xs-1

Margin (Y-Axis)

my-0

my-1

my-2

my-3

mb-1

mb-2

mb-3

mt-3

mt-2

mt-1

Margin (Y-Axis + Responsive)

my-md-0

my-md-1

my-md-2

my-md-3

my-sm-0

my-sm-1

my-sm-2

my-sm-3

my-xs-0

my-xs-1

my-xs-2

my-xs-3

Negative Margin (Y-Axis)

mt-n1

mt-n2

mt-n3

mb-n1

mb-n2

mb-n3

Negative Margin (X-Axis)

mr-n1

mr-n2

mr-n3

ml-n1

ml-n2

ml-n3

Padding

Padding (X&Y Axis)

p-0

Padding (X&Y Axis + Responsive)

p-md-0

p-sm-0

p-xs-0

Padding (X-Axis)

px-0

px-1

px-2

px-3

pr-0

pr-1

pr-2

pr-3

pl-0

pl-1

pl-2

pl-3

Padding (X-Axis + Responsive)

px-md-0

px-md-1

px-sm-0

px-sm-1

px-xs-0

px-xs-1

Padding (Y-Axis)

py-0

py-1

py-2

py-3

pt-0

pt-1

pt-2

pt-3

pb-0

pb-1

pb-2

pb-3

Padding (Y-Axis + Responsive)

py-md-0

py-md-1

py-md-2

py-md-3

py-sm-0

py-sm-1

py-sm-2

py-sm-3

py-xs-0

py-xs-1

py-xs-2

py-xs-3

Text

Color

text-primary

text-secondary

text-white

text-dark

text-gray

Alignment

text-center

text-right

text-left

Responsive Alignment

text-center-md

text-center-sm

text-center-xs

Font

font-heading

font-body

uppercase

lowercase

Images

Borders

circle

Border-radius

Object Sizing

crop-top-left

crop-top-center

crop-top-right

crop-left

crop-center

crop-right

crop-bottom-left

crop-bottom-center

crop-bottom-right

Cropping

crop-top-left

crop-top-center

crop-top-right

crop-left

crop-center

crop-right

crop-bottom-left

crop-bottom-center

crop-bottom-right

Filters & Opacity

blend-screen

blend-overlay

blend-multiply

Opacity-75

Opacity-50

Opacity-25

Opacity-10

Positioning

Position

position-sticky

position-relative

position-absolute

Absolute Positioning

position-absolute + top-left

position-absolute + top-center

position-absolute + top-right

position-absolute + center-left

position-absolute + center-center

position-absolute + center-right

position-absolute + bottom-left

position-absolute + bottom-center

position-absolute + bottom-right

Box Shadows

Outside

Box-shadow-1

box-shadow-2

Box-shadow-1

Inside

Box-shadow-inset-1

box-shadow-inset-2

Box-shadow-inset-3

Other

Overflow

overflow-hidden

overflow-visible

overflow-auto

Visibility

visible-md

visible-sm

visible-xs

Display

d-none

d-block

d-inline-block

d-flex

Prevent Style Clean Up

sr-only

stretch-link

Add-a-field Unhide

Internet Explorer Card Fixes

Set both the 'card' and 'card-body' classes to display:block only in IE to prevent text overflow and layout shift issues due to Flexbox.