Text

Haze provides a versatile range of text utilities, enabling you to align, wrap, manage overflow, transform, and style the text on your webpage.

The .text-* class is used to align the text in page and has three values of alignment: start, center and end. Reponsive classes are also available for each breakpoint: .text-{breakpoint}-*.

Text alignet to the start

Text aligned to center

Text aligned to the end

    <div class="text-start">
        Text alignet to the start
    </div>
    <div class="text-center">
        Text alignet to center
    </div>
    <div class="text-end">
        Text alignet to the end
    </div>

The .text-wrap class, as the name suggests, is used to wrap text. Conversely, to prevent a text from wrapping, use .text-nowrap.

    <div class="w-25 text-nowrap">
        <p class="bg text-start">
            This is a long text that that will not wrap
        </p>
    </div>
    <div class="w-25 text-wrap">
        <p class="bg text-start">
            This is a long text that that will wrap
        </p>
    </div>

The .text-break class, as the name suggests, is used to break longer words.

    <p class="text-break">
        Pneumonoultramicroscopicsilicovolcanoconiosis
    </p>

The text transform classes, are used to change the capitalization of the targeted text. There are three classes available, as shown in the example below.

    <p class="text-lowercase">Lowercased text</p>
    <p class="text-uppercase">Uppercased text</p>
    <p class="text-capitalize">capitaliZED text</p>

Note that the .text-capitalize class will only capitalize the first letter of each word, leaving the case of any other letters unchanged.

The font size classes are used to change the size of a text. As opposed to the heading classes that affect the font size, font weight and the line height, the font size classes only affect the actual size. Alternatively, there's the alias .font-size-* that behaves the same way.

    <p class="fs-1">.fs-1 text</p>
    <p class="fs-2">.fs-2 text</p>
    <p class="fs-3">.fs-3 text</p>
    <p class="fs-4">.fs-4 text</p>
    <p class="fs-5">.fs-5 text</p>
    <p class="fs-6">.fs-6 text</p>

The font weight classes are used to change the weight of a text. There are seven classes, with the syntax .fw-* and the values: bolder, bold, semibold, medium, normal, light, lighter. Alternatively, there's the alias .font-weight-* that behaves the same way.

    <p class="fw-bolder">
        Bolder weight text.
    </p>
    <p class="fw-semibold">
        Semibold weight text.
    </p>
    <p class="fw-medium">
        Medium weight text.
    </p>
    <p class="fw-normal">
        Normal weight text.
    </p>
    <p class="fw-light">
        Light weight text.
    </p>
    <p class="fw-lighter">
        Lighter weight text.
    </p>

The font style classes are used to configure the style either normal or itelic. This can be achieved using the classes .fst-normal and .fst-italic. Alternatively, there are the aliases .font-italic and .font-normal that behave the same way.

    <p class="fst-normal">
        Just a normal font.
    </p>
    <p class="fst-italic">
        Just an italic font.
    </p>

The font typefaces can be changed using the following classes:

• .font-sans-serif or
  .text-sans-serif
• .font-serif or
  .text-serif
• .font-sans or
  .text-sans
• .font-monospace or
  .text-monospace

    <p class="font-sans-serif">
        Just a sans-serif text.
    </p>
    <p class="font-serif">
        Just a serif text.
    </p>
    <p class="font-sans">
        Just a sans text.
    </p>
    <p class="font-monospace">
        Just a monospace text.
    </p>

The .text-reset class is used to force a specific element to inherit the color from his parent instead of using his own, as shown in the below example:

    <p class="text-light">
        A light text with a <a href="#">reset link</a>.
    </p>
    <p class="text-light">
        A light text with a <a href="#" class="text-reset">reset link</a>.
    </p>

The .lh-* class is used change the line height of a paragraph in one of four values: 1, small, base or large. Alternatively, there's the alias .line-height-* that behaves the same way.

    <p class="lh-1">
        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.
    </p>
    <p class="lh-sm">
        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.
    </p>
    <p class="lh-base">
        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.
    </p>
    <p class="lh-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.
    </p>

The text decoration utilities are used to add underline or strike through a text or, otherwise remove its decoration. The necessary classes are .text-decoration-underline, .text-decoration-line-through and .text-decoration-none.

    <p class="text-decoration-underline">
        This text has a line underneath it.
    </p>

    <p class="text-decoration-line-through">
        This text has a line going through it.
    </p>
    
    <a href="#" class="text-decoration-none">
        This link has its text decoration removed.
    </a>