👋 Welcome to your site style guide.

This is a quick and easy reference for the general styles, text, and colors that define the overall look and feel of your website. We've also included instructions on how to achieve specific effects.

In case you missed it:
Your site also has an Elements Library, which contains a reference library of saved sections and modules.

Color Palette

These are the colors (and corresponding hex codes) that are used throughout this website.

#192E43

#35BEAD

#D0603A

#c7b784

#66cfeb

#e5eaef

Heading Styles

Your heading font is called Font Name and Link.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Text Styles

Your general body font is called Font Name and Link.

This is what normal text looks like.
This is bold text.
This is italicized text.
This is a link.

This is a blockquote.

 

Unordered list:

  • This is an unordered list item.
  • This is another unordered list item.

 

Ordered list:

  1. This is an ordered list item.
  2. This is another ordered list item.

This is extra large text. You can make text like this by using the xlarger css class.

This is larger text. You can make text like this by using the larger css class.

This is smaller text. You can make text like this by using the smaller css class.

This is what normal text looks like.
This is bold text.
This is italicized text.
This is a link.

This is a blockquote.

 

Unordered list:

  • This is an unordered list item.
  • This is another unordered list item.

 

Ordered list:

  1. This is an ordered list item.
  2. This is another ordered list item.

This is extra large text. You can make text like this by using the xlarger css class.

This is larger text. You can make text like this by using the larger css class.

This is smaller text. You can make text like this by using the smaller css class.

Background Colors

You can assign predefined background colors by updating a row or column with the classes indicated below. If you manually set a background color in the page builder, it will automatically override your class.

This has the classes bg-main and invert

This has the class bg-light

This has the classes bg-dark and invert

Button Styles

These are the built-in button styles. The text of each button below is the same as the CSS class you need to assign to achieve the desired look. For example, if you set the class of a button to be alt-button, it will look like the alt-button below.

Inverted Button Styles

These are the button styles when combined with the invert class. In some instances, these styles can be useful when displaying a button on a dark background. To use an inverted button, add invert as a class, in addition to any other appropriate classes. In some cases, the default and inverted versions of a button may (intentionally) look the same.

Alt Button Styles

These are the button styles when combined with the bg-main class. In some instances, these styles can be useful when displaying a button on a dark background. To use an inverted button, add bg-main as a class to the column or row, in addition to any other appropriate classes. In some cases, the default and inverted versions of a button may (intentionally) look the same.

Resizing Buttons

You can change the size of a button by using the classes larger or smaller. You can also combine these with other button classes, for a wide range of style and size combinations.

Image Sizes & Dimensions

When you upload an image to the site, it's important to make sure that it's the right dimensions (or approximately so). This will help speed up load time and make your site more accessible to people on slower connections.

Page Banners (Featured Image)

1920x960px (approx)

Your featured images are also used as your page banners. If you upload a significantly different size, it may appear blurry, take a long time to load, or be cropped in an unusual way.

Headshots

600x600px (approx)

Ideally, headshots should be cropped before uploading. If you upload an alternate size, it may be cropped automatically.

Inline Images

1200px wide (approx)

Inline images go within your content, and are not intended to display at the full width of the page.