Text

Ready Added in 2.0.0

A collection of utility classes to style text.

Combine this component with the Heading component to style your content.

Style modifiers

Gloss offers various text utilities to style your text.

Class	Description
`.gls-text-lead`	Add this class to highlight text, for example in article subtitles.
`.gls-text-meta`	Add this class to a paragraph which contains metadata about an article or similar.

Class	Description
`.gls-text-xsmall`	Add this class to decrease the font size to 12px.
`.gls-text-small`	Add this class to decrease the font size to 14px.
`.gls-text-default`	Add this class to set default the font size.
`.gls-text-large`	Add this class to increase the font size to 24px.
`.gls-text-xlarge`	Add this class to increase the font size to 32px.

Font weight

Add one of the following classes to modify the font weight of your text.

Note We don’t provide all Sofia Pro font weights in our CSS.

Class	Description
`.gls-text-hairline`	Add this class to set the font weight to 100.
`.gls-text-thin`	Add this class to set the font weight to 200.
`.gls-text-light`	Add this class to set the font weight to 300.
`.gls-text-regular`	Add this class to set the font weight to 400.
`.gls-text-medium`	Add this class to set the font weight to 500.
`.gls-text-semibold`	Add this class to set the font weight to 600.
`.gls-text-bold`	Add this class to set the font weight to 700.
`.gls-text-extrabold`	Add this class to set the font weight to 800.
`.gls-text-black`	Add this class to set the font weight to 900.

Letter spacing

The following classes will modify the letter spacing of your text.

Class	Description
`.gls-text-tighter`	Add this class to decrease the letter spacing the most.
`.gls-text-tight`	Add this class to decrease the letter spacing.
`.gls-text-normal`	Add this class to remove letter spacing.
`.gls-text-wide`	Add this class to increase the letter spacing.
`.gls-text-wider`	Add this class to increase the letter spacing more.
`.gls-text-widest`	Add this class to increase the letter spacing the most.

Font style

Add the .gls-text-italic class to create italic text.

Text transform

The following classes will transform text into uppercased, capitalized or lowercased characters.

Class	Description
`.gls-text-uppercase`	Add this class to transform your text to uppercase.
`.gls-text-capitalize`	Add this class to transform your text to capitalize.
`.gls-text-lowercase`	Add this class to transform your text to lowercase.

Text decoration

Add the .gls-text-decoration-none class to remove any text decoration from a link.

Text color

Use one of these classes to apply a different color to text elements.

Class	Description
`.gls-text-muted`	Add this class to mute text.
`.gls-text-emphasis`	Add this class to emphasize text.
`.gls-text-primary`	Add this class to emphasize text with the primary color.
`.gls-text-secondary`	Add this class to emphasize text with the secondary color.
`.gls-text-success`	Add this class to indicate success.
`.gls-text-warning`	Add this class to indicate a warning.
`.gls-text-danger`	Add this class to indicate danger.
`.gls-text-info`	Add this class to indicate information.

To apply a gradient or background image to text, add the .gls-text-background class to a <span> element inside the text element. Styles that don’t define a background-image, will apply the primary color.

<h1><span class="gls-text-background"></span></h1>

Text alignment

Add one of these useful classes to align your text.

Class	Description
`.gls-text-left`	Aligns text to the left.
`.gls-text-right`	Aligns text to the right.
`.gls-text-center`	Centers text horizontally.
`.gls-text-justify`	Justifies text.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .gls-text-left

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .gls-text-right

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .gls-text-center

<div class="gls-child-width-1-3@s gls-grid-small" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-small">
            <div class="gls-text-left gls-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.gls-text-left</code>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-small">
            <div class="gls-text-right gls-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.gls-text-right</code>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-small">
            <div class="gls-text-center gls-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.gls-text-center</code>
            </div>
        </div>
    </div>
</div>

Responsive

Gloss provides a number of responsive alignment classes. Basically, they work just like the usual alignment classes, except that they have suffixes that represent the breakpoint from which they come to effect.

Class	Description
`.gls-text-left@s` `.gls-text-center@s` `.gls-text-right@s`	Affects device widths of 640px and larger.
`.gls-text-left@m` `.gls-text-center@m` `.gls-text-right@m`	Affects device widths of 960px and larger.
`.gls-text-left@l` `.gls-text-center@l` `.gls-text-right@l`	Affects device widths of 1200px and larger.
`.gls-text-left@xl` `.gls-text-center@xl` `.gls-text-right@xl`	Affects device widths of 1600px and larger.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .gls-text-center@s

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .gls-text-right@l

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .gls-text-center@m

<div class="gls-child-width-1-3@s gls-grid-small" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-small">
            <div class="gls-text-center@s gls-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.gls-text-center@s</code>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-small">
            <div class="gls-text-right@l gls-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.gls-text-right@l</code>
            </div>
        </div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-small">
            <div class="gls-text-center@m gls-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.gls-text-center@m</code>
            </div>
        </div>
    </div>
</div>

Vertical alignment

Add one of these classes to vertically align text to an object.

Class	Description
`.gls-text-top`	Aligns text to the top.
`.gls-text-middle`	Centers text vertically.
`.gls-text-bottom`	Aligns text to the bottom.
`.gls-text-baseline`	Aligns text to the baseline.

Lorem ipsum.

Lorem ipsum.

Lorem ipsum.

<div class="gls-child-width-1-3@m gls-child-width-1-2@s" gls-grid>
    <div>
        <img src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="50" height="50">
        <span class="gls-text-top">Lorem ipsum.</span>
    </div>
    <div>
        <img src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="50" height="50">
        <span class="gls-text-middle">Lorem ipsum.</span>
    </div>
    <div>
        <img src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="50" height="50">
        <span class="gls-text-bottom">Lorem ipsum.</span>
    </div>
</div>

Text wrapping

Add one of these useful classes to wrap your text.

Class	Description
`.gls-text-truncate`	Prevents text from wrapping into multiple lines, truncating it and displaying an ellipsis instead.
`.gls-text-break`	Breaks strings, if their length exceeds the width of their container.
`.gls-text-nowrap`	Prevents text from wrapping into multiple lines.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.

<div class="gls-child-width-1-2@s" gls-grid>
    <div>
        <div class="gls-panel gls-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="gls-panel gls-text-break">Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</div>
    </div>
</div>