Title
The title component applies top and bottom margins, font-weight, font-size, and line-height to titles.
ExamplesDocumentationCSS VariablesExamples
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-u-mt-lg | .pf-u-mb-sm |
| 3xl | .pf-u-mt-lg | .pf-u-mb-sm |
| 2xl | .pf-u-mt-lg | .pf-u-mb-sm |
| xl | .pf-u-mt-lg | .pf-u-mb-sm |
| lg | .pf-u-mt-lg | .pf-u-mb-sm |
| md | .pf-u-mt-lg | .pf-u-mb-sm |
Usage
| Class | Applied | Outcome |
|---|---|---|
.pf-c-title | * | Initiates a title. Always use it with a modifier class. |
.pf-m-4xl | .pf-c-title | Modifies for 4xl size |
.pf-m-3xl | .pf-c-title | Modifies for 3xl size |
.pf-m-2xl | .pf-c-title | Modifies for 2xl size |
.pf-m-xl | .pf-c-title | Modifies for xl size |
.pf-m-lg | .pf-c-title | Modifies for lg size |
.pf-m-md | .pf-c-title | Modifies for md size |
CSS Variables
| .pf-c-title | --pf-c-title--FontFamily | "overpass", overpass, "open sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | ||
| .pf-c-title | --pf-c-title--m-4xl--LineHeight | 1.3 | ||
| .pf-c-title | --pf-c-title--m-4xl--FontSize | 2.25rem | ||
| .pf-c-title | --pf-c-title--m-4xl--FontWeight | 400 | ||
| .pf-c-title | --pf-c-title--m-3xl--LineHeight | 1.3 | ||
| .pf-c-title | --pf-c-title--m-3xl--FontSize | 1.75rem | ||
| .pf-c-title | --pf-c-title--m-3xl--FontWeight | 400 | ||
| .pf-c-title | --pf-c-title--m-2xl--LineHeight | 1.3 | ||
| .pf-c-title | --pf-c-title--m-2xl--FontSize | 1.5rem | ||
| .pf-c-title | --pf-c-title--m-2xl--FontWeight | 400 | ||
| .pf-c-title | --pf-c-title--m-xl--LineHeight | 1.5 | ||
| .pf-c-title | --pf-c-title--m-xl--FontSize | 1.25rem | ||
| .pf-c-title | --pf-c-title--m-xl--FontWeight | 400 | ||
| .pf-c-title | --pf-c-title--m-lg--LineHeight | 1.5 | ||
| .pf-c-title | --pf-c-title--m-lg--FontSize | 1.125rem | ||
| .pf-c-title | --pf-c-title--m-lg--FontWeight | 500 | ||
| .pf-c-title | --pf-c-title--m-md--LineHeight | 1.5 | ||
| .pf-c-title | --pf-c-title--m-md--FontSize | 1rem | ||
| .pf-c-title | --pf-c-title--m-md--FontWeight | 500 | ||
| .pf-m-redhat-font .pf-c-title | --pf-c-title--m-lg--FontWeight | 400 | ||
| .pf-m-redhat-font .pf-c-title | --pf-c-title--m-md--FontWeight | 400 | ||
