CSS Utilities Text

Text

Text utility classes use custom properties from your Web Awesome theme and other standard CSS properties to style text elements on the fly.

The classes on this page cover the most common needs: picking a size and weight for body copy, styling headings, aligning paragraphs, truncating overflow, and changing font color. Every class is built on your theme's typography tokens, so switching themes or tweaking your type scale updates the whole site at once.

Body

Link to This Section

Use wa-body-* classes to style the main content of your pages. Each class specifies a font-size that corresponds to a font size token from your theme.

3xs and 2xs fall below typical legibility. It's best to keep their use to non-essential UI only (e.g. labels, metadata) to maintain accessibility.

Alternatively, use wa-body to apply the same styling without an explicit font size.

Class Name	Preview
wa-body-3xs	Five boxing wizards
wa-body-2xs	Five boxing wizards
wa-body-xs	Five boxing wizards
wa-body-s	Five boxing wizards
wa-body-m	Five boxing wizards
wa-body-l	Five boxing wizards
wa-body-xl	Five boxing wizards
wa-body-2xl	Five boxing wizards
wa-body-3xl	Five boxing wizards
wa-body-4xl	Five boxing wizards
wa-body-5xl	Five boxing wizards

Headings

Link to This Section

Use wa-heading-* classes to style section titles and headings in your content. Each class specifies a font-size that corresponds to a font size token from your theme.

Alternatively, use wa-heading to apply the same styling without an explicit font size.

Class Name	Preview
wa-heading-3xs	Five boxing wizards
wa-heading-2xs	Five boxing wizards
wa-heading-xs	Five boxing wizards
wa-heading-s	Five boxing wizards
wa-heading-m	Five boxing wizards
wa-heading-l	Five boxing wizards
wa-heading-xl	Five boxing wizards
wa-heading-2xl	Five boxing wizards
wa-heading-3xl	Five boxing wizards
wa-heading-4xl	Five boxing wizards
wa-heading-5xl	Five boxing wizards

Captions

Link to This Section

Use wa-caption-* classes to style descriptions or auxiliary text in your content. Each class specifies a font-size that corresponds to a font size token from your theme.

Alternatively, use wa-caption to apply the same styling without an explicit font size.

Class Name	Preview
wa-caption-3xs	Five boxing wizards
wa-caption-2xs	Five boxing wizards
wa-caption-xs	Five boxing wizards
wa-caption-s	Five boxing wizards
wa-caption-m	Five boxing wizards
wa-caption-l	Five boxing wizards
wa-caption-xl	Five boxing wizards
wa-caption-2xl	Five boxing wizards
wa-caption-3xl	Five boxing wizards
wa-caption-4xl	Five boxing wizards
wa-caption-5xl	Five boxing wizards

Longform

Link to This Section

Use wa-longform-* classes to style lengthy content like essays or blog posts. Each class specifies a font-size that corresponds to a font size token from your theme.

Alternatively, use wa-longform to apply the same styling without an explicit font size.

Class Name	Preview
wa-longform-3xs	Five boxing wizards
wa-longform-2xs	Five boxing wizards
wa-longform-xs	Five boxing wizards
wa-longform-s	Five boxing wizards
wa-longform-m	Five boxing wizards
wa-longform-l	Five boxing wizards
wa-longform-xl	Five boxing wizards
wa-longform-2xl	Five boxing wizards
wa-longform-3xl	Five boxing wizards
wa-longform-4xl	Five boxing wizards
wa-longform-5xl	Five boxing wizards

Links

Link to This Section

Use wa-link to give interactive text a link-like appearance. Alternatively, use wa-link-plain to remove typical link styles from <a> elements.

Class Name	Preview
wa-link	Five boxing wizards
wa-link-plain	Five boxing wizards

Lists

Link to This Section

Ordered (<ol>) and unordered (<ul>) lists are given default styles by either Web Awesome's native styles or your browser. Use wa-list-plain to clear any built-in list styles.

Class Name	Preview
wa-list-plain	First list item Second list item Final list item

Form Controls

Link to This Section

Use wa-form-control-* classes to style labels, values, placeholders, and hints outside of typical form control contexts with form control tokens from your theme.

Class Name	Preview
wa-form-control-label	Five boxing wizards
wa-form-control-value	Five boxing wizards
wa-form-control-placeholder	Five boxing wizards
wa-form-control-hint	Five boxing wizards

Font Size

Link to This Section

Use single-purpose wa-font-size-* classes to apply a given font size from your theme to any element without additional styling.

Class Name	Preview
wa-font-size-3xs	Five boxing wizards
wa-font-size-2xs	Five boxing wizards
wa-font-size-xs	Five boxing wizards
wa-font-size-s	Five boxing wizards
wa-font-size-m	Five boxing wizards
wa-font-size-l	Five boxing wizards
wa-font-size-xl	Five boxing wizards
wa-font-size-2xl	Five boxing wizards
wa-font-size-3xl	Five boxing wizards
wa-font-size-4xl	Five boxing wizards
wa-font-size-5xl	Five boxing wizards

Font Weight

Link to This Section

Use single-purpose wa-font-weight-* classes to apply a given font weight from your theme to any element without additional styling.

Class Name	Preview
wa-font-weight-light	Five boxing wizards
wa-font-weight-normal	Five boxing wizards
wa-font-weight-semibold	Five boxing wizards
wa-font-weight-bold	Five boxing wizards

Text Color

Link to This Section

Use single-purpose wa-color-text-* classes to apply a given text color from your theme to any element without additional styling.

Class Name	Preview
wa-color-text-quiet	Five boxing wizards
wa-color-text-normal	Five boxing wizards
wa-color-text-link	Five boxing wizards

Wrapping

Link to This Section

Use these classes to control how text wraps across lines. They apply standard CSS text-wrap values.

Class Name	Preview
wa-text-nowrap	The five boxing wizards jump quickly. How quickly daft jumping zebras vex!
wa-text-balance	The five boxing wizards jump quickly. How quickly daft jumping zebras vex!
wa-text-pretty	The five boxing wizards jump quickly. How quickly daft jumping zebras vex!

wa-text-pretty is wrapped in an @supports rule because Firefox does not yet support text-wrap: pretty. In unsupported browsers, the class has no effect and text wraps normally.

The original wa-text-wrap-nowrap, wa-text-wrap-balance, and wa-text-wrap-pretty class names continue to work as aliases for backwards compatibility. These older names are deprecated and will be removed in a future major version — we recommend updating to the shorter wa-text-* names above.

Transform

Link to This Section

Use these classes to change the case of text. They apply standard CSS text-transform values.

Class Name	Preview
wa-text-uppercase	Five boxing wizards
wa-text-lowercase	Five boxing wizards
wa-text-capitalize	Five boxing wizards

Large blocks of uppercase text are harder for everyone to read and especially difficult for folks with dyslexia. Reserve it for buttons, badges, or short headings.

Alignment

Link to This Section

Use these classes to align text within its container. They apply standard CSS text-align values using logical properties, so they adapt automatically to the document's writing direction.

Class Name	Preview
wa-text-start	Five boxing wizards
wa-text-center	Five boxing wizards
wa-text-end	Five boxing wizards
wa-text-justify	The five boxing wizards jump quickly. How quickly daft jumping zebras vex!

Justified text can create uneven word spacing that's harder for everyone to read and especially difficult for folks with dyslexia. Reserve it for short, narrow text columns.

Truncation

Link to This Section

Use the wa-text-truncate class to truncate text with an ellipsis instead of letting it overflow or wrap.

Class Name	Preview
wa-text-truncate	The five boxing wizards jump quickly. How quickly daft jumping zebras vex!