TEXT UTILITIES
These are the different typography styles used in Gentle UI.
FONT SIZES:
FONT SIZE 0.5 REM
FONT SIZE 0.8 REM
FONT SIZE 1
FONT SIZE 1.25
FONT SIZE 1.5
FONT SIZE 2
FONT SIZE 2.5
<!-- FONT SIZE 0.5rem -->
<p class="fs-0-5">FONT SIZE 0.5 REM</p>
<!-- FONT SIZE 0.8rem -->
<p class="fs-0-8">FONT SIZE 0.8 REM</p>
<!-- FONT SIZE 1rem -->
<p class="fs-1">FONT SIZE 1</p>
<!-- FONT SIZE 1.25rem -->
<p class="fs-1-25">FONT SIZE 1.25</p>
<!-- FONT SIZE 1.5rem -->
<p class="fs-1-5">FONT SIZE 1.5</p>
<!-- FONT SIZE 2rem -->
<p class="fs-2">FONT SIZE 2</p>
<!-- FONT SIZE 2.5rem -->
<p class="fs-2 5">FONT SIZE 2.5</p>
FONT WEIGHTS
FONT WEIGHT:300
FONT WEIGHT:400
FONT WEIGHT:500
FONT WEIGHT:600
FONT WEIGHT:700
FONT WEIGHT:800
FONT WEIGHT:900
<!-- FONT WEIGHT 300 -->
<p class="fw-300">FONT WEIGHT:300</p>
<!-- FONT WEIGHT 400 -->
<p class="fw-400">FONT WEIGHT:400</p>
<!-- FONT WEIGHT 500 -->
<p class="fw-500">FONT WEIGHT:500</p>
<!-- FONT WEIGHT 600 -->
<p class="fw-600">FONT WEIGHT:600</p>
<!-- FONT WEIGHT 700 -->
<p class="fw-700">FONT WEIGHT:700</p>
<!-- FONT WEIGHT 800 -->
<p class="fw-800">FONT WEIGHT:800</p>
<!-- FONT WEIGHT 900 -->
<p class="fw-900">FONT WEIGHT:900</p>
COLORED TEXT
PRIMARY COLORED TEXT
WARNING COLORED TEXT
INFO COLORED TEXT
GREY COLORED TEXT
<!-- PRIMARY COLORED TEXT -->
<p class="primary-color">PRIMARY COLORED TEXT</p>
<!-- WARNING COLORED TEXT -->
<p class="warning-color">WARNING COLORED TEXT</p>
<!-- INFO COLORED TEXT -->
<p class="info-color">INFO COLORED TEXT</p>
<!-- GREY COLORED TEXT -->
<p class="grey-color">GREY COLORED TEXT</p>
POSITIONED TEXT:
LEFT WARNING TEXT
RIGHT ERROR TEXT
CENTERED SUCCESS TEXT
<!-- WARNING COLORED LEFT ALIGNED TEXT -->
<div class="warning-color text-left">
LEFT WARNING TEXT
</div>
<!-- ERROR COLORED RIGHT ALIGNED TEXT -->
<div class="error-color text-right">
RIGHT ERROR TEXT
</div>
<!-- SUCCESS COLORED CENTER ALIGNED TEXT -->
<div class="success-color text-center">
CENTERED SUCCESS TEXT
</div>
HEADINGS (you can use these utilities or the heading tags without classes will also work)
HEADING 1
HEADING 2
HEADING 3
HEADING 4
HEADING 5
<!-- EXTRA LARGE HEADING SIZE -->
<h1 class="txt-xl">HEADING 1</h1>
<!-- LARGE HEADING SIZE -->
<h1 class="txt-lg">HEADING 2</h1>
<!-- MEDIUM SIZED HEADING -->
<h1 class="txt-md">HEADING 3</h1>
<!-- SMALL SIZED HEADING -->
<h1 class="txt-sm">HEADING 4</h1>
<!-- EXTRA SMALL SIZED HEADING -->
<h1 class="txt-xs">HEADING 5</h1>