HTML

Title

ExamplesDocumentationCSS Variables

Examples

Size modifiers

4xl title

3xl title

2xl title

xl title

lg title

md title

Documentation

Overiew

The title component styles font-size, font-weight, and line-height to titles.

The content component defines margin on headers. To regain the same spacing use, spacer utility classes:

TitleMargin topMargin bottom
4xl.pf-u-mt-lg.pf-u-mb-sm
3xl.pf-u-mt-lg.pf-u-mb-sm
2xl.pf-u-mt-lg.pf-u-mb-sm
xl.pf-u-mt-lg.pf-u-mb-sm
lg.pf-u-mt-lg.pf-u-mb-sm
md.pf-u-mt-lg.pf-u-mb-sm

Usage

ClassAppliedOutcome
.pf-c-title*Initiates a title. Always use it with a modifier class.
.pf-m-4xl.pf-c-titleModifies for 4xl size
.pf-m-3xl.pf-c-titleModifies for 3xl size
.pf-m-2xl.pf-c-titleModifies for 2xl size
.pf-m-xl.pf-c-titleModifies for xl size
.pf-m-lg.pf-c-titleModifies for lg size
.pf-m-md.pf-c-titleModifies for md size

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