This is Body text X Large
This is Body text Large
This is Body text Medium
This is Body text Small
This is Body text X Small
Colors
background, Text, border colors
background
.Background Navy100
.Background Teal100
.Background Taupe40
.Background Gray0
Text
.Mint100
.Amber100
.Gray60
.Teal100
.Gray0
.Coral100
Typography
Headings, body and other common text elements.
Heading 1 Override - .H1 Override
Heading 1
Heading 2 Override - .H2 Override
Heading 2
Heading 3 Override - .H3 Override
Heading 3
Heading 4 Override - .H4 Override
Heading 4
Heading 5 Override - .H5 Override
Heading 5
Heading 6 Override - .H6 Override
Heading 6
X Large text - .Callout X Large
Large text - .Callout Large
Medium text - .Callout Medium
This is Alt Header Large - .Alt Header Large
This is Alt Header Medium - .Alt Header Medium
This is Alt Header Small - .Alt Header Small
.Label X Large
.Label Large
.Label Medium
.Label Small
.Label X Small
All Paragraph
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.
Bold Paragraph
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.
Italic Paragraph
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.
Block Quote
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.
Buttons
background, Text, border colors
Button Text
.Button Primary
Button Text
.Button Primary Dark BG
Button Text
.Button Primary Small
Button Text
.Button Primary Small Dark BG
Form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
List
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.
Utilities
Headings, body and other common text elements.
Alignment
.Text Align Left
.Text Align Center
.Text Align Right
.Text Align Center Tablet
.Text Align Center Large Mobile
.Text Align Center Mobile
Text Transformation
This is All Caps - .All Caps
This is No Wrap text - .No Wrap
.Letter Spacing 1px
Border Radius
.Border Radius 32
.Border Radius Right Top Circle
.Border Radius Left Bottom Circle
.Border Radius Right Bottom Circle
Hidden Items
Hidden Tablet Down
Hidden Mobile
Hidden Large Mobile Down
This is some text inside of a div block.
Display Items
Display Block
.Flex Horizontal
.Flex Horizontal, Flex Reverse Tablet
.Flex Horizontal.Flex Reverse Large Mobile
.Flex Horizontal.Flex Vertical Tablet
.Flex Horizontal.Flex Vertical Large Mobile
.Flex Horizontal.Flex Vertical Mobile
.Flex Horizontal.Gap 16
.Flex Horizontal.Gap 24
Flex Horizontal, Gap 40
Flex Horizontal, Wrap
Flex Horizontal, Direction Reverse
Flex Horizontal, Align Center
Flex Horizontal, Align Top
Flex Horizontal, Align Bottom
Flex Horizontal, Align Top
Flex Horizontal, Align Baseline
Flex Horizontal, Justify Center
Flex Horizontal, Justify Left
Flex Horizontal, Justify right
Flex Horizontal, Justify space between
Flex Horizontal, Jusitfy space around
Flex Horizontal, Flex Reverse Large Mobile
Flex Vertical
Flex Vertical, Flex Reverse Large Mobile
Flex Vertical, Flex Reverse Tablet
Flex Vertical, Flex Reverse Mobile
Flex Vertical, Flex Horizontal Tablet
Flex Vertical, Flex Horizontal Large Mobile
Flex Vertical, Flex Horizontal Mobile
Flex Vertical, Gap 16
Flex Vertical, Gap 24
Flex Vertical, Gap 40
Flex Vertical, Wrap
Flex Vertical, Align left
Flex Vertical, Align Center
Flex Vertical, Align right
Flex Vertical, Align baseline
Flex Vertical, Justify center
Flex Vertical, Justify Bottom
Flex Vertical, Justify Space Between
Flex Vertical, Justify Space Around
For Padding
Padding left 2
Padding left 4
Padding left 8
Padding left 12
Padding left 16
Padding left 24
Padding left 32
Padding left 40
Padding left 48
Padding left 56
Padding left 64
Padding left 72
Padding left 80
Padding top 2
Padding top 4
Padding top 8
Padding top 12
Padding top 16
Padding top 24
Padding top 32
Padding top 40
Padding top 48
Padding top 56
Padding top 64
Padding top 72
Padding top 80
Padding right 2
Padding right 4
Padding right 8
Padding right 12
Padding right 16
Padding right 24
Padding right 32
Padding right 40
Padding right 48
Padding right 56
Padding right 64
Padding right 72
Padding right 80
Padding bottom 2
Padding bottom 4
Padding bottom 8
Padding bottom 12
Padding bottom 16
Padding bottom 24
Padding bottom 32
Padding bottom 40
Padding bottom 48
Padding bottom 56
Padding bottom 64
Padding bottom 72
Padding bottom 80
For Margins
Margin top 2
Margin top 4
Margin top 8
Margin top 12
Margin top 16
Margin top 24
Margin top 32
Margin top 40
Margin top 48
Margin top 56
Margin top 64
Margin top 72
Margin top 80
Margin bottom 2
Margin bottom 4
Margin bottom 8
Margin bottom 12
Margin bottom 16
Margin bottom 24
Margin bottom 32
Margin bottom 40
Margin bottom 48
Margin bottom 56
Margin bottom 64
Margin bottom 72
Margin bottom 80
Margin right 2
Margin right 4
Margin right 8
Margin right 12
Margin right 16
Margin right 24
Margin right 32
Margin right 40
Margin right 48
Margin right 56
Margin right 64
Margin right 72
Margin right 80
Margin left 2
Margin left 4
Margin left 8
Margin left 12
Margin left 16
Margin left 24
Margin left 32
Margin left 40
Margin left 48
Margin left 56
Margin left 64
Margin left 72
Margin left 80
For Width and Height
Full height
Full Width
Max-width 992
Max-width 1120
Max-width 568
Max-width 992 Nested
Max-width 568 Nested
Max-width 768
Max-width 768 Nested
.Background Navy100
.Background Teal100
.Background Taupe40
.Background Gray0
.Amber100
