Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

                        
                            <h1>Heading 1</h1>
                            <h2>Heading 2</h2>
                            <h3>Heading 3</h3>
                            <h4>Heading 4</h4>
                            <h5>Heading 5</h5>
                            <h6>Heading 6</h6>

Text Sizes

Text sizes are available in xl, lg, md and sm

Paragraph size extra large

Paragraph size large

Paragraph size medium

Paragraph size regular

Paragraph size small

                        
                            <p class="text-xl">Paragraph size extra large</p>
                            <p class="text-lg">Paragraph size large</p>
                            <p class="text-md">Paragraph size medium</p>
                            <p>Paragraph size regular</p>
                            <p class="text-sm">Paragraph size small</p>

Text Alignment

Text alignment are available as text-left, text-center and text-right

This is left aligned

This is center aligned

This is right aligned

                        
                            <h3 class="text-left">This is left aligned</h3>
                            <h3 class="text-center">This is center aligned</h3>
                            <h3 class="text-right">This is right aligned</h3>

Gray Text

To use text in gray color use class text-gray

this a gray text

                        
                            <p class="text-gray">this a gray text</p>

Text Colors

To use text in colors use classes text-{actionColor} where actionColor are primary, secondary, success, warning, danger and info

this a primary text

this a secondary text

this a success text

this a warning text

this a danger text

this a info text

                        
                            <p class="text-primary">this a primary text</p>
                            <p class="text-secondary">this a secondary text</p>
                            <p class="text-success">this a success text</p>
                            <p class="text-warning">this a warning text</p>
                            <p class="text-danger">this a danger text</p>
                            <p class="text-info">this a info text</p>

Typography

Headings