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

Text

text-md

Body 2

text-regular

Body 3 / Label 1

text-sm

Body 4

text-xs

Label 2

Rich text

rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Customize the styling of all paragraph (<p>) elements that are nested inside Rich Text blocks, without affecting global paragraph styles.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

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

Buttons

Button

cc-fill-dark

u-width-100

Regular Filled Dark Button Full Width Let’s talk

Button

cc-fill-dark

Regular Filled Dark Button Small Filled Dark Button

Button

cc-fill-light

Regular Filled Light Button Small Filled Light Button

Button

cc-outline-dark

Regular Outline Dark Button Small Outline Dark Button

Button

cc-outline-white

Regular Outline White Button Small Outline White Button

Button

cc-outline-gray

Regular Outline Gray Button Small Outline Gray Button

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

Button Text

Template Components

Common Section Header Template

Subheading

Heading title with gray text

Common Section Template