Colors

Brand Colors

bg-primary-400

bg-primary-500

bg-primary-600

bg-primary-700

bg-primary-800

bg-secondary-300

bg-secondary-500

bg-info-500

bg-info-600

bg-success-400

bg-success-500

bg-warning-400

bg-warning-500

bg-danger-500

bg-danger-600

bg-primary

bg-secondary

bg-info

bg-success

bg-warning

bg-danger

Gradient Colors

bg-primary-500-700

bg-gv-primary

bg-gh-primary

bg-gh-primary-alt

bg-875-950

Neutral Colors

bg-white

bg-100

bg-200

bg-300

bg-400

bg-500

bg-600

bg-700

bg-750

bg-800

bg-825

bg-875

bg-900

bg-950

bg-black

bg-body

Text Color

text-color-inherit

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

text-color-faded

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

text-color-heading

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

text-color-heading-gradient

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

text-color-primary

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

text-color-secondary

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Theme Modes

theme-light

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

theme-dark

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Typography

font-size-h1-large

Heading 1

font-size-h1

Heading 1

font-size-h2

Heading 2

font-size-h3-large

Heading 3

font-size-h3-medium

Heading 3

font-size-h3

Heading 3

font-size-h4

Heading 4

font-size-h5

Heading 5

font-size-h6

Heading 6

font-size-xtiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-size-tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-size-xsmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-size-msmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-size-base

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-size-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-size-xlarge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-style-italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-style-underline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-style-uppercase

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-style-blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

List

Ordered List

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit

Unordered List

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit

Custom List

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit

Font Family

font-family-primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-family-secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Font Weight

font-weight-regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-weight-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-weight-semibold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

font-weight-bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Line Height

line-height-xsmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

line-height-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

line-height-msmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

line-height-base

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

line-height-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

line-height-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Wrap

text-wrap-default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-wrap-pretty

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-wrap-balance

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Alignment (Support Breakpoints: MD, SM, XS)

text-align-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-align-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

text-align-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Rich Text

rich-text

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.

This a placeholder image inside a rich text.

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

Flexbox (Breakpoint Support)

Flex

flex-row

flex-column

Flex (Breakpoint Medium - For Tablets)

flex-row

flex-column

Flex (Breakpoint Small - For Mobile Landscape)

flex-row

flex-column

Flex (Breakpoint Extra Small - For Mobile Portrait)

flex-row

flex-column

Align Self

align-self-start

align-self-center

align-self-end

align-self-stretch

Align Self (Breakpoint Medium - For Tablet)

align-self-start

align-self-center

align-self-end

align-self-stretch

Align Self (Breakpoint Small - For Mobile Landscape)

align-self-start

align-self-center

align-self-end

align-self-stretch

Align Self (Breakpoint Extra Small - For Mobile Portrait)

align-self-start

align-self-center

align-self-end

align-self-stretch

Align Items

align-items-start

align-items-center

align-items-end

align-items-stretch

Align Items (Breakpoint Medium - For Tablet)

align-items-start

align-items-center

align-items-end

align-items-stretch

Align Items (Breakpoint Small - For Mobile Landscape)

align-items-start

align-items-center

align-items-end

align-items-stretch

Align Items (Breakpoint Extra Small - For Mobile Portrait)

align-items-start

align-items-center

align-items-end

align-items-stretch

Justify Content

justify-content-start

justify-content-center

justify-content-end

justify-content-between

Justify Content (Breakpoint Medium - For Tablet)

justify-content-start

justify-content-center

justify-content-end

justify-content-between

Justify Content (Breakpoint Small - For Mobile Landscape)

justify-content-start

justify-content-center

justify-content-end

justify-content-between

Justify Content (Breakpoint Extra Small - For Mobile Portrait)

justify-content-start

justify-content-center

justify-content-end

justify-content-between

Flex Basis

flex-shrink

flex-grow

flex-noshrink

flex-nogrow

Flex Basis (Breakpoint Medium - For Tablet)

flex-shrink

flex-grow

flex-noshrink

Flex Basis (Breakpoint Small - For Mobile Landscape)

flex-shrink

flex-grow

flex-noshrink

