Skip to Content
Patternfly Logo

Title

The title component applies top and bottom margins, font-weight, font-size, and line-height to titles.

ExamplesPropsCSS Variables

Examples

Sizes

4xl Title

3xl Title

2xl Title

xl Title

lg Title
md Title

Props

Title properties
NameTypeRequiredDefaultDescription
sizeBaseSizes | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'Yesthe size of the Title
childrenReact.ReactNodeNo''content rendered inside the Title
classNamestringNo''Additional classes added to the Title
headingLevel'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'No'h1'the heading level to use

CSS Variables

--pf-c-title--FontFamilyc_title_FontFamily
RedHatDisplay,Overpass,overpass,helvetica,arial,sans-serif
--pf-c-title--m-2xl--FontSizec_title_m_2xl_FontSize
1.5rem
--pf-c-title--m-2xl--FontWeightc_title_m_2xl_FontWeight
400
--pf-c-title--m-2xl--LineHeightc_title_m_2xl_LineHeight
1.3
--pf-c-title--m-3xl--FontSizec_title_m_3xl_FontSize
1.75rem
--pf-c-title--m-3xl--FontWeightc_title_m_3xl_FontWeight
400
--pf-c-title--m-3xl--LineHeightc_title_m_3xl_LineHeight
1.3
--pf-c-title--m-4xl--FontSizec_title_m_4xl_FontSize
2.25rem
--pf-c-title--m-4xl--FontWeightc_title_m_4xl_FontWeight
400
--pf-c-title--m-4xl--LineHeightc_title_m_4xl_LineHeight
1.3
--pf-c-title--m-lg--FontSizec_title_m_lg_FontSize
1.125rem
--pf-c-title--m-lg--FontWeightc_title_m_lg_FontWeight
400
--pf-c-title--m-lg--LineHeightc_title_m_lg_LineHeight
1.5
--pf-c-title--m-md--FontSizec_title_m_md_FontSize
1rem
--pf-c-title--m-md--FontWeightc_title_m_md_FontWeight
400
--pf-c-title--m-md--LineHeightc_title_m_md_LineHeight
1.5
--pf-c-title--m-xl--FontSizec_title_m_xl_FontSize
1.25rem
--pf-c-title--m-xl--FontWeightc_title_m_xl_FontWeight
400
--pf-c-title--m-xl--LineHeightc_title_m_xl_LineHeight
1.5