Global Styles

Below is a look at the global styles for various elements. Click on any element and click “Style” on the editor panel on the left to view how it is setup.

HEADING TYPOGRAPHY

Heading 7XL

Heading 6XL

Heading ​5XL

Heading 4XL

Heading 3XL

Heading 2XL

Heading XL

Heading LG

BODY TYPOGRAPHY

Text 7XL

Text 6XL

Text 5XL

Text 4XL

Text 3XL

Text 2XL

Text XL

Text LG

BUTTONS OUTLINE

CONTAINER

KEY:

PURPLE – SECTION

 

RED – CONTAINER

 

GREEN – ELEMENT/WIDGET

CONTAINER

This is a < h1> Heading < / h1> But Looks Like an H5 or H6

This is also an < h1> Heading < / h1> But It Looks Like Body Text

And this is an < h6> Heading < / h6> But It *Looks* Like an H1

This is a < p> Paragraph Element < / p> But It Also *Looks* Like an H1

Think of the globals for text as just the *look* of them but not the actual markup.

Example H1 Heading with Bold and Normal Font Weights

CONTAINER

PARENT Centers Both INNER CONTAINERS Horizontally

THE HEADING FOR SEO

Your Awesome USP Heading Here

A paragraph here about who you are and what you do.

THE HEADING FOR SEO

Your Awesome USP Heading Here

A paragraph here about who you are and what you do.

Another H3 Heading

Some text here and there.

An H4 Heading Here

Maybe we want another section but this time center the content vertically

Some text here and there.

An H4 Heading Here

WIDGETS but with PADDING

Some text here and there.

An H4 Heading Here

WIDGETS but with MARGIN

Some text here and there.

An H4 Heading Here

THE HEADING FOR SEO

Your Awesome USP Heading Here

A paragraph here about who you are and what you do.

An H3 Heading

Some text here and there.

An H3 Heading

Some text here and there.

An H3 Heading

Some text here and there.

Maybe we want another section but this time center the content vertically

Some text here and there.

An H4 Heading Here