Patternfly Logo

Masthead

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Basic

Content

Basic with mixed content

Testing text color

Display inline

Content

Display stack

Content

Display stack, display inline responsive

Content

Light variant

Content

Light 200 variant

Content

Insets

Content

Documentation

Usage

ClassApplied toOutcome
.pf-c-masthead<header>Initiates the masthead component. Required
.pf-c-masthead__main<div>Initiates the masthead main component. Required
.pf-c-masthead__toggle<span>Initiates the masthead toggle component.
.pf-c-masthead__brand<a>, <div>Initiates the masthead content component.
.pf-c-masthead__content<div>Initiates the masthead content component.
.pf-m-light.pf-c-mastheadModifies a masthead component to have a light theme with a background color of --pf-global--BackgroundColor--100.
.pf-m-light-200.pf-c-mastheadModifies a masthead component to have a light theme with a background color of --pf-global--BackgroundColor--200.

CSS variables


View source on Github