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

Default Sizes

h1 defaults to 2xl

h2 defaults to xl

h3 defaults to lg

h4 defaults to md

h5 defaults to md

h6 defaults to md

Custom Sizes

h1 as 4xl

h2 as 3xl

h3 as 2xl

h4 as xl

h5 as lg

h6 as md Title

Props

Title

*required
Name	Type	Default	Description
headingLevelrequired	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'		The heading level to use
children	React.ReactNode	''	Content rendered inside the Title
className	string	''	Additional classes added to the Title
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	true	Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
size	'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl'	headingLevelSizeMap[HeadingLevel]	The size of the Title

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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines