Text Utilities

Text utilities or typography is used to ease the process of styling headings and text.

Headings

For headings you can use the tags h1, h2, h3, h4, h5 and h6 and add the same class names for same styling.

This is an h1 heading.

This is an h2 heading.

This is an h3 heading.

This is an h4 heading.

This is an h5 heading.

This is an h6 heading.

You can paste the below code to get the headings of above styles.

Small Text

For small text you can use the class names txt-small and txt-xs.

This is a small text.

This is an extra small text.

You can paste the below code to get the small text of above styles.

Gray Text

For gray text you can just add the class name txt-gray to elements or other divs.

This is a gray h3 heading.

This is a normal text gray div.

This is a gray paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

You can paste the below code to get the gray text of above styles.

Center Text

To center a text just add the class name text-center to justify a text to the center.

This is a center h4 heading.

This is a center paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

You can paste the below code to get the center text of above styles.