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.

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

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

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.