Adjust your projects global colours below.

Preview

.F0 T-A

Example Heading

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from gen X is on the runway heading towards a solution.

.F0 T-B

Example Heading

.F0 T-C

Example Heading

.F0 T-D

Example Heading

.LINK

.on--f0

This is a text link

.LINK

.on--f0

This is a text link

.btn

.on--f0

Button Text

.btn

.on--f0

Button Text

BG: BODY

Background

text a

text b

text c

text D

Link A

Link B

Button A

Button B

Preview

.F1 T-A

Example Heading

.F1 T-B

Example Heading

.F1 T-C

Example Heading

.F1 T-D

Example Heading

.LINK

.on--f1

This is a text link

.LINK

.on--f1

This is a text link

.btn

.on--f1

Button Text

.btn

.on--f1

Button Text

BG: FILL #1

Background

text a

text b

text c

text D

LINK A

LINK B

Button A

Button B

Adjust your projects global typography below.

Preview

.D--100

Jump

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution.

.D--90

The five boxing wizards jump quickly

.D--80

Zelda might fix the job growth plans very quickly on Monday.

.D--70

A quivering Texas zombie fought republic linked jewelry. The five boxing wizards jump quickly.

.D--60

A quivering Texas zombie fought republic linked jewelry. The five boxing wizards jump quickly.

.D--50

A quivering Texas zombie fought republic linked jewelry. The five boxing wizards jump quickly.

.D--40

The five boxing wizards jump quickly

.D--30

The five boxing wizards jump quickly

.D--20

The five boxing wizards jump quickly

Display TEXT

Preview

.P--80

Dynamically maintain high standards in solutions without prospective potentialities. Enthusiastically repurpose extensive processes rather than vertical partnerships.

.p--70

Dynamically maintain high standards in solutions without prospective potentialities. Enthusiastically repurpose extensive processes rather than vertical partnerships.

.p--60

Dynamically maintain high standards in solutions without prospective potentialities. Enthusiastically repurpose extensive processes rather than vertical partnerships. Distinctively optimize emerging communities.

.p--50

.p--40

.p--30

PARAGRAPH TEXT

Aa*

Preview

.RICHText--BASIC

The boxing wizards

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!

Zelda might fix the job growth plans very quickly on Monday.

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 text link 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.

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.

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.

RICH TEXT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ipsum est, pulvinar sit amet mi a, aliquet.

Adjust your global layout components below.

Preview

Sections

Everything is about context. Spacing, colour, scale all change depending on 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.

.Section

.is--xsm

.Section

.is--sm

.Section

.is--md

.Section

.is--lg

Containers

.container

.IS--sm

.container

.IS--md

.container

.IS--lg

.container

.IS--xlg

Layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ipsum est, pulvinar sit amet mi a, aliquet.

documentation

Class Index

Typography

Element

Classes

Action

Description

Example

(D) Display Text

.d--100

.d-90

.d-80

.d-70

.d-60

.d-50

.d-40

.d-30

.d-20

Set your heading size, tracking and leading.

Apply these classes to set the display heading style. Apply these classes directly to a text block element.

(P) Paragraph Text

.p-70

.p-60

.p-50

p-40

.p-30

.p-20

Set paragraph size, leading, letter-spacing.

Use these classes to set the paragraph style. Apply these classes directly to a text block element.

(L) Leading

.L-Shrink--1

.L-grow--1

Adjust text leading
(line-height).

Sometimes you may want to change your leading depending on the width of the parent container. Use these combo classes to adjust this.

(T) Tracking

.t-Tight--1

.t-Loose--1

Adjust text tracking
(letter-spacing).

Use this classes when text sits on a different backgrounds.

Text Link

.Link

TBA

Colour

Element

Classes

Action

Description

Example

(F) Background Fills

.F0

.F1

.F2

.F3

.F4

Adds a background fill to section or div element.

(T) Text Fills

.F[X] T-A

.F[X] T-B

.F[X] T-C

.F[X] T-D

Adds a colour fill to a text block element.

First decalre what fill the text block is sit on (e.g. F1) and then signify the shade you want (T-X).

Global

Element

Classes

Action

Description

Example

(H) Hover

.FX H-A

.FX H-B

.FX H-C

.FX H-D

Declare the background fill (F1, F2 etc) then declare the hover style (H-A, H-B, H-C)

Global Resets

(@M) Media Query

.@m lg

.@m md

.@m sm

.@m xsm

Make text adjustments are different breakpoints

Use this modifier if you'd like to make a change at a particular breakpoint. LG = Desktop, MD = Tablet, SM = Phone horizontal, XSM = Phone Vertical.

(@M) Media Query Combos

Shrink--1

Shrink--2

Grow--1

Grow--2

Make text adjustments are different breakpoints

Use this modifier if you'd like to make a change at a particular breakpoint. LG = Desktop, MD = Tablet, SM = Phone horizontal, XSM = Phone Vertical.

Button

.btn

TBA

Units

CSS Property

Unit(s)

Borders

Drop Shadow

Body Font Size

PX, VW

Line Height

Unitless

Width

EM, %

Height

EM, %

Position

EM, %

Font Size

EM, PX

Letterspacing

Paddings

EM, PX

Margins

EM, PX

Radius

EM, PX

Blur

Asset Library

Name

Type

Link

File Name

Image

View resource

File Name

Image

View resource

Help

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ipsum est.