Headings

heading-display

Display

Heading 1
heading-h1

HTML H1

Heading 1

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

Text

All Links
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.

text-lg

Body 1

text-md

Body 2

text-regular

Body 3

text-sm

Body 4

Rich text

u-richtext

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Font Family

u-font-primary

Arial,Helvetica Neue,Helvetica,sans-serif

Font Weight

u-weight-400

Font Weight Regular [400]

u-weight-500

Font Weight Medium [500]

u-weight-700

Font Weight Bold [700]

Colors

u-text-primary

Primary Text Color

Background

u-bg-dark

Others

u-text-uppercase

Uppercase

u-overflow-hidden

Overflow Hidden

u-select-none

User Select None

u-position-relative

Position Relative

u-position-absolute

Position Absolute

u-z-n1

Z-Index (-1)

u-text-center

Text Align Center

u-mx-auto

Margin Left & Right Auto

u-width-full

width 100%

u-hide

Display None

u-line-clamp

Show few lines from long sentence. Default lines value is 3. Want to modify! Assign a different value on css custom property (--_line-length). 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.

u-cover
tinyflow

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]
u-spacing-block-sm
Spacing Block Small [Top & Bottom]
u-spacing-block-sm
cc-bottom-0
Spacing Block Small [Top]
u-spacing-block-sm
cc-top-0
Spacing Block Small [Bottom]

Components

Style Guide Badge
cc-class
cc-tag
cc-component
cc-attribute
Style Guide Badge Component
Class Name
Tag Name
Component Name
Attribute Name
Class
Tag
Component
Attribute