Headings

u-heading-display

Display

Heading 1
u-heading-h1

HTML H1

Heading 1

Heading 2
u-heading-h2

HTML H2

Heading 2

Heading 3
u-heading-h3

HTML H3

Heading 3

Heading 4
u-heading-h4

HTML H4

Heading 4

Heading 5
u-heading-h5
HTML H5
Heading 5
Heading 6
u-heading-h6
HTML H6
Heading 6

Text

paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-md

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

u-text-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

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-color-primary

Primary Text Color

u-color-secondary

Secondary Text Color

Backgrounds

u-bg-dark
u-bg-secondary

Others

u-text-uppercase

Uppercase

u-overflow-hidden

Overflow Hidden

u-position-relative

Position Relative

u-position-absolute

Position Absolute

u-zindex-n1

Z-Index (-1)

u-zindex-1

Z-Index 1

u-isolation-isolate

Isolation Isolate (Create stacking context)

u-text-center

Text Align Center

u-margin-inline-auto

Margin Left & Right Auto

u-width-full

width 100%

u-display-none

Display None

Display None

u-display-contents

Display Contents

u-display-flex

Display Flex

u-display-grid

Display Grid

u-flex-wrap

Flex Wrap

u-flex-shrink-0

Flex Shrink 0

u-align-items-start

Align Items Start

u-align-items-center

Align Items Center

u-align-items-end

Align Items End

u-justify-content-between

Justify Content Space Between

u-justify-content-center

Justify Content Center

u-place-items-center

Place Items Center

u-justify-items-center

Justify Items Center

u-text-wrap-balance

Text Wrap Balance

u-text-wrap-pretty

Text Wrap Pretty

u-sr-only

Screen Readers Only

Screen Readers Only

u-list-unstyled
  • Unstyled list Item 1
  • Unstyled list Item 2
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-select-none

User Select None

u-ratio-1

Aspect Ratio 1

u-cover
tinyflow

Section 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]

Components

Navbar
Footer
FAQ Card

  • Title goes here 1

    🔽

    Answer goes here 1

  • Title goes here 2

    🔽

    Answer goes here 2

Style Guide Badge
Class Name
Tag Name
Component Name
Attribute Name