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.

Text Size Small

  • 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 Size Small

Text Align Left

Text Align Center

Text Align Right

Text Style Bold

Text Style Italic

Text Style Underline

Text Style Link

Text Style Strikethrough

Text Style Uppercase

Text Style Lowercase

Text Color White

Text Color Black

Text Color Primary

Text Color Primary

Text Color Primary

Text block
Block Quote
Text Link

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

Black
White
Primary
Dark Grey
Grey
Light Grey
Primary Dark
Primary Light
Primary Lighter

Images

Buttons

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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