HTML

Title

ExamplesDocumentationCSS Variables

Examples

Title types

4xl title

3xl title

2xl title

xl title

lg title

md title

Copied to clipboard

Documentation

Overview

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:

Title Margin top Margin 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

Class Applied Outcome
.pf-c-title * Initiates a title. Always use it with a modifier class.
.pf-m-4xl .pf-c-title Modifies for 4xl size
.pf-m-3xl .pf-c-title Modifies for 3xl size
.pf-m-2xl .pf-c-title Modifies for 2xl size
.pf-m-xl .pf-c-title Modifies for xl size
.pf-m-lg .pf-c-title Modifies for lg size
.pf-m-md .pf-c-title Modifies for md size

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