Skip to main content

Text

Text

Full documentation: https://webawesome.com/docs/utilities/text

CSS Utilities 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

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
`wa-body-3xs`
`wa-body-2xs`
`wa-body-xs`
`wa-body-s`
`wa-body-m`
`wa-body-l`
`wa-body-xl`
`wa-body-2xl`
`wa-body-3xl`
`wa-body-4xl`
`wa-body-5xl`

Headings

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
`wa-heading-3xs`
`wa-heading-2xs`
`wa-heading-xs`
`wa-heading-s`
`wa-heading-m`
`wa-heading-l`
`wa-heading-xl`
`wa-heading-2xl`
`wa-heading-3xl`
`wa-heading-4xl`
`wa-heading-5xl`

Captions

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
`wa-caption-3xs`
`wa-caption-2xs`
`wa-caption-xs`
`wa-caption-s`
`wa-caption-m`
`wa-caption-l`
`wa-caption-xl`
`wa-caption-2xl`
`wa-caption-3xl`
`wa-caption-4xl`
`wa-caption-5xl`

Longform

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
`wa-longform-3xs`
`wa-longform-2xs`
`wa-longform-xs`
`wa-longform-s`
`wa-longform-m`
`wa-longform-l`
`wa-longform-xl`
`wa-longform-2xl`
`wa-longform-3xl`
`wa-longform-4xl`
`wa-longform-5xl`

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
`wa-link`
`wa-link-plain`

Lists

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
`wa-list-plain`

Form Controls

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
`wa-form-control-label`
`wa-form-control-value`
`wa-form-control-placeholder`
`wa-form-control-hint`

Font Size

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

Class Name
`wa-font-size-3xs`
`wa-font-size-2xs`
`wa-font-size-xs`
`wa-font-size-s`
`wa-font-size-m`
`wa-font-size-l`
`wa-font-size-xl`
`wa-font-size-2xl`
`wa-font-size-3xl`
`wa-font-size-4xl`
`wa-font-size-5xl`

Font Weight

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

Class Name
`wa-font-weight-light`
`wa-font-weight-normal`
`wa-font-weight-semibold`
`wa-font-weight-bold`

Text Color

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

Class Name
`wa-color-text-quiet`
`wa-color-text-normal`
`wa-color-text-link`

Truncation

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

Class Name
`wa-text-truncate`