TYPOGRAPHY

Typography is the style or appearance of text. It can also refer to the art of working with text something you probably do all the time. To import the entire component into your project import the below stylesheet into your project.
Default font family: "Roboto".


@import url("https://oxygen-ui-component-library.netlify.app/components/text/text.css");

Headings

Oxygen UI provides 6 levels of headings which can be used for the titles or sub-titles. Use the classname heading-1 (3.5rem), heading-2 (3rem), heading-3 (2.5rem), heading-4 (2rem), heading-5 (1.5rem) and heading-6 (1rem).

Component


<div class="text-heading p-2">
    <h1 class="heading-1">Component Library</h1>
    <h2 class="heading-2">Component Library</h2>
    <h3 class="heading-3">Component Library</h3>
    <h4 class="heading-4">Component Library</h4>
    <h5 class="heading-5">Component Library</h5>
    <h6 class="heading-6">Component Library</h6>
</div>

Gray Text

This is used to display the information in gray. Use the classname gray-text to get your text in gray.

Component Library
```
<div class="box-shadow p-2">
    <p class="gray-text text">Component Library</p>
</div>
                        
```
Centered Text

This is used to display the information at the center of the container. Use the classname centered-text to get your text aligned to the center of the container.

Component Library
```
<div class="box-shadow p-2">
    <p class="centered-text text">Component Library</p>
</div>
                        
```