Text

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Text

.fw-*= {bold, bolder, normal, light, lighter, }
.fst-*= {italic, normal}

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

Line height

.1h-*= {1, sm, base, lg }

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.

Text Decoration

.text-decoration-*= { underline, line-through, none }

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed

Font Size

.fs-*= { 1-6 }

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

Justify Paragrah

style

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur vel vitae nisi possimus ullam ipsa sed blanditiis magni, voluptatibus tempore modi neque veritatis quis ea eligendi obcaecati natus eum illo recusandae beatae laboriosam delectus voluptate cum officiis. Corporis iure nostrum commodi beatae similique dignissimos nemo exercitationem minus, veniam enim maiores, voluptas repudiandae, id quos sit quod voluptatibus dolore? Qui quaerat esse explicabo voluptatibus corrupti incidunt laborum sunt aperiam porro, ipsum, eum laboriosam. Sunt sit impedit nobis repellat aspernatur corporis culpa eligendi laborum, dolore placeat quaerat laudantium error aperiam fugiat. Eum nobis perspiciatis eveniet cumque eligendi qui quibusdam nemo at ut neque praesentium cum doloribus impedit animi nostrum in nesciunt, provident velit quis dignissimos. Fugit molestias, soluta sapiente quasi cupiditate necessitatibus. Explicabo omnis incidunt aut nisi? Nobis, soluta. Odit natus repellendus tenetur doloremque sequi quod voluptate consequatur! Et qui itaque ipsum voluptatibus porro? Illum ullam omnis labore dolores, ab ex est?