Text Size Classes

.ut-text-xs (12px)

.ut-text-sm (14px)

.ut-text-base (16px)

.ut-text-lg (18px)

.ut-text-xl (20px)

.ut-text-2xl (24px)

.ut-text-3xl (30px)

.ut-text-4xl (36px)

.ut-text-5xl (48px)

Text Weight Classes

.ut-font-weight-light

.ut-font-weight-normal

.ut-font-weight-medium

.ut-font-weight-semibold

.ut-font-weight-bold

.ut-font-weight-black

Text Color Classes

.text-ut-black

.text-ut-charcoal

.text-ut-white

.text-ut-burntorange

.text-ut-bluebonnet

.text-ut-turquoise

.text-ut-turtlepond

.text-ut-cactus

.text-ut-shade

.text-ut-tangerine

.text-ut-limestone

.text-ut-sunshine

.text-ut-moody-peach

.text-ut-moody-gray

.text-ut-moody-blue

.text-ut-error-red

.text-ut-bluebonnet--s20

Background Color Classes

.bg-ut-black

.bg-ut-white

.bg-ut-burntorange

.bg-ut-bluebonnet

.bg-ut-turquoise

.bg-ut-turtlepond

.bg-ut-cactus

.bg-ut-shade

.bg-ut-tangerine

.bg-ut-limestone

.bg-ut-sunshine

.bg-ut-moody-peach

.bg-ut-moody-gray

.bg-ut-moody-blue

.bg-ut-error-red

.bg-ut-bluebonnet--s20

.utexas-bg-074d6a

.utexas-bg-138791

.utexas-bg-f9fafb

.utexas-bg-e6ebed

.utexas-bg-c4cdd4

.utexas-bg-7d8a92

.utexas-bg-5e686e

.utexas-bg-3e4549

.utexas-bg-487d39

.utexas-bg-9d4700

.utexas-bg-ebeced

.utexas-bg-c2c5c8

.utexas-bg-858c91

.utexas-bg-1f262b

.utexas-bg-fbfbf9

.utexas-bg-f2f1ed

.utexas-bg-e6e4dc

.utexas-bg-aba89e

.utexas-bg-807e76

.utexas-bg-56544e

HTML Elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph of text to demonstrate the paragraph styling.

This is a link

List item 1
List item 2
List item 3

Ordered list item 1
Ordered list item 2
Ordered list item 3

Header 1	Header 2
Data 1	Data 2

Input Label:

This is a blockquote used to indicate the quotation of a large section of text from another source.

Preformatted text block to preserve both spaces and line breaks.

Code element to display inline code snippets.

Padding Utility Class Showcase

All-around Padding

.ut-p-1

.ut-p-2

.ut-p-4

.ut-p-8

.ut-p-16

Padding Top

.ut-pt-1

.ut-pt-2

.ut-pt-4

.ut-pt-8

.ut-pt-16

Padding Bottom

.ut-pb-1

.ut-pb-2

.ut-pb-4

.ut-pb-8

.ut-pb-16

Padding Left

.ut-pl-1

.ut-pl-2

.ut-pl-4

.ut-pl-8

.ut-pl-16

Padding Right

.ut-pr-1

.ut-pr-2

.ut-pr-4

.ut-pr-8

.ut-pr-16

Responsive Padding

.md:ut-p-4

.lg:ut-p-8

.xl:ut-p-16

Margin Utility Class Showcase

All-around Margin

.ut-m-1

.ut-m-2

.ut-m-4

.ut-m-8

.ut-m-16

Margin Top

.ut-mt-1

.ut-mt-2

.ut-mt-4

.ut-mt-8

.ut-mt-16

Margin Bottom

.ut-mb-1

.ut-mb-2

.ut-mb-4

.ut-mb-8

.ut-mb-16

Margin Left

.ut-ml-1

.ut-ml-2

.ut-ml-4

.ut-ml-8

.ut-ml-16

Margin Right

.ut-mr-1

.ut-mr-2

.ut-mr-4

.ut-mr-8

.ut-mr-16

Responsive Margin

.md:ut-m-4

.lg:ut-m-8

.xl:ut-m-16

A table header	Table header 2
Test 1	Test 2
Test 3	Test 4

A table header with ut-fit-table	Table header 2
Test 1	Test 2
Test 3	Test 4

Moody Style Guide