Colors

#260859
#c2cd23
#ebebeb

Typography

Fonts

Montserrat is used throughout the site for headings and body copy.

Headings

Primary heading ("Heading 1")

Secondary heading ("Heading 2")

Tertiary heading ("Heading 3")

Paragraph text. Cookie jelly beans wafer gummi bears chocolate cheesecake liquorice. Caramels sesame snaps topping sweet roll toffee tiramisu gummi bears. Caramels cake jelly-o. Second paragraph to demonstrate inter-paragraph spacing. Icing chocolate cake pie jelly-o. Chocolate bar cookie sweet roll jelly beans. Caramels. Cotton candy powder jujubes bonbon marshmallow jelly candy canes.

Lists

Unordered list
  • Ice cream bonbon.
  • Marzipan gummies.
  • Fruitcake chocolate bar bonbon.
  • Donut soufflé icing dessert carrot cake lollipop fruitcake jelly beans.
  • Candy canes gummies bonbon cupcake cookie chupa chups.
  • Bear claw cake fruitcake tart pudding.
Ordered list
  1. Marzipan marzipan.
  2. Pudding candy pastry lollipop cheesecake bear claw.
  3. Cake cheesecake pudding croissant.
  4. Pudding cupcake tart gummies tootsie roll danish.
  5. Icing chocolate cake pie jelly-o.
  6. Chocolate bar cookie sweet roll jelly beans.
  7. Caramels.
  8. Cotton candy powder jujubes bonbon marshmallow jelly candy canes.
  9. Sweet croissant sugar plum pie jujubes chupa chups wafer. Carrot cake biscuit bonbon.

Blockquotes

Cookie jelly beans wafer gummi bears cheesecake liquorice. Caramels sesame snaps topping sweet roll toffee tiramisu gummi bears. Caramels cake jelly-o.

Links

A standard link. A link within a sentence. A visited link.

UI components

Buttons

For use in the text/HTML editor

<a class="button" href="#">Read more</a>
Read more 
<a class="button giant" href="#">Read more</a>
Read more

For use in the visual editor

Basic usage
[button url="https://example.com" text="Read more"]
Read more
Force it to open in a new tab/window
[button url="https://example.com" text="Read more" new-window="true"]
Read more
Add extra classes
[button url="https://example.com" text="Read more" class="additional-class-name another-additional-class-name"]
Read more

Forms

Layout classes

Utility CSS classes

center
Centers block-level elements with fixed widths.
clear
Makes element automatically clear its child elements, so you don't need to add additional markup. The clearfix is a way to combat the zero-height container problem for floated elements.
invert
Makes the content white; this is a useful class to apply to a row with a dark background.

Image Sizes

Banner Images

For general banner images, we recommend uploading them at 1920x600 pixels. However, a large library of banner images has been included for you in the media library.

Featured Images for Blog Posts

We recommend using featured images that are 1200x800 pixels for blog posts.

Team Photos

For team member headshots, we recommend using images that are 800x700 pixels. Images will be automatically cropped.

Social Media Images

For social share images, we recommend a standard size of 1200x630 pixels.