Skip to content
PatternFly logo

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
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'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--pf-c-title--m-4xl--LineHeight
1.3
.pf-c-title--pf-c-title--m-4xl--FontSize
2.25rem
.pf-c-title--pf-c-title--m-4xl--FontWeight
400
.pf-c-title--pf-c-title--m-3xl--LineHeight
1.3
.pf-c-title--pf-c-title--m-3xl--FontSize
1.75rem
.pf-c-title--pf-c-title--m-3xl--FontWeight
400
.pf-c-title--pf-c-title--m-2xl--LineHeight
1.3
.pf-c-title--pf-c-title--m-2xl--FontSize
1.5rem
.pf-c-title--pf-c-title--m-2xl--FontWeight
400
.pf-c-title--pf-c-title--m-xl--LineHeight
1.5
.pf-c-title--pf-c-title--m-xl--FontSize
1.25rem
.pf-c-title--pf-c-title--m-xl--FontWeight
400
.pf-c-title--pf-c-title--m-lg--LineHeight
1.5
.pf-c-title--pf-c-title--m-lg--FontSize
1.125rem
.pf-c-title--pf-c-title--m-lg--FontWeight
400
.pf-c-title--pf-c-title--m-md--LineHeight
1.5
.pf-c-title--pf-c-title--m-md--FontSize
1rem
.pf-c-title--pf-c-title--m-md--FontWeight
400
.pf-m-overpass-font .pf-c-title--pf-c-title--m-md--FontWeight
700
.pf-m-overpass-font .pf-c-title--pf-c-title--m-lg--FontWeight
700

View source on GitHub