Styleguide

Here you can customize all global tags.

Headings

Heading 1

Heading XXLarge

Heading 2

Heading XLarge

Heading 3

Heading Large

Heading 4

Heading Medium

Heading 5

Heading Small

Heading 6

Heading XSmall

Typography

Text Size Big

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.

  • Unordered list - Item 1
  • Unordered list - Item 2
  • Unordered list - Item 3
  • Unordered list - Item 4
  • Unordered list - Item 5
  1. Unordered list - Item 1
  2. Unordered list - Item 2
  3. Unordered list - Item 3
  4. Unordered list - Item 4
  5. Unordered list - Item 5

Text Align Left

Text Align Center

Text Align Right

Text Style Bold

Text Style Italic

Text Style Underline

Text Link Text Style Link Text Style button regular

Text Style Strikethrough

Text Style Uppercase

Text Style Lowercase

Text Color White 100%

Text Color White 90%

Text Color White 80%

Text Color White 70%

Text Color White 60%

Text Color White 50%

Text Color White 40%

Text Color White 30%

Text Color White 20%

Text Color White 10%

Text Color White 5%

Text Color Deep Black

Text Color Black 95%

Text Color Black 90%

Text Color Black 80%

Text Color Accent Deepest

Text Color Accent Deepest 10%

Text Color Accent Deep

Text Color Accent Deep 10%

Text Color Accent Main

Text Color Accent Light

Text Color Accent Lighter

Text Color Accent Lightest

Text Color Additional Pink

Text Color Additional Light Pink

Text Color Additional Blue

Text Color Additional Light Blue

Text Color Additional Yellow

Text Color Additional Green

Text Color Additional Light Green

Text block
Block Quote

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.

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.

How to customize formatting for each rich text
Foursets website

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.

  • Unordered list - Item 1
  • Unordered list - Item 2
  • Unordered list - Item 3
  • Unordered list - Item 4
  • Unordered list - Item 5
  1. Ordered list - Item 1
  2. Ordered list - Item 2
  3. Ordered list - Item 3
  4. Ordered list - Item 4
  5. Ordered list - Item 5
Block Quote

Colors

Deep Black
Black 95%
Black 90%
Black 80%
White 100%
White 90%
White 80%
White 70%
White 60%
White 50%
White 40%
White 30%
White 20%
White 10%
White 5%
Accent Deepest
Accent Deepest 10%
Accent Deep
Accent Deep 10%
Accent Main
Accent Light
Accent Lighter
Accent Lightest
Additional Pink
Additional Light Pink
Additional Blue
Additional Light Blue
Additional Yellow
Additional Green
Additional Light Green

Images

Buttons

Button Text Button Text
Button Text   Button Text  
Button Text Button Text
Button Text   Button Text  
Button Text Button Text
Button Text Button Text
Button Text   Button Text  

Form

Thank you! Your submission has been received!

Container

Container Huge
Container XLarge
Container Large
Container Medium
Container Small

Max Width

Max Width 100%
Max Width 1280px
Max Width 1024px
Max Width 768px
Max Width 512px
Max Width 320px
Max Width 256px

Margins

Margin XXHuge
Margin XHuge
Margin Huge
Margin XXLarge
Margin XLarge
Margin Large
Margin Medium
Margin Small
Margin XSmall
Margin XXSmall
Margin Tiny
Margin XTiny
Margin XXTiny
Margin Top
Margin Bottom
Margin Left
Margin Right
Margin Vertical
Margin Horizontal
Margin 0

Paddings

Padding XXHuge
Padding XHuge
Padding Huge
Padding XXLarge
Padding XLarge
Padding Large
Padding Medium
Padding Small
Padding XSmall
Padding XXSmall
Padding Tiny
Padding XTiny
Padding XXTiny
padding Top
padding Bottom
padding Left
padding Right
padding Vertical
padding Horizontal
padding 0

Hidden classes