Examples
Heading level modifiers
H1-styled title
H2-styled title
H3-styled title
H4-styled title
H5-styled title
H6-styled title
Documentation
Overview
The title component styles font-size, font-weight, and line-height to titles.
The content component defines margin on headers. To regain the same spacing use, spacer utility classes:
Title | Margin top | Margin bottom |
|---|---|---|
4xl | .pf-v6-u-mt-lg | .pf-v6-u-mb-sm |
3xl | .pf-v6-u-mt-lg | .pf-v6-u-mb-sm |
2xl | .pf-v6-u-mt-lg | .pf-v6-u-mb-sm |
xl | .pf-v6-u-mt-lg | .pf-v6-u-mb-sm |
lg | .pf-v6-u-mt-lg | .pf-v6-u-mb-sm |
md | .pf-v6-u-mt-lg | .pf-v6-u-mb-sm |
Usage
Class | Applied | Outcome |
|---|---|---|
.pf-v6-c-title | * | Initiates a title. Always use it with a modifier class. |
.pf-m-4xl | .pf-v6-c-title | Modifies for 4xl size |
.pf-m-3xl | .pf-v6-c-title | Modifies for 3xl size |
.pf-m-2xl | .pf-v6-c-title | Modifies for 2xl size |
.pf-m-xl | .pf-v6-c-title | Modifies for xl size |
.pf-m-lg | .pf-v6-c-title | Modifies for lg size |
.pf-m-md | .pf-v6-c-title | Modifies for md size |
.pf-m-h1 | .pf-v6-c-title | Modifies for default h1 size |
.pf-m-h2 | .pf-v6-c-title | Modifies for default h2 size |
.pf-m-h3 | .pf-v6-c-title | Modifies for default h3 size |
.pf-m-h4 | .pf-v6-c-title | Modifies for default h4 size |
.pf-m-h5 | .pf-v6-c-title | Modifies for default h5 size |
.pf-m-h6 | .pf-v6-c-title | Modifies for default h6 size |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--FontFamily | "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-4xl--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-4xl--FontSize | 2.25rem | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-4xl--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-3xl--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-3xl--FontSize | 1.75rem | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-3xl--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-2xl--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-2xl--FontSize | 1.375rem | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-2xl--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-xl--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-xl--FontSize | 1.25rem | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-xl--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-lg--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-lg--FontSize | 1.125rem | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-lg--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-md--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-md--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-md--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h1--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h1--FontSize | 1.375rem | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h1--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h2--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h2--FontSize | 1.25rem | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h2--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h3--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h3--FontSize | 1.125rem | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h3--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h4--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h4--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h4--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h5--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h5--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h5--FontWeight | 700 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h6--LineHeight | 1.3 | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h6--FontSize | 1rem | ||
| ||||
| :where(:root, .pf-v6-c-title) | --pf-v6-c-title--m-h6--FontWeight | 700 | ||
| ||||
