Black
Heading Styles
heading-jumbo
heading-jumbo
heading-style-h1
heading-style-h1
heading-style-h2
heading-style-h2
heading-style-h3
heading-style-h3
heading-style-h4
heading-style-h4
heading-style-h5
heading-style-h5
heading-style-h6
heading-style-h6
Heading Styles
(Body Text)
heading-jumbo
heading-jumbo
heading-style-h1
heading-style-h1
heading-style-h2
heading-style-h2
heading-style-h3
heading-style-h3
heading-style-h4
heading-style-h4
heading-style-h5
heading-style-h5
heading-style-h6
heading-style-h6
SubHeading Classes
text-style-subheader
Text Style Subheader (H2)
text-style-subheader
Text Style Subheader (Text)
Text Sizes
text-size-large
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.
text-size-medium
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.
text-size-regular
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.
text-size-small
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.
text-size-tiny
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.
Text Weights
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Text Styles
body-font
body-font
text-style-mono
text-style-mono
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-underline
text-style-underline
text-style-allcaps
text-style-allcaps
text-style-muted
text-style-muted
text-style-quote
“Alles, was wir tun, hat Auswirkungen auf die ganze Welt.”
– Dalai Lama
Text Helper Classes
text-style-nowrap
text-style-nowrap
break-word
break-word
font-alternative
font-alternative (system-ui)
(eg. for special characters like → ©)
(eg. for special characters like → ©)
text-style-2lines
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.
text-style-3lines
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.dolor sit amet,
Text Alignments
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Flex Alignments
flex-column
This is some text inside of a div block.
This is some text inside of a div block.
flex-row
This is some text inside of a div block.
This is some text inside of a div block.
flex-row-centered
This is some text inside of a div block.
flex-wrapper
This is some text inside of a div block.
Color Palette
Body BG
Fantasy
Body Text
Headings
Black
Primary / Brand
San Marino
Secondary
Muddy Waters
Background1
Black
Background2
White
Background3
Muddy Waters
Background4
White Smoke
Others
Invert (Black)
Background Colors
background-color-black
background-color-white
background-color-grey
Text Colors
text-color-black
text-color-black
text-color-white
text-color-white
text-color-grey
text-color-grey
text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-shadow
text-shadow
text-color-1
text-color-1 (Black)
text-color-2
text-color-2 (White)
text-color-3
text-color-3
text-color-4
text-color-4
Text Links & Link Blocks
Images
Default
default_image-wrapper
→
default_image
Cover
default_image-wrapper
→
default_image-cover
Contain
default_image-wrapper
→
default_image-contain
Aspect Ratio
image_mask
1:1
→
image_cover
All Figures
This is an image caption
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Icons
icon-height-xxsmall
icon-height-xsmall
icon-height-small
icon-height-medium
icon-height-large
icon-height-xlarge
icon-height-custom
Icons 1x1
icon-1x1-xxsmall
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
icon-1x1-custom
Icons Embed
icon-embed-xxsmall
icon-embed-xsmall
icon-embed-small
icon-embed-medium
icon-embed-large
icon-embed-xlarge
icon-embed-custom
Social Media
Rich Text
text-rich-text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
- Type: Unordered – Style: No Bullets
- Type: Unordered – Style: No Bullets
- Type: Unordered – Style: No Bullets
- Type: Unordered – Style: Bullets
- Type: Unordered – Style: Bullets
- Type: Unordered – Style: Bullets
- Type: Ordered – Style: Bullets
- Type: Ordered – Style: Bullets
- Type: Ordered – Style: Bullets
This is bold text
This is italic text
This is a link
"Alles, was wir tun, hat Auswirkungen auf die ganze Welt."
– Dalai Lama
Image – Position: Normal
Rich Text Images & Video
text-rich-text
Images
Position: Centered
Position: Full Width
Position: Normal
Position: Float Left
Heading 2
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.
Video
Position: Centered
Position: Full Width
Position: Normal
Position: Float Left
Heading 2
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.
Form Elements
form_component
form_form
Structure Classes
Defined and flexible core structure we can use on all or most pages.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
button-group
align-center
Max widths
Use the max-width CSS property to contain inner content to a maximum width.
max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Paddings
Utility spacing system - padding classes. [padding-direction] + [padding-size].
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
Margins
Utility spacing system - padding classes. [margin-direction] + [margin-size].
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
Useful utility systems
Utility classes we like to use in most of our projects to build faster.
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
has-border
is-icon
has-tooltip
Tooltip
blur-on-hover
Do NOT remove this block!