Skip to content
PatternFly logo

Title

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:

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--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