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

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-v5-u-mt-lg`	`.pf-v5-u-mb-sm`
3xl	`.pf-v5-u-mt-lg`	`.pf-v5-u-mb-sm`
2xl	`.pf-v5-u-mt-lg`	`.pf-v5-u-mb-sm`
xl	`.pf-v5-u-mt-lg`	`.pf-v5-u-mb-sm`
lg	`.pf-v5-u-mt-lg`	`.pf-v5-u-mb-sm`
md	`.pf-v5-u-mt-lg`	`.pf-v5-u-mb-sm`

Usage

Class	Applied	Outcome
`.pf-v5-c-title`	`*`	Initiates a title. Always use it with a modifier class.
`.pf-m-4xl`	`.pf-v5-c-title`	Modifies for 4xl size
`.pf-m-3xl`	`.pf-v5-c-title`	Modifies for 3xl size
`.pf-m-2xl`	`.pf-v5-c-title`	Modifies for 2xl size
`.pf-m-xl`	`.pf-v5-c-title`	Modifies for xl size
`.pf-m-lg`	`.pf-v5-c-title`	Modifies for lg size
`.pf-m-md`	`.pf-v5-c-title`	Modifies for md size

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-title	--pf-v5-c-title--FontFamily	'"RedHatDisplay", helvetica, arial, sans-serif'
--pf-v5-c-title--FontFamily --pf-v5-global--FontFamily--heading $pf-v5-global--FontFamily--heading '"RedHatDisplay", helvetica, arial, sans-serif'
	.pf-v5-c-title	--pf-v5-c-title--m-4xl--LineHeight	1.3
--pf-v5-c-title--m-4xl--LineHeight --pf-v5-global--LineHeight--sm $pf-v5-global--LineHeight--sm 1.3
	.pf-v5-c-title	--pf-v5-c-title--m-4xl--FontSize	2.25rem
--pf-v5-c-title--m-4xl--FontSize --pf-v5-global--FontSize--4xl $pf-v5-global--FontSize--4xl pf-font-prem(36px) 2.25rem
	.pf-v5-c-title	--pf-v5-c-title--m-4xl--FontWeight	400
--pf-v5-c-title--m-4xl--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400
	.pf-v5-c-title	--pf-v5-c-title--m-3xl--LineHeight	1.3
--pf-v5-c-title--m-3xl--LineHeight --pf-v5-global--LineHeight--sm $pf-v5-global--LineHeight--sm 1.3
	.pf-v5-c-title	--pf-v5-c-title--m-3xl--FontSize	1.75rem
--pf-v5-c-title--m-3xl--FontSize --pf-v5-global--FontSize--3xl $pf-v5-global--FontSize--3xl pf-font-prem(28px) 1.75rem
	.pf-v5-c-title	--pf-v5-c-title--m-3xl--FontWeight	400
--pf-v5-c-title--m-3xl--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400
	.pf-v5-c-title	--pf-v5-c-title--m-2xl--LineHeight	1.3
--pf-v5-c-title--m-2xl--LineHeight --pf-v5-global--LineHeight--sm $pf-v5-global--LineHeight--sm 1.3
	.pf-v5-c-title	--pf-v5-c-title--m-2xl--FontSize	1.5rem
--pf-v5-c-title--m-2xl--FontSize --pf-v5-global--FontSize--2xl $pf-v5-global--FontSize--2xl pf-font-prem(24px) 1.5rem
	.pf-v5-c-title	--pf-v5-c-title--m-2xl--FontWeight	400
--pf-v5-c-title--m-2xl--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400
	.pf-v5-c-title	--pf-v5-c-title--m-xl--LineHeight	1.5
--pf-v5-c-title--m-xl--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5
	.pf-v5-c-title	--pf-v5-c-title--m-xl--FontSize	1.25rem
--pf-v5-c-title--m-xl--FontSize --pf-v5-global--FontSize--xl $pf-v5-global--FontSize--xl pf-font-prem(20px) 1.25rem
	.pf-v5-c-title	--pf-v5-c-title--m-xl--FontWeight	400
--pf-v5-c-title--m-xl--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400
	.pf-v5-c-title	--pf-v5-c-title--m-lg--LineHeight	1.5
--pf-v5-c-title--m-lg--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5
	.pf-v5-c-title	--pf-v5-c-title--m-lg--FontSize	1.125rem
--pf-v5-c-title--m-lg--FontSize --pf-v5-global--FontSize--lg $pf-v5-global--FontSize--lg pf-font-prem(18px) 1.125rem
	.pf-v5-c-title	--pf-v5-c-title--m-lg--FontWeight	400
--pf-v5-c-title--m-lg--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400
	.pf-v5-c-title	--pf-v5-c-title--m-md--LineHeight	1.5
--pf-v5-c-title--m-md--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 1.5
	.pf-v5-c-title	--pf-v5-c-title--m-md--FontSize	1rem
--pf-v5-c-title--m-md--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-v5-c-title	--pf-v5-c-title--m-md--FontWeight	400
--pf-v5-c-title--m-md--FontWeight --pf-v5-global--FontWeight--normal $pf-v5-global--FontWeight--normal 400

View source on GitHub