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-gradient-light

background-color:#fcf5fe-#fefeff

bg-error

background-color:

bg-white

background-color:#fff

bg-succes

background-color:#22c55e

bg-warning

background-color:#ffba08

bg-info

background-color:#4c82f7

bg-gray-100

background-color:#f3f6ff

bg-gray-200

background-color:#eff2fc

bg-gray-300

background-color:#e2e5f1

bg-gray-400

background-color:#d4d7e5

bg-gray-500

background-color:#b4b7c9

bg-gray-600

background-color:#9397ad

bg-gray-700

background-color:#585c7b

bg-gray-800

background-color:#3e4265

bg-gray-900

background-color:#131022

bg-dark

background-color:#131022

bg-white-5%

background-color:#1f1c2d

bg-white-15%

background-color:#1f1c2d

color-dark

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

color-gray-100

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

color-gray-200

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

color-gray-300

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

color-gray-400

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

color-gray-500

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

color-gray-600

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

color-gray-700

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

color-gray-800

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

color-gray-900

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

color-primary

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

color-error

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

color-succes

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

color-warning

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

color-info

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

color-white

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

color-white-50%

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

color-white-70%

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

color-white-85%

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

color-white-5%

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

Button Area

Class Name

Output

nav-link

btn-primary

btn-primary-md

btn-primary-sm

btn-outline

btn-outline-md

btn-outline-sm

btn-square

btn-round

btn-pill

btn-left-icon

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.