STYLE GUIDE - COZY

Typography

Heading 1

Class: All H1 Headings
Font-size: 34px
Line-height: 24px

Heading 2

Class: All H2 Headings
Font-size: 3opx
Line-height: 25px

Heading 3

Class: All H3 Headings
Font-size: 28px
Line-height: 25px

Heading 4

Class: All H4 Headings
Font-size: 24px
Line-height: 1.6 EM
Heading 5
Class: All H5 Headings
Font-size: 14px
Line-height: 25px
Heading 6
Class: All H6 Headings
Font-size: 12px
Line-height: 18px

This is a paragraph element. We have some placeholder text here to show what a paragraph looks like.

Class: All Paragraphs
Font-size: 14px
Line-height: 40px
This is a text link
Class: text-link
Font-size: 14px
Line-height: 20px
THIS IS A BUTTON
Class: button
Font-size: 14px
Line-height: 20px
Padding top and bottom: 18px
Padding left and right: 36px
Letter spacing: 2px
Class: Full nav button
Combo class: outline
Font-size: 16px
Line-height: 20px
Background: Transparent
Padding top and bottom: 18px
Padding left and right: 36px
Letter spacing: 2px
this is a button
Class: button 2
Font-size: 14px
Line-height: 20px
Padding top and bottom: 18px
Padding left and right: 36px
Letter spacing: 2px

Colors

Class: text-color
Color: #ffffff
Class: primary-color
Color: #1a1e29
Class: secondary-color
Color: #394c5a
Class: light-color
Color: #8697a2

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.

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.

heading 3