Text and heading sizes

.text-1
@include text-1

Regular 12px


.text-2
@include text-2

Regular 14px


.text-3
@include text-3

Regular 16px


.text-4
@include text-4

Regular 18px


.text-5
@include text-5

Regular 21px


.text-6
@include text-6

Regular 24px


.text-7
@include text-7

Regular 36px


.text-8
@include text-8

Regular 53px

.text-1.text-weight-bold
@include text-1($font-weight-bold)

Bold 12px


.text-2.text-weight-bold
@include text-2($font-weight-bold)

Bold 14px


h6, .h6
@include text-3($font-weight-bold)

Bold 16px


h5, .h5
@include text-4($font-weight-bold)

Bold 18px


h4, .h4
@include text-5($font-weight-bold)

Bold 21px


h3, .h3
@include text-6($font-weight-bold)

Bold 24px


h2, .h2
@include text-7($font-weight-bold)

Bold 36px


h1, .h1
@include text-8($font-weight-bold)

Bold 53px


Uppercase

.uppercase-1
@include uppercase-1

Uppercase 9px


.uppercase-2
@include uppercase-2

Uppercase 11px


.uppercase-3
@include uppercase-3

Uppercase 12px


Colors

.text-color-primary
$text-color-primary

◼︎ Primary color


.text-color-secondary
$text-color-secondary

◼︎ Secondary color


.text-color-hint
$text-color-hint

◼︎ Hint color

.text-color-reversed-primary
$text-color-reversed-primary

◼︎ Reversed primary color


.text-color-reversed-secondary
$text-color-reversed-secondary

◼︎ Reversed secondary color


.text-color-reversed-hint
$text-color-reversed-hint

◼︎ Reversed hint color

.text-color-orange $orange

◼︎ orange


.text-color-orange-100 $orange-100

◼︎ orange 100


.text-color-orange-200 $orange-200

◼︎ orange 200


.text-color-orange-300 $orange-300

◼︎ orange 300


.text-color-orange-400 $orange-400

◼︎ orange 400


.text-color-orange-500 $orange-500

◼︎ orange 500

.text-color-red $red

◼︎ red


.text-color-red-100 $red-100

◼︎ red 100


.text-color-red-200 $red-200

◼︎ red 200


.text-color-red-300 $red-300

◼︎ red 300


.text-color-red-400 $red-400

◼︎ red 400


.text-color-red-500 $red-500

◼︎ red 500

.text-color-purple $purple

◼︎ purple


.text-color-purple-100 $purple-100

◼︎ purple 100


.text-color-purple-200 $purple-200

◼︎ purple 200


.text-color-purple-300 $purple-300

◼︎ purple 300


.text-color-purple-400 $purple-400

◼︎ purple 400


.text-color-purple-500 $purple-500

◼︎ purple 500

.text-color-blue $blue

◼︎ blue


.text-color-blue-100 $blue-100

◼︎ blue 100


.text-color-blue-200 $blue-200

◼︎ blue 200


.text-color-blue-300 $blue-300

◼︎ blue 300


.text-color-blue-400 $blue-400

◼︎ blue 400


.text-color-blue-500 $blue-500

◼︎ blue 500

.text-color-green $green

◼︎ green


.text-color-green-100 $green-100

◼︎ green 100


.text-color-green-200 $green-200

◼︎ green 200


.text-color-green-300 $green-300

◼︎ green 300


.text-color-green-400 $green-400

◼︎ green 400


.text-color-green-500 $green-500

◼︎ green 500

.text-color-gray-100 $gray-100

◼︎ gray 100


.text-color-gray-200 $gray-200

◼︎ gray 200


.text-color-gray-300 $gray-300

◼︎ gray 300


.text-color-gray-400 $gray-400

◼︎ gray 400


.text-color-gray-500 $gray-500

◼︎ gray 500


.text-color-gray-600 $gray-600

◼︎ gray 600


.text-color-gray-700 $gray-700

◼︎ gray 700


.text-color-gray-800 $gray-800

◼︎ gray 800


Weight & style

.text-weight-normal, .text-style-normal
$font-weight-normal

Normal weight and style


.text-weight-bold
$font-weight-bold

Bold weight


.text-style-italic

Italic style


.text-underline

Underline


.text-weight-bold.text-style-italic.text-underline

Bold, italic, and underline


Responsive demo

.text-1.text-2-sm.text-3-md.text-4-lg.text-5-xl

Resize to see me change