Sections

Grid

Container

Basic classes

This page holds the basic elements that are global to your project.
Add as many basic elements as your project needs on this page. Remember that basic classes are named with only 3 letters.
Learn more about basic classes and how to name them.

Code

Used in The System pages to show class names.

Cod

Class Name

Box

This is used in the The System pages to visualize classes with dimensional values

Box

Grid

[Grid]

Container

[Container]

maxW / 90 rem

[Container] Inner x Large

maxW / 59.25 rem

[Container] Inner x Medium

maxW / 44 rem

[Container] Inner x Small

maxW / 28.5 rem

[Container] Inner x Left

[Container] Inner x Right

Section

[Section] H Wrapper

Desktop / 2.5 rem - Tab 2/rem - Mobile 1.5 rem

[Section] V Wrapper

[Section] V Wrapper x Reduced

[Section] V Wrapper x Small

Vertical

Vertical / 2XS

Vertical / XS

Vertical / S

Vertical / M

Vertical / L

Vertical / XL

Vertical / 2XL

Vertical / 3XL

Vertical / 4XL

Vertical / 5XL

Vertical / 7XL

Horizontal spacing

Horizontal / 2XS

Horizontal / XS

Horizontal / S

Horizontal / M

Horizontal / L

Horizontal / XL

Horizontal / 2XL

Horizontal / 3XL

Horizontal / 4XL

Horizontal / 5XL

Horizontal / 6XL

Horizontal / 7XL

Padding

Padding / 2XS

Padding / XS

Padding / S

Padding / M

Padding / L

Padding / XL

Padding / 2XL

Padding / 3XL

Padding / 4XL

Padding / 5XL

Direction Classes

padding-bottom

padding-top

padding-vertical

padding-horizontal

padding-left

padding-right

Size Classes

padding-0

padding-tiny

padding-xxsmall

padding-xsmall

padding-small

padding-medium

padding-large

padding-xlarge

padding-xxlarge

padding-huge

padding-xhuge

padding-xxhuge

padding-custom1

padding-custom2

padding-custom3

Spacers

spacer-tiny

spacer-xxsmall

spacer-xsmall

spacer-small

spacer-medium

spacer-large

spacer-xlarge

spacer-xxlarge

spacer-huge

spacer-xhuge

spacer-xxhuge

Margins

Direction Classes

margin-bottom

margin-top

margin-vertical

margin-horizontal

margin-left

margin-right

Size Classes

margin-0

margin-tiny

margin-xxsmall

margin-xsmall

margin-small

margin-medium

margin-large

margin-xlarge

margin-xxlarge

margin-huge

margin-xhuge

margin-xxhuge

margin-custom1

margin-custom2

margin-custom3

Ratio

Ratio / Panorama

Ratio / Panorama Tab

Ratio / Panorama Mob

Ratio / Landscape

Ratio / Landscape Tab

Ratio / Landscape Mob

Ratio / Standard

Ratio / Standard Tab

Ratio / Standard Mob

Ratio / Tall

Ratio / Tall Tab

Ratio / Tall Mob

Ratio / Skyscraper

Ratio / Skyscraper Tab

Ratio / Skyscraper Mob

Link

<a>

In The System inline links are styled on the tag level. This way we create a global link style that then can be overriden when needed.

Lnk

Heading

<H1>

H1 Tag

Heading / H1

H1 Class

<H2>

H2 Tag

Heading / H2

H2 Class

<H3>

H3 Tag

Heading / H3

H3 Class

<H4>

H4 Tag

Heading / H4

H4 Class

<H5>

H5 Tag

Heading / H5

H5 Class

<H6>

H6 Tag

Heading / H6

H6 Class

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Font Size / M

Font Size / L

Font Size / XL

Align

Align / Left

This text aligns to the left in desktop breakpoint and smaller ones.

Align / Left Tab

This text aligns to the left in tablet and smaller breakpoints.

Align / Left Mob

This text aligns to the left in in mobile, landscape and portrait.

Align / Center

This text aligns to the center in desktop breakpoint and smaller ones.

Align / Center Tab

This text aligns to the center in tablet and smaller breakpoints.

Align / Center Mob

This text aligns to the center in in mobile, landscape and portrait.

Align / Right

This text aligns to the right in desktop breakpoint and smaller ones.

Align / Right Tab

This text aligns to the right in tablet and smaller breakpoints.

Align / Right Mob

This text aligns to the right in in mobile, landscape and portrait.

Line Height

Line Height / XS

This text has a line-height of 1 (unitless) in desktop breakpoint and smaller ones.

Line Height / XS Tab

This text has a line-height of 1 (unitless) in tablet and smaller breakpoints.

Line Height / XS Mob

This text has a line-height of 1 (unitless) in mobile, landscape and portrait.

Line Height / S

This text has a line-height of 1.25 (unitless) in desktop breakpoint and smaller ones.

Line Height / S Tab

This text has a line-height of 1.25 (unitless) in tablet and smaller breakpoints.

Line Height / S Mob

