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
NameTypeDefaultDescription
headingLevelrequired'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'The heading level to use
childrenReact.ReactNode''Content rendered inside the Title
classNamestring''Additional classes added to the Title
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet 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 columnSelectorVariableValue
.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--pf-v6-c-title--m-4xl--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-4xl--FontSize
2.25rem
.pf-v6-c-title--pf-v6-c-title--m-4xl--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-3xl--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-3xl--FontSize
1.75rem
.pf-v6-c-title--pf-v6-c-title--m-3xl--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-2xl--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-2xl--FontSize
1.5rem
.pf-v6-c-title--pf-v6-c-title--m-2xl--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-xl--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-xl--FontSize
1.25rem
.pf-v6-c-title--pf-v6-c-title--m-xl--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-lg--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-lg--FontSize
1.125rem
.pf-v6-c-title--pf-v6-c-title--m-lg--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-md--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-md--FontSize
1rem
.pf-v6-c-title--pf-v6-c-title--m-md--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-h1--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-h1--FontSize
1.5rem
.pf-v6-c-title--pf-v6-c-title--m-h1--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-h2--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-h2--FontSize
1.25rem
.pf-v6-c-title--pf-v6-c-title--m-h2--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-h3--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-h3--FontSize
1.125rem
.pf-v6-c-title--pf-v6-c-title--m-h3--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-h4--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-h4--FontSize
1rem
.pf-v6-c-title--pf-v6-c-title--m-h4--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-h5--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-h5--FontSize
1rem
.pf-v6-c-title--pf-v6-c-title--m-h5--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-h6--LineHeight
1.3
.pf-v6-c-title--pf-v6-c-title--m-h6--FontSize
1rem
.pf-v6-c-title--pf-v6-c-title--m-h6--FontWeight
500
.pf-v6-c-title--pf-v6-c-title--m-page-title--FontWeight
700