Text utility classes combine custom properties from your Web Awesome theme to conveniently style text content.
Web Awesome includes classes to set multiple text properties at once to style body text, headings, and captions.
Use body classes to style the main content of your pages. Each wa-body-* class specifies the following properties:
font-family: var(--wa-font-family-body);font-weight: var(--wa-font-weight-body);line-height: var(--wa-line-height-normal);Additionally, each class specifies a font-size that corresponds to a --wa-font-size-* property from your theme.
| Class Name | font-size Value |
Preview |
|---|---|---|
wa-body-xs |
--wa-font-size-xs |
Sphinx of black quartz, judge my vow. |
wa-body-s |
--wa-font-size-s |
Sphinx of black quartz, judge my vow. |
wa-body-m |
--wa-font-size-m |
Sphinx of black quartz, judge my vow. |
wa-body-l |
--wa-font-size-l |
Sphinx of black quartz, judge my vow. |
wa-body-xl |
--wa-font-size-xl |
Sphinx of black quartz, judge my vow. |
Use heading classes to style section titles and headings in your content. Each wa-heading-* class specifies the following properties:
font-family: var(--wa-font-family-heading);font-weight: var(--wa-font-weight-heading);line-height: var(--wa-line-height-condensed);text-wrap: balance;Additionally, each class specifies a font-size using a --wa-font-size-* property from your theme. Heading classes are one font size larger than the corresponding wa-body-* class.
| Class Name | font-size Value |
Preview |
|---|---|---|
wa-heading-xs |
--wa-font-size-s |
Five Boxing Wizards |
wa-heading-s |
--wa-font-size-m |
Five Boxing Wizards |
wa-heading-m |
--wa-font-size-l |
Five Boxing Wizards |
wa-heading-l |
--wa-font-size-xl |
Five Boxing Wizards |
wa-heading-xl |
--wa-font-size-2xl |
Five Boxing Wizards |
wa-heading-2xl |
--wa-font-size-3xl |
Five Boxing Wizards |
wa-heading-3xl |
--wa-font-size-4xl |
Five Boxing Wizards |
Use caption classes to style descriptions or auxiliary text in your content. Each wa-caption-* class specifies the following properties:
color: var(--wa-color-text-quiet);font-family: var(--wa-font-family-body);font-weight: var(--wa-font-weight-body);line-height: var(--wa-line-height-condensed);Additionally, each class specifies a font-size using a --wa-font-size-* property from your theme. Caption classes are one font size smaller than the corresponding wa-body-* class.
| Class Name | font-size Value |
Preview |
|---|---|---|
wa-caption-xs |
--wa-font-size-2xs |
The quick brown fox jumps over the lazy dog. |
wa-caption-s |
--wa-font-size-xs |
The quick brown fox jumps over the lazy dog. |
wa-caption-m |
--wa-font-size-s |
The quick brown fox jumps over the lazy dog. |
wa-caption-l |
--wa-font-size-m |
The quick brown fox jumps over the lazy dog. |
wa-caption-xl |
--wa-font-size-l |
The quick brown fox jumps over the lazy dog. |