Typography

Typography defines the common styles that can be used across the entire website/app building. This invloves text-sizes, headings, colored texts & position of texts.

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 - align

text-left

text-center

text-right

                    
                    <div class="text-left">text-left</div>
                    <div class="text-center">text-center</div>
                    <div class="text-right">text-right</div>

Colored text

This is in green color

This is in red color

This is in gray color

                    
                    <div class="green-text">This is in green color</div>
                    <div class="red-text">This is in red color</div>
                    <div class="gray-text">This is in gray color</div>

Text of different font sizes

Text font sizes can be changed by applying the appropriate suffix. Checkout the 5 different sizes available.

I love UI Cookbook component library

                    
                    <div class="text-sm">I love this UI Cookbook component library</div>
                    <div class="text-md">I love this UI Cookbook component library</div>
                    <div class="text-lg">I love this UI Cookbook component library</div>
                    <div class="text-xl">I love this UI Cookbook component library</div>
                    <div class="text-xxl">I love this UI Cookbook component library</div>