Text

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

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.

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

Class Name Preview
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

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 Preview
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

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 Preview
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

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 Preview
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

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
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 Preview
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 Preview
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 Preview
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

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 Preview
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 Preview
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 Preview
wa-text-truncate
    No results
    Navigate Enter Select Esc Close