Style Guide

Global Heading tags

All H1 Headings

All H2 Headings

All H3 Headings

All H4 Headings

All h5 Headings
Heading Classes

heading-xlarge

heading-large

heading-medium

heading-small

heading-xsmall
Texts

text-size-large (22px)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

text-size-medium (20px)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

text-size-regular (16px)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

text-size-small (14px)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

text-style-link

text-style-italic
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

text-style-allcaps

text-style-quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni Lorem ipsum dolor sit amet,

text-testimonial (21px to 15px)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius eni

text weights

text-weight-light

text-weight-normal

text-weight-medium

text-weight-semibold

text-weight-bold

text-weight-xbold

text alignments

text-align-left

text-align-center

text-align-right

text alignments

text-color-black

text-color-red

text-color-yellow

text-color-gray

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.

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.

  • Just double-click and easily create content.
  • Just double-click and easily create content.
  • Just double-click and easily create content.
text Spans
(Template specific globals)

text-span-primary

text-span-bubble

Color Palatte
Primary
Primary 2
Text Color
section Backgrounds
Icons Sizes
Icons Sizes
Social media Icons