Text Utilites

Typography is the art and technique of arranging letters and characters known as type. It also refers to different elements of typography including the size of the letters, line length and the spacing on a line or the entire page.

Headings

All HTML headings, from h1 through h6, are available.

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading
                    
                        <h1>H1 Heading</h1>
                        <h2>H2 Heading</h2>
                        <h3>H3 Heading</h3>
                        <h4>H4 Heading</h4>
                        <h5>H5 Heading</h5>
                        <h6>H6 Heading</h6>

Text Sizes

Text can be displayed in multiple sizes.

3x Extra Large Paragraph

2x Extra Large Paragraph

1x Extra Large Paragraph

Large Paragraph

Medium Paragraph

Small Paragraph

Extra Small Paragraph

                    
                        <p class="txt-3xl">3x Extra Large Paragraph</p>
                        <p class="txt-2xl">2x Extra Large Paragraph</p>
                        <p class="txt-xl">1x Extra Large Paragraph</p>
                        <p class="txt-lg">Large Paragraph</p>
                        <p class="txt-md">Medium Paragraph</p>
                        <p class="txt-sm">Small Paragraph</p>
                        <p class="txt-sm">Extra Small Paragraph</p>

Text Alignment

Text can be aligned in multiple ways.

Left Aligned Text

Center Aligned Text

Right Aligned Text

                    
                        <p class="txt-lg txt-left">Left Aligned Text</p>
                        <p class="txt-lg txt-center">Center Aligned Text</p>
                        <p class="txt-lg txt-right">Right Aligned Text</p>

Text Colors

Text can be coloured in multiple ways.

Text Color Primary

Text Color Error

Text Color Success

Text Color Warning

Text Color Gray 1

Text Color Gray 2

Text Color Gray 3

Text Color Gray 4

                    
                        <p class="txt-primary">Text Color Primary</p>
                        <p class="txt-error">Text Color Error</p>
                        <p class="txt-success">Text Color Success</p>
                        <p class="txt-warning">Text Color Warning</p>
                        <p class="txt-gray-1">Text Color Gray 1</p>
                        <p class="txt-gray-2">Text Color Gray 2</p>
                        <p class="txt-gray-3">Text Color Gray 3</p>
                        <p class="txt-gray-4">Text Color Gray 4</p>
Input Lists