React

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
sizeunknownthe size of the Title
childrenReact.ReactNode''content rendered inside the Title
classNamestring''Additional classes added to the Title
headingLevel'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6''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