---

Use the following f-{size} utility classes to set the font size for any text element.

                    
                        <h1 class="f-xxl ">h1. Sparrow Heading</h1>

                        <h2 class="f-xl">h2. Sparrow Heading</h2>

                        <h3 class="f-l">h3. Sparrow Heading</h3>

                        <h4 class="f-m">h4. Sparrow Heading</h4>

                        <h5 class="f-s">h5. Sparrow Heading</h5>

                        <h6 class="f-xs">h6. Sparrow Heading</h6>
                    
                

---

Use the following text-{align} utility classes to align any text element.

                    
                        <div class="text-left ">Text Left Demo</div>
                         <div class="text-center">Text Center Demo</div>
                         <div class="text-right">Text right Demo</div>
                    
                

---

Use the following text-{color} utility classes to set color for any text element.

                    
                        <div class="text-white">Text color White</div>
                        <div class="text-mute">Text color Gray</div> 
                        <div class="text-primary">Text color primary</div>
                        <div class="text-warning">Text color warning</div>
                        <div class="text-success">Text color success</div>
                        <div class="text-danger">Text color Danger</div>
                    
                

---

Use the following text-{transform} utility classes to transform any text element.

                    
                        <div class="text-lowercase">text lowercase</div>
                        <div class="text-uppercase">text uppercase</div> 
                        <div class="text-capitalize">text capitalize</div>