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 .
4xl Title 3xl Title 2xl Title xl Title lg Title md Title
h1 default to 2xl h2 defaults to xl h3 defaults to lg h4 defaults to md h5 defaults to md h6 defaults to md
Name Type Default Description headingLevel* required '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 ouiaSafe No type info true size 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' headingLevelSizeMap[HeadingLevel] The size of the Title
.pf-c-title --pf-c-title--FontFamily '"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif'
--pf-c-title--FontFamily
--pf-global--FontFamily--heading--sans-serif $pf-global--FontFamily--heading--sans-serif '"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif' .pf-c-title --pf-c-title--m-4xl--LineHeight --pf-c-title--m-4xl--LineHeight
--pf-global--LineHeight--sm $pf-global--LineHeight--sm .pf-c-title --pf-c-title--m-4xl--FontSize --pf-c-title--m-4xl--FontSize
--pf-global--FontSize--4xl $pf-global--FontSize--4xl .pf-c-title --pf-c-title--m-4xl--FontWeight --pf-c-title--m-4xl--FontWeight
--pf-global--FontWeight--normal $pf-global--FontWeight--normal .pf-c-title --pf-c-title--m-3xl--LineHeight --pf-c-title--m-3xl--LineHeight
--pf-global--LineHeight--sm $pf-global--LineHeight--sm .pf-c-title --pf-c-title--m-3xl--FontSize --pf-c-title--m-3xl--FontSize
--pf-global--FontSize--3xl $pf-global--FontSize--3xl .pf-c-title --pf-c-title--m-3xl--FontWeight --pf-c-title--m-3xl--FontWeight
--pf-global--FontWeight--normal $pf-global--FontWeight--normal .pf-c-title --pf-c-title--m-2xl--LineHeight --pf-c-title--m-2xl--LineHeight
--pf-global--LineHeight--sm $pf-global--LineHeight--sm .pf-c-title --pf-c-title--m-2xl--FontSize --pf-c-title--m-2xl--FontSize
--pf-global--FontSize--2xl $pf-global--FontSize--2xl .pf-c-title --pf-c-title--m-2xl--FontWeight --pf-c-title--m-2xl--FontWeight
--pf-global--FontWeight--normal $pf-global--FontWeight--normal .pf-c-title --pf-c-title--m-xl--LineHeight --pf-c-title--m-xl--LineHeight
--pf-global--LineHeight--md $pf-global--LineHeight--md .pf-c-title --pf-c-title--m-xl--FontSize --pf-c-title--m-xl--FontSize
--pf-global--FontSize--xl .pf-c-title --pf-c-title--m-xl--FontWeight --pf-c-title--m-xl--FontWeight
--pf-global--FontWeight--normal $pf-global--FontWeight--normal .pf-c-title --pf-c-title--m-lg--LineHeight --pf-c-title--m-lg--LineHeight
--pf-global--LineHeight--md $pf-global--LineHeight--md .pf-c-title --pf-c-title--m-lg--FontSize --pf-c-title--m-lg--FontSize
--pf-global--FontSize--lg .pf-c-title --pf-c-title--m-lg--FontWeight --pf-c-title--m-lg--FontWeight
--pf-global--FontWeight--normal $pf-global--FontWeight--normal .pf-c-title --pf-c-title--m-md--LineHeight --pf-c-title--m-md--LineHeight
--pf-global--LineHeight--md $pf-global--LineHeight--md .pf-c-title --pf-c-title--m-md--FontSize --pf-c-title--m-md--FontSize
--pf-global--FontSize--md .pf-c-title --pf-c-title--m-md--FontWeight --pf-c-title--m-md--FontWeight
--pf-global--FontWeight--normal $pf-global--FontWeight--normal .pf-m-overpass-font .pf-c-title --pf-c-title--m-md--FontWeight --pf-c-title--m-md--FontWeight
--pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold $pf-global--FontWeight--bold .pf-m-overpass-font .pf-c-title --pf-c-title--m-lg--FontWeight --pf-c-title--m-lg--FontWeight
--pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold $pf-global--FontWeight--bold
View source on GitHub Copyright © 2022 Red Hat, Inc.
