Style Guide

Colors
A complete color swatch used to color all interface elements on the website.
Theme Colors
Primary 1
#068466
Primary 2
#FC9F5B
Primary 3
#001E42
Grays
Gray 1
#272929
Gray 2
#62636B
Gray 3
#ECEBEA
Gray 4
#F8F6F4
Feedback
Success
#57A773
Warning
#F19953
Error
#ED6A5E
Buttons
Component, text style and size variations
Typography
Headings, body and other common text elements.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Heading Six - Class H6 Small
Text Large   
Link Large
Body Text  
Body Link
Small Text   
Small Link
text caps
Lists
Headings, body and other common text elements.
Unstyled <ul>
  • Dope
  • Sick
  • Amazing
Colored Bullets
  • Dope
  • Sick
  • Amazing
Checklist
  • Dope
  • Sick
  • Amazing
Article
Headings, body and other common text elements.

H2 Heading

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.

H3 Heading

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!

H4 Heading

H5 Heading
H6 Heading
Writing result-oriented ad copy is difficult, as it must appeal to, entice, and convince consumers to take action. There is no magic formula to write perfect ad copy.

Headings, paragraphs, links, 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.

  1. Topic 1 Lorem Ipsum sometimes feel a bit scary: getting out of our comfort zone is often a challenge that can leave us feeling anxious.
  2. Topic 2 Lorem Ipsum sometimes feel a bit scary: getting out of our comfort zone is often a challenge that can leave us feeling anxious

Headings, paragraphs, links, 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.

Icons - Interface
Headings, body and other common text elements.
Chevron
Icons - Social
Icons for popular social networks.
Badges
Combine with other components to display metadata
Default
Badge Text
Theme Colors
Primary 1
Primary 2
Primary 3
Feedback Colors
Success
Warning
Error
Cards
A multipurpose component used to display content in boxed format.
Default Styles
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Foot
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
Form Inputs
Styles for form inputs and form feedback states.
Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Hint Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio & Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Feedback
Shadows
Preset styles to imply depth on interface components
Shadow Small
Shadow
Shadow Large
Tooltips
Provide additional information in a small pop-up.
Hover on this icon
?
Here is a message to help explain the content.
Avatars
Multiple sizes and styles to represent users around the interface.
Avatar Sizes
JAUMO Community Review WiliamJAUMO Community Review WiliamJAUMO Community Review Wiliam
Avatar Group
JAUMO Community Review WiliamJAUMO Community Review KelaJAUMO Community Review EmmaJAUMO Community Review Jay
Avatar Indicators
JAUMO Community Review Wiliam
JAUMO Community Review Sally
JAUMO Community Review Kela
Avatar with name
JAUMO Community Review Emma
Katherine Cho