00. global classes

.z-index-1500
.overflow-visible
.hide-on-mobile
.left-aligned
.relative
.no-margin-left
.right-aligned
.right-justified-flex
.1em-margin-top-bottom
.1em-padding-top-bottom
.0em-margin-bottom-tablet
.1em-margin-top
.flex-justify-center
.1em-margin-bottom
.visible-to-public
.visible-to-owner
.center-mobile
.white-bg
.hide
.space-before-text
.space-after-text
.hide
.show
.gray-bg
.flex-vertical-center
.margin-auto

Modal

Filter Button

Button Text
HomeAlle VideosText Link
Font

01. Typography

Headings

Heading 1

h1 {font-size: 36px;}

Heading 2

h2 {font-size: 28px;}

Heading 3

h3 {font-size: 24px;}

Heading 4

h4 {font-size: 22px;}
Heading 5
h5 {font-size: 19px;}
Heading 6
h6 {font-size: 16px;}
Doing what you like is freedom...
blockquote {font-size: 20px;}

Text elements

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here', making it look like readable English. You can use the mark tag to highlight text.

For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.

Text LinkText Link
body, p { font-size: 16px; }
Many desktop publishing packages now use Lorem Ipsum as their default model text. You can use the mark tag to highlight text.
.subheading {font-size: 19px;}

hr

Text manipulation

This text overflows its parent element and therefore will be truncated and three dots will be appended. This is some long text that is going to get cut off by the container because its too long.

.truncate-text

02. Richtext

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

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.

Headline 4

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!

Link

  1. ghfghfgh
  2. fgh
  3. fgh
  4. fgh
  5. fgh

Headline 2

Headline 3

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.
  • zjghj
  • ghjghj
  • kjkljkl

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

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!

  1. ghfghfgh
  2. fgh
  3. fgh
  4. fgh
  5. fgh

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.

  • zjghj
  • ghjghj
  • kjkljkl

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

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.

Headline 4

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!

Link

  1. ghfghfgh
  2. fgh
  3. fgh
  4. fgh
  5. fgh

Headline 2

Headline 3

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.
  • zjghj
  • ghjghj
  • kjkljkl

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.

03. Form Elements

Text Inputs

Use the .input class to get default styling for text inputs. Placeholder text is used for additional context when necessary.

Input extras

This is some text inside of a div block.
This is some text inside of a div block.

Input sizes

Input fields come in four sizes which can be applied with .input--xl, .input--l, .input--m, .input--s and .input--xs on the .input component itself.

Textareas

Textareas come in four sizes which can be applied with .textarea--xl, .textarea--l, .textarea--m and .textarea--s.

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

02. Buttons

Default buttons

Use the button classes on an <a></a>, <button></button>, or <input> element.

Button Sizes

Add .btn--xl, .btn--l.btn--m, .btn--s or .btn--xs for additional sizes.

Border Buttons

Add .btn--border to button to get border.

Buttons with Icons

Add an inline .btn-icon--xl, .btn-icon--l, .btn-icon--m, .btn-icon--s, .btn-icon--xs inside the button for a button icon.
Or combine any of button colors and styles with .btn--icon for a single icon button.

06. Tabs

Horizontal Tabs

Tab 1

For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Many desktop publishing packages now use Lorem Ipsum as their default model text.

Tab 2

Many desktop publishing packages now use Lorem Ipsum as their default model text. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour

The languages only differ in their grammar, their pronunciation and their most common words.

Tab 3

For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour

Tab 4

For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Many desktop publishing packages now use Lorem Ipsum as their default model text.

Vertical Tabs

Tab 1

For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words. Many desktop publishing packages now use Lorem Ipsum as their default model text.

Tab 2

Many desktop publishing packages now use Lorem Ipsum as their default model text. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour

The languages only differ in their grammar, their pronunciation and their most common words.

Tab 3

For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour

Tab 4

For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, their pronunciation and their most common words.

Many desktop publishing packages now use Lorem Ipsum as their default model text. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour

14. Colors

Primary Colors

.primary-color--light
#1087fd
.primary-color--dark
#0660b9

Supporting Colors

.white
#ffffff
.gray-color
#f4f6fc
.font-dark-bg
#292f33
.font-dark-dark-bg
#05b8ff

More colors

.Card-Border-Gray-bg
#ebeaf2
.border-color-bg
#0b1033
.#e0e6ed
#e0e6ed
.placeholder-gray-bg
#a2afc0
.font-passive-bg
#6b6b6b
.font-gray-blue-bg
#67707a
.tab-passive-bg
#3c4858
.tab-active-bg
#3c4858
.tab-menu-bg
#fbfcfd