Style guide

Colours

Primary pink
#FA7BAD
Primary light
#777777
Primary off white
#F8F4F6
Secondary orange
#1A1A1A
Secondary light
#BBBBBB
Secondary off white
#F8F5F4
Off black
#1A1A1A
Mid grey
#777777
Light grey
#F2F2F2
Dark grey
#333333
Grey
#BBBBBB
White
#FFFFFF

Typography

H1 is the primary title Helvetica Neue bold 64px / 72px

H2 is the secondary title Helvetica Neue bold 40px / 48px

H3 is the tertiary title Helvetica Neue bold 32px / 40px

H4 is the quaternary title Helvetica Neue bold 28px / 36px

H5 is the quinary title Helvetica Neue bold 24px / 32px
H6 is the senery title and is Helvetica Neue medium 20px / 28px

The intro paragraph is Helvetica Neue regular lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor aenean luctus auctor lacus 22px / 30px

The lead and blockquote paragraph is Helvetica Neue medium lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor aenean luctus auctor lacus 22px / 30px

The standard paragraph is Helvetica Neue regular lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor aenean luctus auctor lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is a text link, ultrices in ligula at, dictum feugiat neque.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ligula ante, ultrices in ligula at, dictum feugiat neque. Fusce scelerisque purus et metus luctus cursus. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 14px / 22px

The bigger paragraph is Helvetica Neue regular lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor aenean luctus auctor lacus. Duis aute irure dolor in voluptate velit esse cillum dolore eu pariatur 18px / 26px

Category
Category
Label
A text link

Component library

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Rich text element

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. This is a standard paragraph example.

This is a blockquote example. 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.

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. The rich text element allows you to create and format headings
  2. Headings, paragraphs, blockquotes, figures, images, and figure captions
  3. A rich text element can be used with static or dynamic content.
  4. This is an example of an ordered list
  5. An unordered list will look the same, with radio bullets instead of numbers.
  • This is an example of an unordered list
  • An unordered list will look the same, with radio bullets instead of numbers.

Static and dynamic content editing heading 1

You shouldn't need to use an H1 in your content, as a web page should only contain one H1 and it will be in the hero of this page. 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!

Static and dynamic content editing heading 2

The H2 should be your primary title for the rich text content, in place of the H1. 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!

Static and dynamic content editing heading 3

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!

Static and dynamic content editing heading 4

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!

Static and dynamic content editing heading 5

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!

Static and dynamic content editing heading 6

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!

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!

Typography light

H1 is the primary title Helvetica Neue bold 64px / 72px

H2 is the secondary title Helvetica Neue bold 56px / 64px

H3 is the tertiary title Helvetica Neue bold 40px / 48px

H4 is the quaternary title Helvetica Neue bold 32px / 40px

H5 is the quinary title Helvetica Neue bold 24px / 32px
H6 is the senary title and is Helvetica Neue bold 20px / 28px

The intro paragraph is Helvetica Neue regular lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor aenean luctus auctor lacus 24px / 32px

The standard paragraph is Helvetica Neue regular lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor aenean luctus auctor lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is a text link, ultrices in ligula at, dictum feugiat neque.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ligula ante, ultrices in ligula at, dictum feugiat neque. Fusce scelerisque purus et metus luctus cursus. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 18px / 28px

The small paragraph is Helvetica Neue regular lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor aenean luctus auctor lacus. Duis aute irure dolor in voluptate velit esse cillum dolore eu pariatur 14px / 22px

Text colour pink
Text colour orange
Label
A text link