The component library uses Open Sans as it's primary font.

Headings

There are inbuilt defined styles for all headings, one need only use the appropriate tags.

<h1>The Renaissance</h1>

Paragraph

There are three size variants for the paragraph tag, you need to add the class "para-" followed by the letter "l","m","s" for large, medium and small respectively.

<p class="para-l">
The Renaissance Began in the 14th Century</p>
                            <p class="para-m">
The Renaissance Began in the 14th Century</p>
                            <p class="para-s">
The Renaissance Began in the 14th Century</p>
                        

Center Text

If you want to center your text, you need only use "text-center" class.

<p class="para-m text-center">
This is a medium paragraph text in the center</p>
                        

Gray Text

For places, where black just wouldn't do the thing you desire, the component library also offers "gray text". To enable it, you need to add the class "text-gray" to any text containing tag.

<p class="para-l text-gray">
The Renaissance Began in the 14th Century</p>
                            <h3 class="text-gray">The Renaissance</h3>