Here we have 5 class for the heading tags (h1,h2,h3,h4,h5,h6) which are head-xl, head-lg, head-md, head-sm and head-xs , and you can use any of these classes based on your context
Add class according to your importance of the heading in the webpage (All the classes are applied on h1 tag in this example)
| <h1 class="head-xl"> This is a Heading with head-xl class </h1> | |
| <h1 class="head-lg"> This is a Heading with head-lg class </h1> | |
| <h1 class="head-md"> This is a Heading with head-md class </h1> | |
| <h1 class="head-sm "> This is a Heading with head-sm class </h1> | |
| <h1 class="head-xs"> This is a Heading with head-xs class </h1> | |
Add class according to your importance of the paragraph in the section of the webpage
This is a Paragraph with text-xl class
This is a Paragraph with text-lg class
This is a Paragraph with text-md class
This is a Paragraph with text-sm class
This is a Paragraph with text-xs class
| <p class="text-xl">This is a Paragraph with text-xl class</p> | |
| <p class="text-lg">This is a Paragraph with text-lg class</p> | |
| <p class="text-md">This is a Paragraph with text-md class</p> | |
| <p class="text-sm">This is a Paragraph with text-sm class</p> | |
| <p class="text-xs">This is a Paragraph with text-xs class</p> | |
If you want that a particular text will looks good when it is in gray color then you can add text-class to that tag.
This is a Paragraph with text-md and text-gray class
| <p class="text-md text-gray"> | |
| This is a Paragraph with text-md and text-gray class | |
| </p> | |
If you want to center any written content to center with display property block then you can use text-center class in that tag.
| <h1 class="head-lg text-center"> | |
| This is a Heading with head-lg and text-center class | |
| </h1> | |