Patternfly Logo

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 properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNo''Content rendered inside the Title
classNamestringNo''Additional classes added to the Title
headingLevel'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'YesThe heading level to use
size'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'NoheadingLevelSizeMap[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