Text Utilities
Text Utilities are helpful in maintaining the consistency all the pages while building the website using Sapphire.
Headings
The Sapphire design system follows the rule of 8 for Headings. The class names for headings are .heading1, .heading2, .heading3, .heading4, and .heading5.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
<h1 class="heading1">Heading 1</h1>
<h2 class="heading2">Heading 2</h2>
<h3 class="heading3">Heading 3</h3>
<h4 class="heading4">Heading 4</h4>
<h5 class="heading5">Heading 5</h5>
Text Sizes
There are 4 variants of text sizes. Use the classes .lg-txt, .rg-txt, .md-txt, and .sm-txt for different text sizes.
Large Text
Medium Text
Regular Text
Small Text
<p class="lg-txt">Large Text</p>
<p class="md-txt">Medium Text</p>
<p class="rg-txt">Regular Text</p>
<p class="sm-txt">Small Text</p>
Text Weight
There are 4 variants of text weights. Use the class .bolder-txt for font weight 900, class .bold-txt for font weight 700, class .regular-txt for font weight 500, class .light-txt for font weight 300.
Bolder Text.
Bold Text.
Regular Text.
Lighter Text.
<p class="bolder-txt rg-txt">Bolder Text.</p>
<p class="bold-txt rg-txt">Bold Text.</p>
<p class="regular-txt rg-txt">Regular Text.</p>
<p class="light-txt rg-txt">Lighter Text.</p>
Text Decoration and Variation
Use the class .gray-txt for gray text, class .underline-txt for underlining text, and class .strikethrough-txt for striking out text.
Gray Text.
Underlined Text.
Strike through Text.
<p class="rg-txt gray-txt">Gray Text.</p>
<p class="underline-txt rg-txt">Underlined Text.</p>
<p class="strikethrough-txt rg-txt">Strike through Text.</p>
Text Alignment
Text alignment consists of 3 variants. The class .left-txt for left aligned text, class .center-txt for center aligned text, and class .right-txt for right aligned text.
Text Align - LEFT
Text Align - CENTER
Text Align - RIGHT
<p class="left-txt rg-txt">Text Align - LEFT</p>
<p class="center-txt rg-txt">Text Align - CENTER</p>
<p class="right-txt rg-txt">Text Align - RIGHT</p>