Important Links

Get Started

Components

Avatar Alert Badge Button Cards Image Input Texts Utilites List Navigation Rating Snackbar Grid Modal

Home Components Text Utilities

Text Utilities

Text component is the used to render text and paragraphs within an interface. Our default text color is black.

Usages

Hello World

This is the default Texts from our component library.

                
                  < -- For Default Input Component -->
                  

                 <h1 class="master">Hello World</h1> 

                 <h2 class="submaster">Hello World</h2> 

                 <h3 class="miniheading">Hello World</h3> 

                 <h4 class="subminiheading">Hello World</h4> 

                 <h5 class="hyphenate">Hello World</h5> 

                 <h6 class="subhyphenate">Hello World</h6>

Text with Different Color

We have pre defined some Sizes for the texts.

Usages

Hello World

To achieve the text designs , you need to follow the following code:

                
                  < -- For Different Color Texts -->
                  

                 <h1 class="text-cyan">Hello World</h1> 

                 <h2 class="text-red">Hello World</h2> 

                 <h3 class="text-green">Hello World</h3> 

                 <h4 class="text-yellow">Hello World</h4> 

                 <h5 class="text-gray">Hello World</h5> 

                 <h6 class="text-blue">Hello World</h6>

Centered text

We have predefined the aligned the text property as center

Usages

Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem eius quas eos, fugit ducimus ratione non voluptate quidem earum quis nulla id facilis quod cumque quibusdam beatae itaque aspernatur facere.

To achieve the text designs , you need to follow the following code:

                
                  < -- For Centered Text -->
                  

                 <div class="text-centered">

                  <p> Content Here! </p> 

                 </div>

Text with Styling

We have predefined some style/tranformation of the texts.

Usages

This is Underlined Text.

This is line-through Text.

This is Highlighted Text.

This is Italic Text.

To achieve the text designs , you need to follow the following code:

                
                  < -- For Styled Texts -->
                  

                  <p class="text-underline">This is Underlined Text.</p> 

                 <p class="text-cross">This is line-through Text.</p> 

                 <p class="text-highlight">This is Highlighted Text.</p> 

                 <p class="text-italic">This is italic Text.</p>

Input

List