Text
Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Placer Toolkit includes classes to set multiple text properties at once to style body text, headings and captions.
Body#
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. |
Headings#
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 |
Captions#
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. |