Title

HTML

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-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	'"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif'
--pf-c-title--FontFamily --pf-global--FontFamily--heading--sans-serif $pf-global--FontFamily--heading--sans-serif '"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif'
	.pf-c-title	--pf-c-title--m-4xl--LineHeight	1.3
--pf-c-title--m-4xl--LineHeight --pf-global--LineHeight--sm $pf-global--LineHeight--sm 1.3
	.pf-c-title	--pf-c-title--m-4xl--FontSize	2.25rem
--pf-c-title--m-4xl--FontSize --pf-global--FontSize--4xl $pf-global--FontSize--4xl pf-font-prem(36px) 2.25rem
	.pf-c-title	--pf-c-title--m-4xl--FontWeight	400
--pf-c-title--m-4xl--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-title	--pf-c-title--m-3xl--LineHeight	1.3
--pf-c-title--m-3xl--LineHeight --pf-global--LineHeight--sm $pf-global--LineHeight--sm 1.3
	.pf-c-title	--pf-c-title--m-3xl--FontSize	1.75rem
--pf-c-title--m-3xl--FontSize --pf-global--FontSize--3xl $pf-global--FontSize--3xl pf-font-prem(28px) 1.75rem
	.pf-c-title	--pf-c-title--m-3xl--FontWeight	400
--pf-c-title--m-3xl--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-title	--pf-c-title--m-2xl--LineHeight	1.3
--pf-c-title--m-2xl--LineHeight --pf-global--LineHeight--sm $pf-global--LineHeight--sm 1.3
	.pf-c-title	--pf-c-title--m-2xl--FontSize	1.5rem
--pf-c-title--m-2xl--FontSize --pf-global--FontSize--2xl $pf-global--FontSize--2xl pf-font-prem(24px) 1.5rem
	.pf-c-title	--pf-c-title--m-2xl--FontWeight	400
--pf-c-title--m-2xl--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-title	--pf-c-title--m-xl--LineHeight	1.5
--pf-c-title--m-xl--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-title	--pf-c-title--m-xl--FontSize	1.25rem
--pf-c-title--m-xl--FontSize --pf-global--FontSize--xl $pf-global--FontSize--xl pf-font-prem(20px) 1.25rem
	.pf-c-title	--pf-c-title--m-xl--FontWeight	400
--pf-c-title--m-xl--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-title	--pf-c-title--m-lg--LineHeight	1.5
--pf-c-title--m-lg--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-title	--pf-c-title--m-lg--FontSize	1.125rem
--pf-c-title--m-lg--FontSize --pf-global--FontSize--lg $pf-global--FontSize--lg pf-font-prem(18px) 1.125rem
	.pf-c-title	--pf-c-title--m-lg--FontWeight	400
--pf-c-title--m-lg--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-title	--pf-c-title--m-md--LineHeight	1.5
--pf-c-title--m-md--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-title	--pf-c-title--m-md--FontSize	1rem
--pf-c-title--m-md--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-title	--pf-c-title--m-md--FontWeight	400
--pf-c-title--m-md--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-m-overpass-font .pf-c-title	--pf-c-title--m-md--FontWeight	700
--pf-c-title--m-md--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold $pf-global--FontWeight--bold 700
	.pf-m-overpass-font .pf-c-title	--pf-c-title--m-lg--FontWeight	700
--pf-c-title--m-lg--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold $pf-global--FontWeight--bold 700

View source on GitHub