Skip to content
Patternfly Logo

Title

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

*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
ouiaSafeNo type infotrue
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