Headings
heading-display
Display
Heading 1
heading-h1
HTML H1
Heading1
Heading 2
heading-h2
HTML H2
Heading 2
Heading 3
heading-h3
HTML H3
Heading 3
Heading 4
heading-h4
HTML H4
Heading 4
Heading 5
heading-h5
HTML H5
Heading 5
Heading 6
heading-h6
HTML H6
Heading 6/ Body 1
Rich text
rich-text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
- Item 1
- Item 2
- Item 3
Customize the styling of all paragraph (<p>
) elements that are nested inside Rich Text blocks, without affecting global paragraph styles.
Block quote
Ordered list
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Font Weight
u-weight-400
Font Weight Regular [400]
Spacing
u-spacing-inline
Spacing Inline [Left & Right]
u-spacing-block
Spacing Block [Top & Bottom]
u-spacing-block
cc-bottom-0
Spacing Block [Top]
u-spacing-block
cc-top-0
Spacing Block [Bottom]
Backgrounds
u-bg-primary
u-bg-light
u-bg-green
u-bg-light-green
u-bg-white
u-bg-black
u-bg-gray
u-bg-sky-blue
u-bg-yellow
u-bg-hard-blue
Colors
u-text-primary
Surface Primary / Actions Dark 100
u-text-light-100
Actions Light 100
u-text-white
White
u-text-white-60
White 60
u-text-white-50
White 50
u-text-white-80
White 80
u-text-black
Black
u-text-black-80
Black 80
u-text-black-60
Black 60
u-text-black-50
Black 50
u-text-black-10
Black 10
Others Utility
u-text-uppercase
Uppercase
u-overflow-hidden
Overflow Hidden
u-width-100
Width 100%
u-position-relative
Position Relative
u-z-n1
Z-Indx (-1)
u-text-center
Text Align Center
u-display-contents
Display Contents
u-display-block
Display Block
u-display-none
It's hidden on all device
u-hide_landscape
It's hidden on mobile landscape
u-hide_mobile
it's hidden on mobile portrait
u-show_mobile
it's visible on mobile portrait
u-cover
checked-list
Checked List Item
List Item Text
List Item Text
List Item Text
List Item Text
Buttons
Button
cc-fill-dark
u-width-100
Button
cc-fill-dark
Button
cc-fill-light
Button
cc-outline-dark
Button
cc-outline-white
Button
cc-outline-gray
Button Arrows
Button Arrow
cc-fill-primary
Button Arrow
cc-fill-light
Button Arrow
cc-fill-dark
Button Arrow
cc-fill-white
Button Arrow
cc-fill-light-green
Button Arrow
cc-outline-dark
Buttons Group
buttons-group
Button
Button Arrow