Text

Typographies are utility classes used for designing fonts and text. WALDO offers the following typography utilities - Heading, Text, Colored Text, and Aligned Text.

Heading

WALDO offers 6 types of headings - h1, h2, h3, h4, h5, and h6.To generate a heading, use any of the supporting classes. Use the code snippet for reference.

➡ Heading 1

➡ Heading 2

➡ Heading 3

➡ Heading 4

➡ Heading 5

➡ Heading 6

Heading Code Example

<div class="heading-1">Heading 1</div>
                    <div class="heading-2">Heading 2</div>
                    <div class="heading-3">Heading 3</div>
                    <div class="heading-4">Heading 4</div>
                    <div class="heading-5">Heading 5</div>
                    <div class="heading-6">Heading 6</div>

Text Utilities

WALDO offers 3 types of text utilties - small, regular, and large text. To generate a text, use the one of the supporting classes. Use the code snippet for reference.

➡ Small Text

➡ Regular Text

➡ Large Text

Text Utilities Code Example

<div class="small-text">Small Text</div>
                    <div class="regular-text">Regular Text</div>
                    <div class="large-text">Large Text</div>

Coloured Text Utilities

WALDO 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 and Error Color. To generate a colored text, add colored classes. Use the code snippet for reference.

➡ Primary Text

➡ Secondary Text

➡ Success Text

➡ Warning Text

➡ Error Text

Coloured Text Utilities Code Example

<div class="primary-text">➡ Primary Text</div>
                            <div class="secondary-text">➡ Secondary Text</div>
                            <div class="success-text">➡ Success Text</div>
                            <div class="warning-text">➡ Warning Text</div>
                            <div class="error-text">➡ Error Text</div>

Aligned Text Utilities

WALDO offers 3 types of aligned text utilties - left, center and right aligned text. You can generate text with the following alignment - Left, Center and Right. To generate a aligned text, add aligned classes. Use the code snippet for reference.

➡ Left Text

➡ Center Text

➡ Right Text

Aligned Text Utilities Code Example

<div class="primary-text">➡ Left Text</div>
                            <div class="secondary-text">➡ Center Text</div>
                            <div class="success-text">➡ Right Text</div>