Text
Placer Toolkit 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 pc-body-* class specifies the following properties:
font-family: var(--pc-font-sans)font-weight: var(--pc-font-weight-normal)line-height: var(--pc-line-height-normal)
Additionally, each class specifies a font-size that corresponds to a --pc-font-size-* token from your theme.
| Class name | font-size value | Preview |
|---|---|---|
pc-body-xs | --pc-font-size-xs | Sphinx of black quartz, judge my vow. |
pc-body-s | --pc-font-size-s | Sphinx of black quartz, judge my vow. |
pc-body-m | --pc-font-size-m | Sphinx of black quartz, judge my vow. |
pc-body-l | --pc-font-size-l | Sphinx of black quartz, judge my vow. |
pc-body-xl | --pc-font-size-xl | Sphinx of black quartz, judge my vow. |
Use heading classes to style section titles and headings in your content. Each pc-heading-* class specifies the following properties:
font-family: var(--pc-font-sans)font-weight: var(--pc-font-weight-bold)line-height: var(--pc-line-height-denser)text-wrap: balance
Additionally, each class specifies a font-size using a --pc-font-size-* token from your theme. The font size for each heading class is one step larger than its corresponding body text class.
| Class name | font-size value | Preview |
|---|---|---|
pc-heading-xs | --pc-font-size-s | Five Boxing Wizards |
pc-heading-s | --pc-font-size-m | Five Boxing Wizards |
pc-heading-m | --pc-font-size-l | Five Boxing Wizards |
pc-heading-l | --pc-font-size-xl | Five Boxing Wizards |
pc-heading-xl | --pc-font-size-xxl | Five Boxing Wizards |
pc-heading-xxl | --pc-font-size-xxxl | Five Boxing Wizards |
pc-heading-xxxl | --pc-font-size-xxxxl | Five Boxing Wizards |
Use caption classes to style descriptions or auxiliary text in your content. Each pc-caption-* class specifies the following properties:
color: var(--pc-color-text-quiet)font-family: var(--pc-font-sans)font-weight: var(--pc-font-weight-normal)line-height: var(--pc-line-height-denser)
Additionally, each class specifies a font-size using a --pc-font-size-* token from your theme. The font size for each caption class is one step smaller than its corresponding body text class.
| Class name | font-size value | Preview |
|---|---|---|
pc-caption-xs | --pc-font-size-xxs | Sphinx of black quartz, judge my vow. |
pc-caption-s | --pc-font-size-xs | Sphinx of black quartz, judge my vow. |
pc-caption-m | --pc-font-size-s | Sphinx of black quartz, judge my vow. |
pc-caption-l | --pc-font-size-m | Sphinx of black quartz, judge my vow. |
pc-caption-xl | --pc-font-size-l | Sphinx of black quartz, judge my vow. |