Colors
Background color classes
BG Black
BG Gray C6
BG Gray C5
BG Gray C4
BG Gray C3
BG Gray C2
BG Gray C1
BG Gray C0
BG White Smoke
BG White
BG Blue C5
BG Blue C4
BG Blue C3
BG Blue C2
BG Blue C1
BG Light Blue C5
BG Light Blue C4
BG Light Blue C3
BG Light Blue C2
BG Light Blue C1
BG Chinese Orange C2
BG Chinese Orange C1
BG Orange C4
BG Orange C3
BG Orange C2
BG Orange C1
BG Deep Orange
BG Atoll
BG Apricot C2
BG Apricot C1
BG Cashew
BG Maroon
BG Dark Brown
BG Light Walnut
BG Khaki
BG Dim Green
BG Grayish Olive
BG Olive
BG Warm Gray C1
BG Warm Gray C2
BG Claret
BG Dark Red C2
BG Dark Red C1
BG Lipstick Red
BG Cadmium Red
BG Coral
BG Bougainvillaea
BG Pure Pink
BG Tender Pink
BG Pale Pink
BG Light Rouge
BG Light Prawn
BG Sardonyx
BG Shadow Pink
BG Pale Yellowish Pink
BG Pink Beryl
BG Pinkish White
BG Soft Sun
BG Sand
BG Fluorescent Orange
Typography color classes
Black Color
Gray C6 Color
Gray C5 Color
Gray C4 Color
Gray C3 Color
Gray C2 Color
Gray C1 Color
Gray C0 Color
White Smoke Color
White Color
Typography
Native Heading styles
This is H1 heading
All H1 Headings
This is H2 heading
All H2 Headings
This is H3 heading
All H3 Headings
This is H4 heading
All H4 Headings
This is H5 heading
All H5 Headings
This is H6 heading
All H6 Headings
Native Typography styles
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
All Links
Block Quote
All Block Quotes
This is an example of list paragraph
This is an example of list paragraph
This is an example of list paragraph
All Unordered Lists
This is an example of list paragraph
This is an example of list paragraph
This is an example of list paragraph
All Ordered Lists
Custom Heading styles
Extra X Large Heading
Heading
Extra X Large
Extra Large Heading
Heading
Extra Large
Large Heading
Heading
Large
Medium Heading
Heading
Medium
Regular Heading
Heading
Small Heading
Heading
Small
Capitalize Heading
Heading
Capitalize
Custom Paragraph styles
This is a Extra X Large Paragraph
Paragraph
Extra X Large
This is a Extra Large Paragraph
Paragraph
Extra Large
This is a Large Paragraph
Paragraph
Large
This is a Medium Paragraph
Paragraph
Medium
This is a Regular Paragraph
Paragraph
This is a Small Paragraph
Paragraph
Small
This is a Extra Small Paragraph
Paragraph
Extra Small
Rich text styles
Class name is "Rich Text"
Rich Text
All rich text styles and classes
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
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!
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.
How to customize formatting for each 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!
How to customize formatting for each 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!
- 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
- 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!
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!
Native List styles
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
All Unordered List
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
All Ordered List
Custom List styles
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
List
+
List Item
List
+
List Item
Pin Icon
List
+
List Item
Pen Icon
Layouts
Flex classes
Flex
Combo classes
Flex Vertical
Align Center
Align Start
Justify Center
Justify Left
Justify Start
Justify Space Around
Flex
Combo classes
Tab Wrap
Mob Wrap
Mob Reverse
Mob Reverse Wrap
Flex
Flex
Flex - align center
Flex
Align Center
Flex - wrap on tablet breakpoint
Flex
Tab Wrap
Flex - wrap on mobile landscape breakpoint
Flex
Mob Wrap
Flex - vertical
Flex
Flex Vertical
Flex - margins 1 em
Flex
Flex Margins 1em
Margins
List of all margin classes. You can apply them to Headings, Paragraphs, Buttons, Div's, etc.
Paragraph margins
MB 0.25em
MB 0.5em
MB 0.75em
MB 1em
MB 2em
MB 3em
MB 4em
MB 5em
Heading margins
Heading
MB 0.125em
MB 0.25em
MB 0.5em
MB 0.75em
MB 1em
MB 2em
MB 3em
MB 4em
MB 5em
Margin Top classes
MT 0em
MT 0.125em
MT 0.25em
MT 0.5em
MT 0.75em
MT 1em
MT 2em
MT 3em
MT 4em
MT 5em
Margin Bottom classes
MB 0em
MB 0.125em
MB 0.25em
MB 0.5em
MB 0.75em
MB 1em
MB 2em
MB 3em
MB 4em
MB 5em
Margin Right classes
MR 0em
MR 0.125em
MR 0.25em
MR 0.5em
MR 0.75em
MR 1em
MR 2em
MR 3em
MR 4em
MR 5em
Margin Left classes
ML 0em
ML 0.125em
ML 0.25em
ML 0.5em
ML 0.75em
ML 1em
ML 2em
ML 3em
ML 4em
ML 5em
Icons
Sizes
Extra Small icon
Icon
Extra Small
Small icon
Icon
Small
Regular icon
Icon
Medium icon
Icon
Medium
Large icon
Icon
Large
Extra Large icon
Icon
Extra Large