Typhography Area

Class Name

Out Put

heading-xxl

Font-family:Manrope, Font-size:80px, font-weight:800;line-hight:1em

Heading

heading-xl

Font-family:Manrope, Font-size:72px, font-weight:800;line-hight:1em

Heading

heading-lg

Font-family:Manrope, Font-size:64px, font-weight:800;line-hight:1em

Heading

heading-md

Font-family:Manrope, Font-size:56px, font-weight:800;line-hight:1.2em

Heading

heading-sm

Font-family:Manrope, Font-size:48px, font-weight:800;line-hight:1.2em

Heading

heading-xs

Font-family:Manrope, Font-size:42px, font-weight:800;line-hight:1.2em

Heading

text-xxl

Font-family:Manrope, Font-size:24px, font-weight:400;line-hight:1.5em
This is text-xxl Style used on the entire Template

text-xl

Font-family:Manrope, Font-size:20px, font-weight:400;line-hight:1.5em
This is text-xxl Style used on the entire Template

text-lg

Font-family:Manrope, Font-size:18px, font-weight:400;line-hight:1.5em
This is text-xxl Style used on the entire Template

text-md

Font-family:Manrope, Font-size:16px, font-weight:400;line-hight:1.5em
This is text-xxl Style used on the entire Template

text-sm

Font-family:Manrope, Font-size:14px, font-weight:400;line-hight:1.5em
This is text-xxl Style used on the entire Template

text-xs

Font-family:Manrope, Font-size:12px, font-weight:400;line-hight:1.5em
This is text-xxl Style used on the entire Template

text-bold

font-weight:700 (No other changes will be applied)
To make the text bold, use the className "text-bold"

text-bold-extra

Font-family:Manrope, Font-size:20px, font-weight:800;line-hight:1.5em
To make the text bold, use the className "text-bold"

text-semibold

This is some text inside of a div block.
To make the text semi bold, use the className "text-semibold"

Color Plate Area

Class Name

Output

bg-primary

background-color:#6366f1

bg-gradient

background-color:#d747ef-#6566f1

bg-error

background-color:

bg-white

background-color:#fff

bg-dark

background-color:#131022

color-dark

color-#131022
This is Light text inside of a div block.

color-white

color-#fff
This is some text inside of a div block.

Button Area

Class Name

Output

nav-link

btn-primary

btn-primary-md

btn-outline

btn-square

btn-right-icon

btn-link

Rich Text

Heading 2

Heading 3

Heading 4

Heading 5
Heading 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!

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.

Rich text Link

  • Accumsan arcu neque, nisl, pellentesque fames justo consequat blandit lacus. Eget odio vel nulla vel.
  • At sodales quam felis ullamcorper iaculis tristique. Felis, etiam felis pellentesque sit neque.