React

Title

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

ExamplesPropsCSS Variables

Examples

Title sizes

Copied to clipboard

Props

Title Props

The Title component accepts the following props.

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_FontFamilyRedHatDisplay,Overpass,overpass,helvetica,arial,sans-serif
--pf-c-title--m-2xl--FontSizec_title_m_2xl_FontSize1.5rem
--pf-c-title--m-2xl--FontWeightc_title_m_2xl_FontWeight400
--pf-c-title--m-2xl--LineHeightc_title_m_2xl_LineHeight1.3
--pf-c-title--m-3xl--FontSizec_title_m_3xl_FontSize1.75rem
--pf-c-title--m-3xl--FontWeightc_title_m_3xl_FontWeight400
--pf-c-title--m-3xl--LineHeightc_title_m_3xl_LineHeight1.3
--pf-c-title--m-4xl--FontSizec_title_m_4xl_FontSize2.25rem
--pf-c-title--m-4xl--FontWeightc_title_m_4xl_FontWeight400
--pf-c-title--m-4xl--LineHeightc_title_m_4xl_LineHeight1.3
--pf-c-title--m-lg--FontSizec_title_m_lg_FontSize1.125rem
--pf-c-title--m-lg--FontWeightc_title_m_lg_FontWeight400
--pf-c-title--m-lg--LineHeightc_title_m_lg_LineHeight1.5
--pf-c-title--m-md--FontSizec_title_m_md_FontSize1rem
--pf-c-title--m-md--FontWeightc_title_m_md_FontWeight400
--pf-c-title--m-md--LineHeightc_title_m_md_LineHeight1.5
--pf-c-title--m-xl--FontSizec_title_m_xl_FontSize1.25rem
--pf-c-title--m-xl--FontWeightc_title_m_xl_FontWeight400
--pf-c-title--m-xl--LineHeightc_title_m_xl_LineHeight1.5