Styleguide

Display 1 - 64 Bold - Google Sans

Display 2 - 42 Bold - Google Sans

This is H1 Heading - 40 Bold - Google Sans

This is H2 Heading - 36 Bold - Google Sans

This is H3 - 28 Bold - Google Sans

This is H4 heading- 24 Bold - Google Sans

This is H5- 20 Medium - Google Sans

Paragraph - 16 Regular - Google Sans

Top Nav Text- 14 Bold - Google Sans

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.

This is paragraph- 14 Medium - Google Sans

This is paragraph- 14 Medium - Google Sans

Colors

313BAC

Primary

FBEBF6

Tone

EDF2F8

Light

EDF2F8 - A5AEBD

Gradient

000000

Black

B0EBE9

Pastel 1

FFF7ED

Pastel 2

EAF9FF

Pastel 3

#FFFFFF

White

Margins And Padding

Margin Bottom 5
Margin Bottom 10
Margin Bottom 15
Margin Bottom 20
Margin Bottom 25
Margin Bottom 30
Margin Bottom 40
Margin Bottom 50
Margin Bottom 60
Margin Bottom 100
Margin Top 5
Margin Top 10
Margin Top 15
Margin Top 20
Margin Top 25
Margin Top 30
Margin Top 40
Margin Top 50
Margin Top 60
Margin Top 100
Padding Bottom 5
Padding Bottom 10
Padding Bottom 15
Padding Bottom 20
Padding Bottom 25
Padding Bottom 30
Padding Bottom 40
Padding Bottom 50
Padding Bottom 60
Padding Bottom 100
Padding Top 5
Padding Top 10
Padding Top 15
Padding Top 20
Padding Top 25
Padding Top 30
Padding Top 40
Padding Top 50
Padding Top 60
Padding Top 100

Text

Color

text-primary
text-primary
text-dark
text-gray

Alignment

text-center
text-right
text-left
d-none

Interactive

Modal

Open Modal

Accordion

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.

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

Single Add-a-Field

+ Add Entry– Remove Entry

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom JS in page settings and apply the below:
  • Add 'dynamic-preference' class to input-group.
  • Add 'dynamic-preference-1' ID to input-group.
  • Add 'first-preference' ID to the input.
  • Add 'add-preference' ID to the add button.
  • Add 'remove-preference' ID to the remove button.
  • Add 'remove-btn' class to the remove button.
  • A 'remove-btn_show' class should exist to set the remove button to show again.

Multi Add-a-Field

+ Add Entry– Remove Entry

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom JS in page settings and apply the below:
  • Add 'dynamic-option' class to input-group_col.
  • Add 'dynamic-option-1' ID to input-group_col.
  • Add 'first-option' ID to the first input.
  • Add 'first-example' ID to the second input.
  • Add 'add-option' ID to the add button.
  • Add 'remove-option' ID to the remove button.
  • Add 'remove-btn' class to the remove button.
  • A 'remove-btn_show' class should exist to set the remove button to show again.

Date Picker

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom CSS and JS in page settings and apply the below:
  • Add 'date' class to the input field.

Step Form w/ Validation

Next
Back

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom JS in page settings and apply the below:
  • Add 'tab1' through tabX to each tab menu link.
  • Add 'to_tab1' through to_tabX to each next or back button.
  • Add 'form-step1' through form-stepX to each tab pane.

International Phone Number Input

Thank you for your submission!

Oops! Something went wrong while submitting the form.
Copy labeled custom CSS and JS in page settings and apply the below:
  • Add 'int-phone' class to the input field.

Custom Card Slider

Heading

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.

Button Text

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text

Heading

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.

Button Text

Heading

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.

Button Text

Heading

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.

Button Text

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button Text
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.

Forms

Light Background

*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Dark Background

*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.