Contents:

Typography

Buttons

Layout

Opacity & more

Special Classes

Colors

Rich Text

Typography

Font size

H1 tag

h1 Style

H1 Style

H2 tag

h2 Style

H2 Style

H3 tag

h3 Style

H3 Style

H4 tag

heading-style-h4

H4 Style

H5 tag

heading-style-h5

H5 Style

H6 tag

heading-style-h6

H6 Style

paragraph

This sample text is used as a placeholder to demonstrate how actual written content will look on your website once it's complete. It helps visualize the layout, typography, and overall design before the final copy is added.

is-shorter

This sample text is used as a placeholder to demonstrate how actual written content will look on your website once it's

is-shorter

subtitle-larger

subtitle

subtitle-smaller

Font properties

text_link

This sample text is link-text as a placeholder to demonstrate how actual written content will look on your website once it's complete. It helps visualize the layout, typography, and overall design before the final copy is added.

is-bold

This is bold text

All Ordered Lists

This sample text is used
This sample text is used as a placeholder
This sample text

All Ordered Lists

This sample text is used
This sample text is used as a placeholder
This sample

All Quotes

This sample text is used as a placeholder to demonstrate how actual written content will look on your website once it's complete. It helps visualize the layout, typography, and overall design before the final copy is added.

All Ordered Lists

This is bold text

Text align

text-left

text-center

text-right

Buttons

Learn more

Learn More

Learn more

Brand identity

Layout

Containers

container

container-full

Spacers

spacer-0125

spacer-025

spacer-05

spacer-075

spacer-1

spacer-1.5

spacer-2

spacer-3

spacer-4

spacer-6

spacer-8

spacer-10

spacer-14

flexbox

Flex direction

flex

flex__vertical

Flex direction

flex__top-left

flex__center

flex__top-right

flex__bottom-left

Flex Gap

flex-gap-0125

flex-gap-025

flex-gap-05

flex-gap-1

flex-gap-125

flex-gap-1.5

flex-gap-2

flex-gap-3

flex-gap-4

flex-gap-6

flex-gap-8

flex-gap-14

Opacity & Radius

Opacity

opacity-01

opacity-02

opacity-03

opacity-04

opacity-05

opacity-06

opacity-07

opacity-08

opacity-09

opacity-1

Border-radius

bradius--0.25

bradius--0.5

bradius--0.75

bradius--1

bradius--2

Special classes

Hide

hide-on-desktop

hide-on-tablet

hide-on-mobile

show

Other

z-index-1

z-index-5

overflow-hidden

overflow-auto

Color Mode

u-theme-dark

u-theme-light

Colors

Backgrounds

bg-100

bg-200

bg-400

bg-500

bg-600

bg-700

bg-800

bg-900

Text

text-100

text-200

text-300

text-400

text-500

text-600

text-700

text-800

text-900

Theme

Light Theme

Text

This sample text is used as a placeholder to demonstrate how actual written content will look on your website once it's

Button Text

Light Theme

Text

This sample text is used as a placeholder to demonstrate how actual written content will look on your website once it's

Button Text

Blog 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.

Block quote Block quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quoteBlock quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript