Heading

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

Example of Heading with these classes

Add class according to your importance of the heading in the webpage (All the classes are applied on h1 tag in this example)

This is a Heading with head-xl class

This is a Heading with head-lg class

This is a Heading with head-md class

This is a Heading with head-sm class

This is a Heading with head-xs class

Example of Paragraph with text varition classes

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

Example of Paragraph with text-gray class

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

Example of heading with center alignment

If you want to center any written content to center with display property block then you can use text-center class in that tag.

This is a Heading with head-lg and text-center class