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.


To implement an accessible PatternFly title:

  • Ensure no heading levels are skipped. For example, a title as a level 4 heading should not come immediately after a level 2 heading.
  • Do not choose a heading level size solely for its font styling.
  • Ensure the font size of any titles are consistent, and that a title with a lower heading level does not have a larger font size than one with a higher heading level.
  • Provide descriptive text content to the title that will make sense when taken out of context.


At a minimum, a title should meet the following criteria:

  • For example, a title with a level 2 heading should not have a larger font size than a title with a level 1 heading or an h1 element. Visually this would make the level 1 heading look like a sub-heading.
  • Users that navigate via screen reader may use a rotor menu to view all of the headings on a page, without any other surrounding text. The title's text content must still make sense in this context.

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Applied to
headingLevel="[h1, h2, h3, h4, h5, or h6]"
Sets the internal heading element level.
size="[md, lg, xl, 2xl, 3xl, or 4xl]"
Sets the font size of the component.

HTML/CSS customization

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or class
Applied to
.pf-m-4xl, .pf-m-3xl, .pf-m-2xl, .pf-m-xl, .pf-m-lg, and .pf-m-md
Sets the font size of the component.

View source on GitHub