Style Guide

Color

Class name : bg-accent-primary
Class name : bg-accent-secondary
Class name : bg-accent-tertiary
Class name : bg-primary
Class name : bg-secondary
Class name : bg-inverse

Text Color

Class name : text-primary
This is some text inside of a div block.
Class name : text-secondary
This is some text inside of a div block.
Class name : text-inverse
This is some text inside of a div block.
Class name : text-inverse-secondary
This is some text inside of a div block.
Class name : text-accent-primary
This is some text inside of a div block.
Class name : text-accent-secondary
This is some text inside of a div block.
Class name : text-accent-tertiary
This is some text inside of a div block.
Class name : ut-text-inverse
This is some text inside of a div block.
Class name : ut-text-inverse-secondary
This is some text inside of a div block.

Text Utilities

Class name : ut-text-bold
This is some text inside of a div block.
Class name : ut-text-align-center
This is some text inside of a div block.
Class name : ut-text-align-center
This is some text inside of a div block.
Class name : ut-text-align-right
This is some text inside of a div block.
Class name : ut-text-align-justify
This is some text inside of a div block.
Class name : ut-text-allcaps
This is some text inside of a div block.
Class name : ut-text-capeachword
This is some text inside of a div block.
Class name : ut-text-lowercase
This is some text inside of a div block.
Class name : ut-text-inverse
This is some text inside of a div block.
Class name : ut-text-inverse-secondary
This is some text inside of a div block.

Border

Class name : border-primary
border-primary
Class name : border-secondary
border-secondary
Class name : border-accent
This is some text inside of a div block.
Class name : border-inverse-primary
border-inverse-primary
Class name : border-inverse-secondary
border-inverse-secondary

Typography

Class name : heading-h0

A well-crafted typeface as the fingerprint of great design

Class name : heading-h1

A well-crafted typeface as the fingerprint of great design

Heading

Class name : heading-h2

A well-crafted typeface as the fingerprint of great design

Heading

Class name : heading-h3

A well-crafted typeface as the fingerprint of great design

Heading

Class name : heading-h4

A well-crafted typeface as the fingerprint of great design

Heading

Class name : heading-h5
A well-crafted typeface as the fingerprint of great design
Heading
Class name : heading-h6
A well-crafted typeface as the fingerprint of great design
Heading

Typography(Text)

Class name : text
This is some text inside of a div block.

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.

This is some text inside of a div block.
Class name : text-s
This is some text inside of a div block.
Class name : text-l
This is some text inside of a div block.
Class name : text-xl
This is some text inside of a div block.

Margin

Class name : ut-margin-top-0
Class name : ut-margin-all-0
Class name : ut-margin-left-auto
Class name : ut-margin-right-auto
Class name : ut-margin-top-0.5x
Class name : ut-margin-top-1x
Class name : ut-margin-top-2x
Class name : ut-margin-top-3x
Class name : ut-margin-top-4x
Class name : ut-margin-top-5x
Class name : ut-margin-top-6x
Class name : ut-margin-top-7x
Class name : ut-margin-bottom-0
Class name : ut-margin-bottom-0.5x
Class name : ut-margin-bottom-1x
Class name : ut-margin-bottom-2x
Class name : ut-margin-bottom-3x
Class name : ut-margin-bottom-4x

Padding

Class name : ut-padding-top-0
Class name : ut-padding-top-0.5x
Class name : ut-padding-top-1x
Class name : ut-padding-top-2x
Class name : ut-padding-top-3x
Class name : ut-padding-top-4x
Class name : ut-padding-top-5x
Class name : ut-padding-top-6x
Class name : ut-padding-bottom-0
Class name : ut-padding-bottom-0.5x
Class name : ut-padding-bottom-1x
Class name : ut-padding-bottom-2x
Class name : ut-padding-bottom-3x
Class name : ut-padding-bottom-4x
Class name : ut-padding-bottom-5x
Class name : ut-padding-bottom-6x

Card

Accent Card

Covers bodily injury, property damage, and third-party claims.

Inverse Card

Covers bodily injury, property damage, and third-party claims.

Card

Covers bodily injury, property damage, and third-party claims.

Card on Secondary

Covers bodily injury, property damage, and third-party claims.

Icon

Icon

Icon small

Icon container

Icon container + ut-radius-round

Misc

Border Radius