Title

A title component applies top and bottom margins, font-weight, font-size, and line-height to page and section headings.

Examples

Size modifiers

4xl title

3xl title

2xl title

xl title

lg title

md title

Heading level modifiers

H1-styled title
H2-styled title
H3-styled title
H4-styled title
H5-styled title
H6-styled title

Page title

2xl page title

H1 page 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
.pf-m-page-title
.pf-v6-c-title
Applies page title styles. Note: .pf-m-page-title should only apply to the heading that serves as the title for the current page.

CSS variables

Expand or collapse columnSelectorVariableValue
.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
.pf-v6-c-title--pf-v6-c-title--m-4xl--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-4xl--FontSize
2.25rem
.pf-v6-c-title--pf-v6-c-title--m-4xl--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-3xl--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-3xl--FontSize
1.75rem
.pf-v6-c-title--pf-v6-c-title--m-3xl--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-2xl--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-2xl--FontSize
1.5rem
.pf-v6-c-title--pf-v6-c-title--m-2xl--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-xl--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-xl--FontSize
1.25rem
.pf-v6-c-title--pf-v6-c-title--m-xl--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-lg--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-lg--FontSize
1.125rem
.pf-v6-c-title--pf-v6-c-title--m-lg--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-md--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-md--FontSize
1rem
.pf-v6-c-title--pf-v6-c-title--m-md--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-h1--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-h1--FontSize
1.5rem
.pf-v6-c-title--pf-v6-c-title--m-h1--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-h2--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-h2--FontSize
1.25rem
.pf-v6-c-title--pf-v6-c-title--m-h2--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-h3--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-h3--FontSize
1.125rem
.pf-v6-c-title--pf-v6-c-title--m-h3--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-h4--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-h4--FontSize
1rem
.pf-v6-c-title--pf-v6-c-title--m-h4--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-h5--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-h5--FontSize
1rem
.pf-v6-c-title--pf-v6-c-title--m-h5--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-h6--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-h6--FontSize
1rem
.pf-v6-c-title--pf-v6-c-title--m-h6--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-page-title--FontWeight
700