Skip to content
PatternFly logo

Title

A title component applies top and bottom margins, font-weight, font-size, and line-height to titles. The most common usage for a title is to define headings within a page. For more information about the relationship between title component sizes and HTML heading levels, see the Typography guidelines.

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