StyleGuide

Habit Weekly Styleguide for making sure New Design is all Consistent

Colours

Wavy Blue-purple
4 Colors
AAA
HW Blue
203AD0
AAA
Dark
#202020
AAA
Element White Global
#B3B3B3
AAA
Grey
EBEBED
AAA
BG-Light Grey (Background) Global
AAA
#f1f1f1
Blur-Grey on element
#f1f1f1
AAA
Blur-Grey on element
#f1f1f1
AAA
Blur-Grey on element
#f1f1f1
AAA
Button Gradient
3 colors
AAA

Text Field

Rich 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.

  1. test

Static and dynamic content editing

Static and dynamic content editing

Static and dynamic content editing

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.

  • Test
  • test

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.

  1. test

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.

  • Test
  • test
HEader H1 - New 70px

h1 New This Month

HEader H2 32px

h2 Ongoing Event

HEader H3 20px (Both Medium & Reg)

h3 Ongoing Event

HEader h4 Button Text 18px
h4 Button Text
HEader h5 - Normal Paragraph
h5 Normal Paragraph Text
HEader h6 - 18px
h5 Normal Paragraph Text
Paragraph 16
Paragraph Normal Paragraph Text
Text Input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Elements

radio button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Primary Button
Learn More
Learn more