Style Guide

A complete guide to all Creative Huddle modular interface elements.

Benefits Cards

Simple cards with initial details

Insights Cards

Simple cards with initial details
Rich Text
Rich text blocks used in dynamic content

What’s a Content Block?

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.

Heading Five can be used for examples. 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!
Image caption

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.

  • Bullet one
  • Bullet two
  • Bullet three

Normal text

What’s a Rich Text element?

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.

  • Bullet 1
  • Bullet 2
  • Bullet 3

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!
Image caption

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.

  1. one
  2. two
  3. three
Heading Five can be used for examples. 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!
Heading Six can be used for examples. 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!

What’s a Rich Text element?

  • Key Bullet 1
  • Key Bullet 2
  • Key Bullet 3
Colors
A complete color swatch used to color all interface elements on the website.
Theme Colors
Steel Blue
#489BBF
Yellow
#F3AF3E
Lime
#9DB455
Lilac
#E5DDE6
Red
#D2646A
Grays
Text
#222525
Blue Grey BG
#F5F8FA
Gray 3
#ECEBEA
Feedback
Green
#57A773
Orange
#F87F1E
Red
#D2646A
Blue Grey
#F5F8FA
Buttons
Component, text style and size variations
Typography
Headings, body and other common text elements.

Heading One 54px

Heading Two 40px

Heading Three 26px

Heading Four 20px

Heading Five 18px, Lilac BG & 10px padding
Heading Six 16px
Heading Six - Caps
Text Large   
Body Text 16px 
Small Text 16px 
text caps
Lists
Headings, body and other common text elements.
Unstyled <ul></ul>
  • Dope
  • Sick
  • Amazing
Colored Bullets
  • Dope
  • Sick
  • Amazing
Checklist
  • Dope
  • Sick
  • Amazing
Icons - Interface
Headings, body and other common text elements.
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
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
Avatar Group
Avatar Indicators
Avatar with name
Katherine Cho