Color Palette

Primary Colors

Black

#000000

Primary

#4d4d4d

Secondary

#aeb0b5

Tertiary

#eeeeee

Pistacio

#92c078

Maize

#e5df42

Imperial Red

#e33d3d

Gray

#aeb0b5

Light Gray

#eeeeee

White

#f5f5f5

Gradients

Dark

#333333 - #6d6d6d

Primary

#595959 - #a9a9a9

Secondary

#a0a0a0 - #f0f0f0

Tertiary

#c9c9c9 - #f9f9f9

Gray

#bebebe - #fefefe

Top

#eeeeee - #f5f5f5

Bottom

#f5f5f5- #eeeeee

Both

#eeeeee - #f5f5f5 - #eeeeee

Transparency

Transparent

Bottom

Top

Both

Typography

Headings

Typeface

georgia

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.4375rem / 1.25 / Bold

h1

Element - 2.125rem / 1.25 / Bold

H2

Element - 1.3125rem / 1.25 / Bold

H3

Element - 1.3125rem / 1.25 / Normal

H4

Class

Body

Typeface

Montserrat (Regular)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

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

Blockquote - 2.125rem/ 1.5 / Bold Italic

Lorem ipsum dolor sit amen

Paragraph - 1.125rem / 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 - 1.15rem / 1.5 / Normal

Example Ordered List
Example Ordered List

Unordered List - 1.15rem / 1.5 / Normal

Example Unordered List
Example Unordered List

Special Characters

Greek Uppercase

ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ

Greek Lowercase

ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ

Miscellaneous

§ß∞æ∂ƒœςѲҖҜфюљжγ

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”

Alt Typography

Headings

Typeface

Montserrat (Bold)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Note: In order to use these fonts, you must use the class "alt-heading" with any heading element or heading class.

Element - 3.4375rem / 1.25 / Bold

h1

Element - 2.125rem / 1.25 / Bold

H2

Element - 1.3125rem / 1.25 / Bold

H3

Element - 1.3125rem / 1.25 / Normal

H4

Class

Body

Typeface

Georgia (Regular)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Note: In order to use these fonts, you must use the class "alt-body" with any body element or body class.

Blockquote - 2.125rem/ 1.5 / Bold Italic

“Lorem ipsum dolor sit amen”

Paragraph - 1.125rem / 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 - 1.15rem / 1.5 / Normal

Example Ordered List
Example Ordered List

Unordered List - 1.15rem / 1.5 / Normal

Example Unordered List
Example Unordered List

Alt Rich Text

All H1 Headings

All H2 Headings

All H3 Headings

All H4 Headings

Static and dynamic content editing

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

btn Primary Secondary W-100

btn Small Primary Secondary

Text Link

Dark Background

btn Primary Secondary W-100

btn 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 (LG)

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

Grid - Tablet (MD)

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

Grid - Mobile Landscape (SM)

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

Grid - Mobile Portrait (XS)

To define our 12 column grid for mobile portrait, all classes must precede with the initial class of "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

button

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

object-fit

object-contain

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

invert

grayscale

brighten

contrast

Opacity-75

Opacity-50

Opacity-25

Opacity-10

Positioning

Position

position-sticky

position-relative

position-absolute

Absolute Positioning

top-left

top-center

top-right

center-left

center-center

center-right

bottom-left

bottom-center

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

Hidden-md

Hidden-sm

Hidden-xs

visible-md

visible-sm

visible-xs

Display

d-none

d-block

d-inline-block

d-flex

Z-Index

z-index-1

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.