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

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

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.

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.

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