Masthead

Examples

Basic

Content

Basic with mixed content

Display inline

Content

Display stack

Content

Display stack, display inline responsive

Content

Insets

Content

Documentation

Usage

Class
Applied to
Outcome
.pf-v6-c-masthead
<header>
Initiates the masthead component. Required
.pf-v6-c-masthead__main
<div>
Initiates the masthead main component. Required
.pf-v6-c-masthead__toggle
<span>
Initiates the masthead toggle component.
.pf-v6-c-masthead__brand
<div>
Initiates the masthead content component.
.pf-v6-c-masthead__logo
<a>, <div>
Initiates the masthead content component.
.pf-v6-c-masthead__content
<div>
Initiates the masthead content component.
.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}
.pf-v6-c-masthead
Modifies masthead horizontal padding at optional breakpoint.
.pf-m-docked
.pf-v6-c-masthead
Modifies masthead for use with docked nav.