React

Title

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

ExamplesPropsCSS Variables

Examples

Title sizes

4xl Title

3xl Title

2xl Title

xl Title

lg Title
md Title
Copied to clipboard

Props

Title Props

The Title component accepts the following props.

NameTypeRequiredDefaultDescription
sizeany
childrennode
classNamestring
headingLevelany

CSS Variables

--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_FontWeight500
--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_FontWeight500
--pf-c-title--m-md--LineHeightc_title_m_md_LineHeight1.5
--pf-c-title--m-xl--FontSizec_title_m_xl_FontSize1.3125rem
--pf-c-title--m-xl--FontWeightc_title_m_xl_FontWeight400
--pf-c-title--m-xl--LineHeightc_title_m_xl_LineHeight1.5