Color Palette

Black

#333333

Primary

#55773E

Secondary

#A5AA59

Tertiary

#F7C960

Error

#ac6a49

Caution

#ddab6f

Tan

#F2E3D5

Gray

#AEB0B5

Light Gray

#F3F3F3

White

#FFFFFF

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

Transparent

Transparent Bottom

Transparent Top

Transparent Both

Typography

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
H1
Class
H2
Class
H3
Class
H4
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
  1. Example Ordered List
  2. Example Ordered List
Unordered List - 1.15rem / 1.5 / Normal
  • Example Unordered List
  • Example Unordered List

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"

Forms

*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

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

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

col
col
col
col

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
col
col
col
col
col
col
col
col
col

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

1
11
2
10
3
9
4
8
5
7
6
6
12

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

1
11
2
10
3
9
4
8
5
7
6
6
12

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

1
11
2
10
3
9
4
8
5
7
6
6
12

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

1
11
2
10
3
9
4
8
5
7
6
6
12

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.

4
8
6
6
3
2
7

Vertical Alignment

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

align-start
align-start
align-start

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

align-center
align-center
align-center

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

align-end
align-end
align-end

Horizontal Alignment

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

justify-start
justify-start

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

justify-center
justify-center

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

justify-end
justify-end

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

justify-between
justify-between

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

justify-around
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

Interactive

What is the sound a doggy makes?

plus

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

m-0
m-md-0
m-sm-0
m-xs-0
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
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
my-0
my-1
my-2
my-3
mb-1
mb-2
mb-3
mt-3
mt-2
mt-1
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
mt-n1
mt-n2
mt-n3
mb-n1
mb-n2
mb-n3
mr-n1
mr-n2
mr-n3
ml-n1
ml-n2
ml-n3

Padding

p-0
p-md-0
p-sm-0
p-xs-0
px-0
px-1
px-2
px-3
pr-0
pr-1
pr-2
pr-3
pl-0
pl-1
pl-2
pl-3
px-md-0
px-md-1
px-sm-0
px-sm-1
px-xs-0
px-xs-1
py-0
py-1
py-2
py-3
pt-0
pt-1
pt-2
pt-3
pb-0
pb-1
pb-2
pb-3
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

text-primary
text-secondary
text-white
text-dark
text-gray
text-center
text-right
text-left
text-center-md
text-center-sm
text-center-xs
font-heading
font-body
uppercase
lowercase

Images

circle
Border-radius
crop-top-left
crop-top-center
crop-top-right
crop-left
crop-center
crop-right
crop-bottom-left
crop-bottom-center
crop-bottom-right
crop-top-left
crop-top-center
crop-top-right
crop-left
crop-center
crop-right
crop-bottom-left
crop-bottom-center
crop-bottom-right
blend-screen
blend-overlay
blend-multiply
Opacity-75
Opacity-50
Opacity-25
Opacity-10

Positioning

position-sticky
position-relative
position-absolute
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

Box-shadow-1
box-shadow-2
Box-shadow-1
Box-shadow-inset-1
box-shadow-inset-2
Box-shadow-inset-3

Other

overflow-hidden
overflow-visible
overflow-auto
visible-md
visible-sm
visible-xs
d-none
d-none
d-block
d-inline-block
d-flex
sr-only
sr-only
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.

Learn More

Animations

slide-up-no-offset
slide-up
slide-up-1
slide-up-2
slide-up-3
slide-up-4
slide-up-5
slide-up-6
slide-left
slide-left-1
slide-left-2
slide-left-3
slide-right
slide-right-1
slide-right-2
slide-right-3
fade-in
fade-in-1
fade-in-2
fade-in-3
grow-in
grow-in-1
grow-in-2
grow-in-3
zoom
zoom-scroll