You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

Typography

Lorem ipsum dolor sit amet

H1 — 48px

Lorem ipsum dolor sit amet ipsum dolor sit amet

H2 — 36px

Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet

H3 — 28px

Lorem ipsum dolor sit amet

H4 — 20px
Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet
H5 — 19px
Lorem ipsum dolor sit amet
H6 — 17px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
paragraph - 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
c-subheadline — 20px
>> Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet <<
block quote — 22px
Lorem ipsum
LINKS — inherit from parent
buttons — 16px
These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Color

Text colors - Neutral

This is some text with a class of is--font-black
font color - black
#1c1c1c
This is some text with a class of is--font-grey-dark
font color - black
#585757
This is some text with a class of is--font-blue-dark
font color - dark blue
#1b2fb8
This is some text with a class of is--font-black
font color - white
#ffffff
This is some text with a class of is--font-black
font color - yellow
#ffe99d
This is some text with a class of is--font-purple-light
font color - purple
#953bed

Text colors - Gradients

This is some text with a class of is--font-gradient-purple
is--font-gradient-purple
GLOBAL CUTOM CSS
This is some text with a class of is--font-gradient-pink-orange
is--font-gradient-pink-orange
GLOBAL CUTOM CSS
This is some text with a class of is--font-gradient-blue-purple
is--font-gradient-blue-purple
GLOBAL CUTOM CSS
This is some text with a class of is--font-gradient-purple-blue
is--font-gradient-purple-blue
GLOBAL CUTOM CSS
Text with a class of is--font-gradient-purple-blue-diag
is--font-gradient-purple-blue-diag
GLOBAL CUTOM CSS
Text with a class of is--font-gradient-purple-blue-diag
is--font-gradient-purple-turq
GLOBAL CUTOM CSS

Main colors

is--bg-purple-main
#8000db
is--bg-grey-light
#c8c8c8
is--bg-white
#ffffff

Neutral colors

is--bg-blue-dark
#1b2fb8
is--bg-turquoise-dark
#05525e
is--bg-purple-dark
#580098

Gradients colors

is--bg-gradient-purple
is--bg-gradient-purple-pink
is--bg-gray-dark-gradient
is--bg-gradient-purple-blue
These are sample logo SVGs that can be downloaded straight from the site, or you could set up a download link that links with the file that's hosted with your cloud storage application of choice.

Logo

Text colors

Main LOGO black
Main LOGO white
These are a few example components.

Components

FAQs, Form

this is a h1 headline inside richtext

this is a h3 headline

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.

  • jksabdkabdhvqdw
  • kndscbjajkbce
  • sajcbkabclcn
  1. sdvkjbekjfbelfnqeö
  2. wdhqeikfbwekfbwkfwf
  3. sdffgsfdbd
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molestiae quas vel sint commodi repudiandae consequuntur

This is a link inside a Blog

  • This is some text inside of a div block.
  1. This is some text inside of a div block.
global classes used as combo classes

Important classes

This is some text inside of a div block.
This div contains many global classes than can be applied to style elements using them as combo classes
This div contains many global classes than can be applied to style elements using them as combo classes
This is some text inside of a div block.