Flex Basis (Breakpoint Extra Small - For Mobile Portrait)

flex-shrink

flex-grow

flex-noshrink

Flex Wrap

flex-wrap

flex-nowrap

Flex Wrap (Breakpoint Medium - For Tablet)

flex-wrap

flex-nowrap

Flex Wrap (Breakpoint Small - For Mobile Landscape)

flex-wrap

flex-nowrap

Flex Wrap (Breakpoint Extra Small - For Mobile Portrait)

flex-wrap

flex-nowrap

Grid (Breakpoint Support)

Grid Utilities

grid

grid-breakout

Grid Column Utilities

grid-cols-1

grid-cols-2

grid-cols-3

grid-cols-4

grid-cols-5

grid-cols-6

Grid Column Utilities (Breakpoint Extra Large - For Extra Large Desktop)

grid-cols-1

grid-cols-2

grid-cols-3

grid-cols-4

grid-cols-5

grid-cols-6

Grid Column Utilities (Breakpoint Medium - For Tablet)

grid-cols-1

grid-cols-2

grid-cols-3

grid-cols-4

grid-cols-5

grid-cols-6

Grid Column Utilities (Breakpoint Small - For Mobile Landscape)

grid-cols-1

grid-cols-2

grid-cols-3

grid-cols-4

grid-cols-5

grid-cols-6

Grid Column Utilities (Breakpoint Extra Small - For Mobile Portrait)

grid-cols-1

grid-cols-2

grid-cols-3

grid-cols-4

grid-cols-5

grid-cols-6

Column Utilities

col-1

col-2

col-3

col-4

col-5

col-6

col-7

col-8

col-9

col-10

col-11

col-12

Column Utilities (Breakpoint Medium - For Tablet)

col-1

col-2

col-3

col-4

col-5

col-6

col-7

col-8

col-9

col-10

col-11

col-12

Column Utilities (Breakpoint Small - For Mobile Landscape)

col-1

col-2

col-3

col-4

col-5

col-6

col-7

col-8

col-9

col-10

col-11

col-12

Column Utilities (Breakpoint Extra Small - For Mobile Portrait)

col-1

col-2

col-3

col-4

col-5

col-6

col-7

col-8

col-9

col-10

col-11

col-12

Row Utilities

row-1

row-2

row-3

row-4

Row Utilities (Breakpoint Extra Small - For Mobile Portrait)

row-1

row-2

row-3

row-4

Row Utilities (Breakpoint Small - For Mobile Landscape)

row-1

row-2

row-3

row-4

Row Utilities (Breakpoint Extra Small - For Mobile Portrait)

row-1

row-2

row-3

row-4

Order Utilities

order-1

order-2

order-3

order-4

order-5

order-6

order-7

order-8

order-9

order-10

Order Utilities (Breakpoint Medium - For Tablet)

order-1

order-2

order-3

order-4

order-5

order-6

order-7

order-8

order-9

order-10

Order Utilities (Breakpoint Small - For Mobile Landscape)

order-1

order-2

order-3

order-4

order-5

order-6

order-7

order-8

order-9

order-10

Order Utilities (Breakpoint Extra Small - For Mobile Portrait)

order-1

order-2

order-3

order-4

order-5

order-6

order-7

order-8

order-9

order-10

Spacing (Breakpoint Support)

Section Spacing

section-space

Gap

gap-gutter

gap-0

gap-1

gap-2

gap-3

gap-4

gap-5

gap-6

gap-7

gap-8

gap-9

gap-10

gap-11

gap-12

Gap (Breakpoint Medium - For Tablet)

gap-gutter

gap-0

gap-1

gap-2

gap-3

gap-4

gap-5

gap-6

gap-7

gap-8

gap-9

gap-10

gap-11

gap-12

Gap (Breakpoint Small - For Mobile Landscape)

gap-gutter

gap-0

gap-1

gap-2

gap-3

gap-4

gap-5

gap-6

gap-7

gap-8

gap-9

gap-10

gap-11

gap-12

Gap (Breakpoint Extra Small - For Mobile Portrait)

gap-gutter

gap-0

gap-1

gap-2

gap-3

gap-4

gap-5

