Text utilities is a class group designed to enhance the text features of elements. With a customizable and responsive structure, it endeavors to fulfill all the necessary features for your projects through simple class assignments.

In JTB_MD, the assigned class base for all text classes, regardless of their primary purpose, is .jtbT.

Coloring

Text coloring classes work with default color palettes of the library as outlined in the Colors section. To set the text color of an element using library classes, simply append the color name to the class base along with its weight:

This text has .jtbT-purple7 class.

This text has .jtbT-blue7 class.

This text has .jtbT-aqua7 class.

This text has .jtbT-green7 class.

This text has .jtbT-lime7 class.

This text has .jtbT-yellow7 class.

This text has .jtbT-orange7 class.

This text has .jtbT-volcano7 class.

This text has .jtbT-red7 class.

This text has .jtbT-neutral7 class.

This text has .jtbT-white7 class.

This text has .jtbT-black7 class.

                            <!-- Element with text color green (weight = 7) -->
<p class='jtbT-green7'>...</p>

Alignment

To adjust the text alignment of your elements, utilize one of the alignment classes provided by the library.

.jtbT-[left | center | right]

This text is aligned left.

This text is aligned center.

This text is aligned right.

                            <!-- Right aligned text -->
<p class='jtbT-right'>...</p>

Transformation

To transform your text, make use of one of the text-transform utility classes provided by JTB_MD.

.jtbT-[lowercase | uppercase | capitalize]

Lowercased text.

Uppercased text.

Capitalized text.

                            <!-- Lowercased text -->
<p class='jtbT-lowercase'>...</p>

Sizing

To adjust the size of your text, whether larger or smaller than normal, leverage one of the text-size utility classes provided by JTB_MD.

.jtbT-[smaller | small | medium | large | larger]

This paragraph is smaller.

This paragraph is small.

This paragraph is medium.

This paragraph is large.

This paragraph is larger.

                            <!-- smaller text -->
<p class='jtbT-smaller'>...</p>

Font Weights

To adjust the thickness of your text, either making it bolder or thinner than usual, employ one of the font-weight utility classes provided by JTB_MD.

.jtbT-fw-[100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]

This paragraph has 100 weight.

This paragraph has 200 weight.

This paragraph has 300 weight.

This paragraph has 400 weight.

This paragraph has 500 weight.

This paragraph has 600 weight.

This paragraph has 700 weight.

This paragraph has 800 weight.

This paragraph has 900 weight.

                            <!-- Font weight 100 -->
<p class='jtbT-fw-100'>...</p>

Line Heights

To adjust the line height of your text—whether making it larger or smaller than normal—utilize one of the line-height classes provided by JTB_MD.

.jtbT-lh-[smaller | small | medium | large | larger]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas, diam id vestibulum congue, nisl dolor dignissim lorem, quis cursus felis massa sed ipsum. Cras ut eros orci. Vivamus nec laoreet ligula. Pellentesque gravida volutpat massa quis scelerisque. Quisque aliquet erat a venenatis tempor. Sed eu lectus ut erat egestas luctus. Suspendisse condimentum leo quis nunc tincidunt facilisis.

                            <!-- Smaller line height -->
<p class='jtbT-lh-smaller'>...</p>

Font Families

As mentioned in the Foundations section, JTB_MD features two primary font-family structures: the default serif-style family and a monospace one designed for computer output.

In JTB_MD, if you wish to change the font-family of a specific text, utilize one of the font-family classes.

.jtbT-ff-[normal | monospace]

This one has default font-family.

This one has monospace font-family.

                            <!-- Monospace font family -->
<p class='jtbT-ff-monospace'>...</p>

Decorating

To apply a specific text-decoration to your text, choose from one of the following classes.

.jtbT-[underline | line-through | none]

This one has underline.

This one has line-through.

This one has nothing.

                            <!-- Line-through -->
<p class='jtbT-line-through'>...</p>

Ellipsis

To make your text work as an ellipsis, simply add the relevant text class provided by JTB_MD.

.jtbT-ellipsis

This text has ellipsis class, to show it it needs to have some garbage texts blah blah blah. Hehe blah blah blah. Hehe blah blah blah. Hehe blah blah blah. Hehe blah blah blah. Hehe blah blah blah. Hehe blah blah blah. Hehe blah blah blah. Hehe blah blah blah.

                            <!-- Ellipsis text -->
<p class='jtbT-ellipsis'>...</p>

Responsiveness

To enable your text act differently on different screen sizes, you can add the corresponding screen breakpoint (defined in Breakpoints seciton) at the end of the class with a hyphen (-):

Refer to the table below to understand which parts of the utility group can be used with screen breakers:

Part of group	Responsiveness	Example class
Coloring	Active	`.jtbT-green7-xxl`
Alignment	Active	`.jtbT-center-xxl`
Transformation	Active	`.jtbT-uppercase-xxl`
Sizing	Active	`.jtbT-small-xxl`
Font Weights	Active	`.jtbT-fw-100-xxl`
Line Heights	Active	`.jtbT-lh-small-xxl`
Font Families	Active	`.jtbT-ff-monospace-xxl`
Decorating	Active	`.jtbT-underline-xxl`
Ellipsis	Active	`.jtbT-ellipsis-xxl`