Patternfly Logo

Examples

Size modifiers

4xl title

3xl title

2xl title

xl title

lg title

md title

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:

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--pf-c-title--FontFamily
"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif
.pf-c-title--pf-c-title--m-4xl--LineHeight
1.3
.pf-c-title--pf-c-title--m-4xl--FontSize
2.25rem
.pf-c-title--pf-c-title--m-4xl--FontWeight
400
.pf-c-title--pf-c-title--m-3xl--LineHeight
1.3
.pf-c-title--pf-c-title--m-3xl--FontSize
1.75rem
.pf-c-title--pf-c-title--m-3xl--FontWeight
400
.pf-c-title--pf-c-title--m-2xl--LineHeight
1.3
.pf-c-title--pf-c-title--m-2xl--FontSize
1.5rem
.pf-c-title--pf-c-title--m-2xl--FontWeight
400
.pf-c-title--pf-c-title--m-xl--LineHeight
1.5
.pf-c-title--pf-c-title--m-xl--FontSize
1.25rem
.pf-c-title--pf-c-title--m-xl--FontWeight
400
.pf-c-title--pf-c-title--m-lg--LineHeight
1.5
.pf-c-title--pf-c-title--m-lg--FontSize
1.125rem
.pf-c-title--pf-c-title--m-lg--FontWeight
400
.pf-c-title--pf-c-title--m-md--LineHeight
1.5
.pf-c-title--pf-c-title--m-md--FontSize
1rem
.pf-c-title--pf-c-title--m-md--FontWeight
400
.pf-m-overpass-font .pf-c-title--pf-c-title--m-md--FontWeight
700
.pf-m-overpass-font .pf-c-title--pf-c-title--m-lg--FontWeight
700

View source on GitHub