Typography

Headings are great to utilise when structuring your content.

ClassPreviewCode
h1

Introduction

    <h1>Introduction</h1>
h2

Introduction

    <h2>Introduction</h2>
h3

Introduction

    <h3>Introduction</h3>
h4

Introduction

    <h4>Introduction</h4>
h5
Introduction
    <h5>Introduction</h5>
h6
Introduction
    <h6>Introduction</h6>

Text Sizes

These utility classes are useful when you need to adjust text size regardless of what element it's in.

ClassPreviewCode
text-huge
Text Huge
    <div class="text-huge">Text Huge</div>
text-large
Text Large
    <div class="text-large">Text Large</div>
text-regular
Text Regular
    <div class="text-regular">Text Regular</div>
text-small
Text Small
    <div class="text-small">Text Small</div>
text-extra-small
Text Extra Small
    <div class="text-extra-small">Text Extra Small</div>

Text Weights

Weight utility classes control the visual emphasis of any piece of text. Lighter weights work well for captions or secondary information, while heavier weights draw attention to key content.

ClassPreviewCode
text-black
Text Black
    <div class="text-black">Text Black</div>
text-bold
Text Bold
    <div class="text-bold">Text Bold</div>
text-normal
Text Normal
    <div class="text-normal">Text Normal</div>
text-light
Text Light
    <div class="text-light">Text Light</div>

Text Decorations

These utility classes allow for styling and transformations to your text.

ClassPreviewCode
text-underline
Text Underline
    <div class="text-underline">Text Underline</div>
text-uppercase
Text Uppercase
    <div class="text-uppercase">Text Uppercase</div>
text-capitalize
text capitalize
    <div class="text-capitalize">text capitalize</div>
text-italic
Text Italic
    <div class="text-italic">Text Italic</div>

Text Alignment

The text alignment classes cover the standard horizontal alignment options.

ClassPreviewCode
text-left
Text Left
    <div class="text-left">Text Left</div>
text-center
Text Center
    <div class="text-center">Text Center</div>
text-right
Text Right
    <div class="text-right">Text Right</div>