Examples
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
Props
Title
*required
| 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 |
CSS variables
| | | |
|---|
| .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
