Title

The title component applies top and bottom margins, font-weight, font-size, and line-height to titles.

Examples Props CSS Variables

Examples

Sizes

4xl Title

3xl Title

2xl Title

xl Title

lg Title

md Title

Default size mappings

h1 default to 2xl

h2 defaults to xl

h3 defaults to lg

h4 defaults to md

h5 defaults to md

h6 defaults to md

Props

Title properties
Name	Type	Required	Default	Description
size	'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl'	No	headingLevelSizeMap[HeadingLevel]	The size of the Title
children	React.ReactNode	No	''	Content rendered inside the Title
className	string	No	''	Additional classes added to the Title
headingLevel	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	Yes		The heading level to use

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--FontFamily --pf-global--FontFamily--heading--sans-serif $pf-global--FontFamily--heading--sans-serif $pf-global--FontFamily--sans-serif "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--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	500
--pf-c-title--m-lg--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold 500
	.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	500
--pf-c-title--m-md--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold 500
	.pf-m-redhat-font .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-m-redhat-font .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