gap-6

gap-7

gap-8

gap-9

gap-10

gap-11

gap-12

Gap Row

gap-row-gutter

gap-row-0

gap-row-1

gap-row-2

gap-row-3

gap-row-4

gap-row-5

gap-row-6

gap-row-7

gap-row-8

gap-row-9

gap-row-10

gap-row-11

gap-row-12

Gap Row (Breakpoint Medium - For Tablet)

gap-row-gutter

gap-row-0

gap-row-1

gap-row-2

gap-row-3

gap-row-4

gap-row-5

gap-row-6

gap-row-7

gap-row-8

gap-row-9

gap-row-10

gap-row-11

gap-row-12

Gap Row (Breakpoint Small - For Mobile Landscape)

gap-row-gutter

gap-row-0

gap-row-1

gap-row-2

gap-row-3

gap-row-4

gap-row-5

gap-row-6

gap-row-7

gap-row-8

gap-row-9

gap-row-10

gap-row-11

gap-row-12

Gap Row (Breakpoint Extra Small - For Mobile Portrait)

gap-row-gutter

gap-row-0

gap-row-1

gap-row-2

gap-row-3

gap-row-4

gap-row-5

gap-row-6

gap-row-7

gap-row-8

gap-row-9

gap-row-10

gap-row-11

gap-row-12

Margin Directions

m-t

m-r

m-b

m-l

m-y

m-x

Margin Spacings

m-auto

m-gutter

m-0

m-1

m-2

m-3

m-4

m-5

m-6

m-7

m-8

m-9

m-10

m-11

m-12

Margin Spacings (Breakpoint Medium - For Tablet)

m-auto

m-gutter

m-0

m-1

m-2

m-3

m-4

m-5

m-6

m-7

m-8

m-9

m-10

m-11

m-12

Margin Spacings (Breakpoint Small - For Mobile Landscape)

m-auto

m-gutter

m-0

m-1

m-2

m-3

m-4

m-5

m-6

m-7

m-8

m-9

m-10

m-11

m-12

Margin Spacings (Breakpoint Extra Small - For Mobile Portrait)

m-auto

m-gutter

m-0

m-1

m-2

m-3

m-4

m-5

m-6

m-7

m-8

m-9

m-10

m-11

m-12

Padding Directions

p-t

p-r

p-b

p-l

p-y

p-x

Padding Spacings

p-gutter

p-0

p-1

p-2

p-3

p-4

p-5

p-6

p-7

p-8

p-9

p-10

p-11

p-12

Padding Spacings (Breakpoint Medium - For Tablet)

p-gutter

p-0

p-1

p-2

p-3

p-4

p-5

p-6

p-7

p-8

p-9

p-10

p-11

p-12

Padding Spacings (Breakpoint Small - For Mobile Landscape)

p-gutter

p-0

p-1

p-2

p-3

p-4

p-5

p-6

p-7

p-8

p-9

p-10

p-11

p-12

Padding Spacings (Breakpoint Extra Small - For Mobile Portrait)

p-gutter

p-0

p-1

p-2

p-3

p-4

p-5

p-6

p-7

p-8

p-9

p-10

p-11

p-12

Miscellaneous

Container

container-xsmall

container-small

container-msmall

container

container-medium

container-large

container-full

Shadow

shadow-small

shadow-base

shadow-large

Border

border

border-primary

border-secondary

border-oultine

Border Radius

radius-inherit

radius-0

radius-xsmall

radius-small

radius-msmall

radius-main

radius-medium

radius-large

radius-xlarge

radius-huge

radius-round

Overflow

overflow-visible

overflow-hidden

overflow-clip

Z-index

zindex-1

zindex-2

zindex-3

zindex-4

zindex-5

zindex-n1

Other Utilities

position-static

position-relative

position-absolute

position-sticky

position-fixed

visual

height-full

height-100svh

width-full

sr-only

bg-visual

mask-left

mask-right

mask-bottom

mask-top

mask-x

mask-y

pointer-auto

pointer-none

Link Stretched

Components

Buttons

button-small

Button

button

Button

button-large

Button

Icon

icon

Icon Box

icon-box

Reel Image

reel-visual