HTML Headings

Heading H1

All Heading H1

Heading H2

All Heading H2

Heading H3

All Heading H3

Heading H4

All Heading H4
Heading H5
All Heading H5
Heading H6
All Heading H6
Headings

Display

Heading-1

Heading-2

Heading-3

Heading-4

Heading-5
Heading-6
Texts

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.

p-small

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.

All Paragraphs

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.

p-large

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.

p-quote

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.

p-quote-sm

label

text-label

label small

text-label-sm

Link-text

$29

/Mo

text-number-big / text-pricing-detail

$29

/Mo

text-number-medium / text-pricing-detail

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. 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. 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.

This is an h2 heading inside rich text

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!

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!

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!

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!

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.

Text Colors

The following are global classes, you can add to any text of the page to change colors.

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-white

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-blue

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-teal

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-gold

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-orange
Backgrounds

Creat Global Background to apply to any element in the design with the class name structure bg-{color} In case of gradient background use bg-gradient-{number}.

Atoms
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
Left arrow, blue
This is some text inside of a div block.
Left arrow, blue
This is some text inside of a div block.
Left arrow, blue
This is some text inside of a div block.
  1. List Item
  2. List Item
  3. List Item
  4. List Item
  1. List Item
  2. List Item
  3. List Item
  4. List Item
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Buttons
Button Modifiers

Add the next global classes to make any type of button

Usefull Global Classes
Max width
Manage Spacing
spacer-sm
spacer
spacer-m
container
container-lg
py-normal - 100px top and bottom padding
py-medium - 150px top and bottom padding
py-small - 75px top and bottom padding
Manage Components
This is some text inside of a div block.
.center-everything - vertical alignment, center text, margin left and right auto.
.z-index-1 - position relative - z-index: 1
.z-index-2 - position relative - z-index: 2
.cc-zeroYPadding - Zero Top and Botton Padding
.cc-zeroXPadding - Zero Left and Right Padding
cc-fullVHdesktop - Full view height on desktop + After view height Auto
cc-fullCH - Full container height - In all breakpoints
cc-overflow-hidden - sets overflow: hidden
cc-overflow-show - sets overflow: show
cc-overflow-auto - sets overflow: auto
cc-text-inline - sets display: inline
Responsiveness
.hide - hide on all devices
.hide-tablet - hide starting from tablet resolution
.hide-mobile-landscape - hide starting from mobile landscape resolution
.hide-mobile-portrait - hide starting from mobile portrait resolution
.show - display on all devices
.show-tablet - display starting from tablet resolution
.show-mobile-landscape - display starting from mobile landscape resolution
.show-mobile-portrait - display starting from mobile portrait resolution