Title

A title component applies top and bottom margins, font-weight, font-size, and line-height to titles. The most common usage for a title is to define headings within a page. For more information about the relationship between title component sizes and HTML heading levels, see the Typography guidelines.

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

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
--pf-v6-c-title--FontFamily --pf-t--global--font--family--heading --pf-t--global--font--family--200 "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
--pf-v6-c-title--m-4xl--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-4xl--FontSize	2.25rem
--pf-v6-c-title--m-4xl--FontSize --pf-t--global--font--size--heading--2xl --pf-t--global--font--size--4xl --pf-t--global--font--size--800 2.25rem
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-4xl--FontWeight	700
--pf-v6-c-title--m-4xl--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-3xl--LineHeight	1.3
--pf-v6-c-title--m-3xl--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-3xl--FontSize	1.75rem
--pf-v6-c-title--m-3xl--FontSize --pf-t--global--font--size--heading--xl --pf-t--global--font--size--3xl --pf-t--global--font--size--700 1.75rem
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-3xl--FontWeight	700
--pf-v6-c-title--m-3xl--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-2xl--LineHeight	1.3
--pf-v6-c-title--m-2xl--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-2xl--FontSize	1.375rem
--pf-v6-c-title--m-2xl--FontSize --pf-t--global--font--size--heading--lg --pf-t--global--font--size--2xl --pf-t--global--font--size--600 1.375rem
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-2xl--FontWeight	700
--pf-v6-c-title--m-2xl--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-xl--LineHeight	1.3
--pf-v6-c-title--m-xl--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-xl--FontSize	1.25rem
--pf-v6-c-title--m-xl--FontSize --pf-t--global--font--size--heading--md --pf-t--global--font--size--xl --pf-t--global--font--size--500 1.25rem
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-xl--FontWeight	700
--pf-v6-c-title--m-xl--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-lg--LineHeight	1.3
--pf-v6-c-title--m-lg--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-lg--FontSize	1.125rem
--pf-v6-c-title--m-lg--FontSize --pf-t--global--font--size--heading--sm --pf-t--global--font--size--lg --pf-t--global--font--size--400 1.125rem
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-lg--FontWeight	700
--pf-v6-c-title--m-lg--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-md--LineHeight	1.3
--pf-v6-c-title--m-md--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-md--FontSize	1rem
--pf-v6-c-title--m-md--FontSize --pf-t--global--font--size--heading--xs --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-md--FontWeight	700
--pf-v6-c-title--m-md--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h1--LineHeight	1.3
--pf-v6-c-title--m-h1--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h1--FontSize	1.375rem
--pf-v6-c-title--m-h1--FontSize --pf-t--global--font--size--heading--h1 --pf-t--global--font--size--2xl --pf-t--global--font--size--600 1.375rem
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h1--FontWeight	700
--pf-v6-c-title--m-h1--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h2--LineHeight	1.3
--pf-v6-c-title--m-h2--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h2--FontSize	1.25rem
--pf-v6-c-title--m-h2--FontSize --pf-t--global--font--size--heading--h2 --pf-t--global--font--size--xl --pf-t--global--font--size--500 1.25rem
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h2--FontWeight	700
--pf-v6-c-title--m-h2--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h3--LineHeight	1.3
--pf-v6-c-title--m-h3--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h3--FontSize	1.125rem
--pf-v6-c-title--m-h3--FontSize --pf-t--global--font--size--heading--h3 --pf-t--global--font--size--lg --pf-t--global--font--size--400 1.125rem
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h3--FontWeight	700
--pf-v6-c-title--m-h3--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h4--LineHeight	1.3
--pf-v6-c-title--m-h4--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h4--FontSize	1rem
--pf-v6-c-title--m-h4--FontSize --pf-t--global--font--size--heading--h4 --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h4--FontWeight	700
--pf-v6-c-title--m-h4--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h5--LineHeight	1.3
--pf-v6-c-title--m-h5--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h5--FontSize	1rem
--pf-v6-c-title--m-h5--FontSize --pf-t--global--font--size--heading--h5 --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h5--FontWeight	700
--pf-v6-c-title--m-h5--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h6--LineHeight	1.3
--pf-v6-c-title--m-h6--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h6--FontSize	1rem
--pf-v6-c-title--m-h6--FontSize --pf-t--global--font--size--heading--h6 --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	:where(:root, .pf-v6-c-title)	--pf-v6-c-title--m-h6--FontWeight	700
--pf-v6-c-title--m-h6--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700

View source on GitHub