This text has a line-height of 1.25 (unitless) in mobile, landscape and portrait.

Line Height / M

This text has a line-height of 1.5 (unitless) in desktop breakpoint and smaller ones.

Line Height / M Tab

This text has a line-height of 1.5 (unitless) in tablet and smaller breakpoints.

Line Height / M Mob

This text has a line-height of 1.5 (unitless) in mobile, landscape and portrait.

Line Height / L

This text has a line-height of 1.75 (unitless) in desktop breakpoint and smaller ones.

Line Height / L Tab

This text has a line-height of 1.75 (unitless) in tablet and smaller breakpoints.

Line Height / L Mob

This text has a line-height of 1.75 (unitless) in mobile, landscape and portrait.

Line Height / XL

This text has a line-height of 2 (unitless) in desktop breakpoint and smaller ones.

Line Height / XL Tab

This text has a line-height of 2 (unitless) in tablet and smaller breakpoints.

Line Height / XL Mob

This text has a line-height of 2 (unitless) in mobile, landscape and portrait.

Line Height / 0

Line Height 0

Font

Font / Sage Headline

This is Lato

Font / Sage Text

This is Sage Text

Font / Sage UI

This is Sage UI

Font Style

Font Style / Upper

Uppercase

Font Style / Under

Underline

Font Style / Strike

Strikethrough

Font Style / None

Uppercase

Color

Color / Primary

Color / Secondary

Color / Tertiary

Color / Neutral

Color / Bright

Color / White

Rich Text

Rte

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.

Rte

What’s a Rich Text element?

Static and dynamic content editing

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.

Functional classes

This page holds the modules on which functional classes are organized upon.
Learn more about functional classes and how to name them.

Bg

Bg / Primary

Bg / Primary Lightest

Bg / Primary Lighter

Bg / Primary Light

Bg / Primary Dark

Bg / Primary Darker

Bg / Primary Darkest

Bg / Secondary

Bg / Secondary Lightest

Bg / Secondary Lighter

Bg / Secondary Light

Bg / Secondary Dark

Bg / Secondary Darker

Bg / Secondary Darkest

Bg / Tertiary

Bg / Tertiary Lightest

Bg / Tertiary Lighter

Bg / Tertiary Light

Bg / Tertiary Dark

Bg / Tertiary Darker

Bg / Tertiary Darkest

Bg / Neutral

Bg / Neutral Lightest

Bg / Neutral Lighter

Bg / Neutral Light

Bg / Neutral Dark

Bg / Neutral Darker

Bg / Neutral Darkest

Bg / Bright

Bg / Bright Lightest

Bg / Bright Lighter

Bg / Bright Light

Bg / Bright Dark

Bg / Bright Darker

Bg / Bright Darkest

Bg / White

Ratio

Ratio / Panorama

Ratio / Panorama Tab

Ratio / Panorama Mob

Ratio / Landscape

Ratio / Landscape Tab

Ratio / Landscape Mob

Ratio / Standard

Ratio / Standard Tab

Ratio / Standard Mob

Ratio / Tall

Ratio / Tall Tab

Ratio / Tall Mob

Ratio / Skyscraper

Ratio / Skyscraper Tab

Ratio / Skyscraper Mob

This div has its display set to inline-block on tablet and smaller breakpoints.

Position

Position / Static

This div has its position set to static on desktop breakpoint and smaller ones.

Position / Static Tab

This div has its position set to static on tablet and smaller breakpoints.

Position / Static Mob

This div has its position set to static on mobile, landscape and portrait.

Position / Relative

This div has its position set to relative on desktop breakpoint and smaller ones.

Position / Relative Tab

This div has its position set to relative on tablet and smaller breakpoints.

Position / Relative Mob

This div has its position set to relative on mobile, landscape and portrait.

Display

Display / Block

This div has its display set to block on desktop breakpoint and smaller ones.

Display / Block Tab

This div has its display set to block on tablet and smaller breakpoints.

Display / Block Mob

This div has its display set to block on mobile, landscape and portrait.

Display / InBlock

This div has its display set to inline-block on desktop breakpoint and smaller ones.

Display / InBlock Tab

Display / InBlock Mob

This div has its display set to inline-block on mobile, landscape and portrait.

Display / Inline

This div has its display set to inline on desktop breakpoint and smaller ones.

Display / Inline Tab

This div has its display set to inline on tablet and smaller breakpoints.

Display / Inline Mob

This div has its display set to inline on mobile, landscape and portrait.

Display / None

This div has its display set to none on desktop breakpoint and smaller ones.

Display / None Tab

This div has its display set to none on tablet and smaller breakpoints.

Display / None Mob

This div has its display set to none on mobile, landscape and portrait.

Lists

<ol>

<li>

This is a list item
This is a list item
1. This is a nested list item
2. This is a nested list item
3. This is a nested list item

<ul>

<li>

This is a list item
This is a list item
- This is a nested list item
- This is a nested list item
- This is a nested list item

Blockquote

Block Quote