Text
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.
Body Jump to heading
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-* token 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. |
Headings Jump to heading
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-* token 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 |
Captions Jump to heading
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-* token 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. |