Title

A title component applies top and bottom margins, font-weight, font-size, and line-height to page and section headings.

Examples

Default Sizes

H1-styled title

H2-styled title

H3-styled title

H4-styled title

H5-styled title

H6-styled title

Custom Sizes

4xl title

3xl title

2xl title

xl title

lg title

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'		The size of the Title

CSS variables

Expand or collapse column	Selector	Variable	Value
	.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
	.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
	.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
	.pf-v6-c-title	--pf-v6-c-title--m-4xl--FontWeight	500
--pf-v6-c-title--m-4xl--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.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
	.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
	.pf-v6-c-title	--pf-v6-c-title--m-3xl--FontWeight	500
--pf-v6-c-title--m-3xl--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.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
	.pf-v6-c-title	--pf-v6-c-title--m-2xl--FontSize	1.5rem
--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.5rem
	.pf-v6-c-title	--pf-v6-c-title--m-2xl--FontWeight	500
--pf-v6-c-title--m-2xl--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.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
	.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
	.pf-v6-c-title	--pf-v6-c-title--m-xl--FontWeight	500
--pf-v6-c-title--m-xl--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.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
	.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
	.pf-v6-c-title	--pf-v6-c-title--m-lg--FontWeight	500
--pf-v6-c-title--m-lg--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.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
	.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
	.pf-v6-c-title	--pf-v6-c-title--m-md--FontWeight	500
--pf-v6-c-title--m-md--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.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
	.pf-v6-c-title	--pf-v6-c-title--m-h1--FontSize	1.5rem
--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.5rem
	.pf-v6-c-title	--pf-v6-c-title--m-h1--FontWeight	500
--pf-v6-c-title--m-h1--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.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
	.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
	.pf-v6-c-title	--pf-v6-c-title--m-h2--FontWeight	500
--pf-v6-c-title--m-h2--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.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
	.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
	.pf-v6-c-title	--pf-v6-c-title--m-h3--FontWeight	500
--pf-v6-c-title--m-h3--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.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
	.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
	.pf-v6-c-title	--pf-v6-c-title--m-h4--FontWeight	500
--pf-v6-c-title--m-h4--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.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
	.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
	.pf-v6-c-title	--pf-v6-c-title--m-h5--FontWeight	500
--pf-v6-c-title--m-h5--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500
	.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
	.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
	.pf-v6-c-title	--pf-v6-c-title--m-h6--FontWeight	500
--pf-v6-c-title--m-h6--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 500

View source on GitHub