CreateX
UI Kit

Text colors

  Show code

  • Primary. Lorem ipsum dolor sit amet consectetur.
  • Accent. Lorem ipsum dolor sit amet consectetur.
  • Info. Lorem ipsum dolor sit amet consectetur.
  • Success. Lorem ipsum dolor sit amet consectetur.
  • Warning. Lorem ipsum dolor sit amet consectetur.
  • Danger. Lorem ipsum dolor sit amet consectetur.
  • Dark. Lorem ipsum dolor sit amet consectetur.
  • Body. Lorem ipsum dolor sit amet consectetur.
  • Black-50. Lorem ipsum dolor sit amet consectetur.
  • Muted. Lorem ipsum dolor sit amet consectetur.
  • White. Lorem ipsum dolor sit amet consectetur.

Background colors

  Show code

  • Primary BG. Lorem ipsum dolor sit amet consectetur.
  • Accent BG. Lorem ipsum dolor sit amet consectetur.
  • Info BG. Lorem ipsum dolor sit amet consectetur.
  • Success BG. Lorem ipsum dolor sit amet consectetur.
  • Warning BG. Lorem ipsum dolor sit amet consectetur.
  • Danger BG. Lorem ipsum dolor sit amet consectetur.
  • Dark BG. Lorem ipsum dolor sit amet consectetur.
  • Secondary BG. Lorem ipsum dolor sit amet consectetur.

Background faded colors

  Show code

.bg-primary-faded

.bg-accent-faded

.bg-info-faded

.bg-success-faded

.bg-warning-faded

.bg-danger-faded

.bg-dark-faded

Text opacity

  Show code

Opacity 25%

Opacity 50%

Opacity 60%

Opacity 70%

Opacity 80%

Opacity 90%

Alignment

  Show code

Left aligned element

Center aligned element

Right aligned element

Text utilities  


This text should overflow the parent. Apply class .text-overflow.

Lowercased Text. Apply class .text-lowercase.

Uppercased Text. Apply class .text-uppercase.

CapiTaliZed text. Apply class .text-capitalize.

Praeterea iter est quasdam res quas ex communi.Apply class .text-truncate.

Bold text. Apply class .font-weight-bold.

Normal text. Apply class .font-weight-normal.

Italic text. Apply class .font-italic.

Borders

  Show code

Border colors

  Show code