Styleguide

Headings

heading-style-extra-large

Sample text helps you.

H1

Sample text helps you.

heading-style-h1

Sample text helps you.

H2

Sample text helps you understand how real text may look.

heading-style-h2

Sample text helps you understand how real text may look.

H3

Sample text is being used as a placeholder. Sample text helps you understand.

heading-style-h3

Sample text is being used as a placeholder. Sample text helps you understand.

H4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

heading-style-h4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

H5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text.
heading-style-h5

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text.

H6
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text.
heading-style-h6

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text.

Container

container-tiny
container-small
container-medium
container-large
padding-global

Spacer / Abstände

spacer-tiny
spacer-xsmall
spacer-small
spacer-medium
spacer-large

Text Sizes

text-large

Sample text is being used as a placeholder for real text that is normally present.

text-medium

Sample text is being used as a placeholder for real text that is normally present on your website.

text-small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-tiny

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

Text Weights

text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-regular
text-weight-regular
text-weight-light
text-weight-light

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Standard HTML Tags

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links
All Links
All quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Text Colors

text-color-black
text-color-black
text-color-grey
text-color-grey
text-color-bright
text-color-bright

Background Colors

background-color-dark-1
background-color-dark-2
background-color-light-1
background-color-white

Icons

icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large

Form Elements

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

Utility systems

hide
This element is hidden
hide-desktop-only
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-hidden
overflow-auto
z-index-1
z-index-2

Max widths und full widths

full-width-tablet
full-width-mobile-portrait
full-width-mobile-landscape
max-width-small
container-tiny align-left
container-small align-left

Rich Text Element

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.

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!

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. Link im Textblock.

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.

  • Punkt 1
  • Punkt 2

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.

  1. Punkt 1
  2. Punkt 2

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.

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element.

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.

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.

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.