Elixir Docs | Typography

Typography

Typographies are utility classes used for designing fonts and text.

Elixir offers the following typography utilities - Heading Utilities, Text Utilities, Colored Text Utilities, and Aligned Text Utilities.

Heading Utilities

Elixir offers 6 types of headings - h1, h2, h3, h4, h5, and h6.

To generate a heading, use the base class heading along with any of the supporting classes heading-1, heading-2, heading-3, heading-4, heading-5, and heading-6.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Copy the code below to use headings of varying sizes.

<div class="heading heading-1 m-1">Heading 1</div>
                            
<div class="heading heading-2 m-1">Heading 2</div>

<div class="heading heading-3 m-1">Heading 3</div>

<div class="heading heading-4 m-1">Heading 4</div>

<div class="heading heading-5 m-1">Heading 5</div>

<div class="heading heading-6 m-1">Heading 6</div>

Text Utiltiies

Elixir offers 3 types of text utilties - small, regular, and large text.

To generate a text, use the base text along with any one of the supporting classes- text-sm, text-reg, and text-lg.

Large Text

Regular Text

Small Text

Copy the code below to use text with varying sizes

<div class="text text-lg m-0-5">Large Text</div>
                            
<div class="text text-reg m-0-5">Regular Text</div>

<div class="text text-sm m-0-5">Small Text</div>

Colored Text Utilities

Elixir offers 5 types of colored text utilties - primary, secondary, success, warning, and error colored text.

You can generate text with the following colors - Primary Color, Secondary Color, Success Color, Warning Color, Error Color, and Gray Color.
To generate a colored text, add the base text along with any one of the supporting colored classes- primary-color, secondary-color, success-color, warning-color error-color, and gray-color.

Primary Colored Text

Secondary Colored Text

Success Colored Text

Warning Colored Text

Error Colored Text

Gray Colored Text

Copy the code below to use text with different colors

<div class="text primary-color m-0-5">Primary Colored Text</div>
                            
<div class="text secondary-color m-0-5">Secondary Colored Text</div>

<div class="text success-color m-0-5">Success Colored Text</div>

<div class="text warning-color m-0-5">Warning Colored Text</div>

<div class="text error-color m-0-5">Error Colored Text</div>

<div class="text gray-color m-0-5">Gray Colored Text</div>

Aligned Text Utilities

Elixir offers 4 aligned text utiltiies - text aligned to the right, left, center or justified.
Left aligned text is the default alignment.

To generate aligned text, use the base class text along with any one of the supporting alignment classes- text-left, text-center, text-right, and text-justify.

Left Aligned Text

Center Aligned Text

Right Aligned Text

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, excepturi temporibus. Perferendis aliquam consequatur voluptatibus mollitia incidunt repellat asperiores accusantium?

Copy the code below to use aligned text.

<div class="text text-left m-0-5">
    Left Aligned Text
</div>
                            
<div class="text text-center m-0-5">
    Center Aligned Text
</div>

<div class="text text-right m-0-5">
    Right Aligned Text
</div>

<div class="text text-justified m-0-5">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, excepturi temporibus. Perferendis aliquam consequatur voluptatibus mollitia incidunt repellat asperiores accusantium?
</div>