Skip to content

Masthead

A masthead contains and organizes global properties like a logo, navigation, and settings for easy and consistent access across all pages of an application.

Examples

Basic

Basic with mixed content

Display inline

Display stack

Display stack, display inline responsive

Insets

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.

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--RowGap
0.5rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--ColumnGap
1rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--BorderWidth
1px
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--PaddingBlock
1rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--PaddingInline
1.5rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--BorderColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--BackgroundColor
(In light theme) #f2f2f2
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead__main--ColumnGap
1rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead__main--MarginInlineEnd
1.5rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead__logo--MaxHeight
2.375rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead__logo--Width
11.8125rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead__toggle--Size
1.375rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead__content--ColumnGap
1rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-stack--ColumnGap
1rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-stack--GridTemplateColumns
max-content 1fr
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-stack__brand--GridColumn
-1 / 1
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-stack__brand--Order
-1
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd
0.5rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd
1px solid #c7c7c7
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-stack__content--GridColumn
1
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-stack__content--Order
1
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn
2
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-stack__main--Display
contents
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-stack__main--ColumnGap
unset
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline--ColumnGap
0
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline--GridTemplateColumns
min-content 1fr
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns
subgrid
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline__brand--GridColumn
initial
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline__brand--Order
initial
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd
0
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd
0
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline__main--GridColumn
1
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline__content--GridColumn
2
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline__content--Order
0
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn
2
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline__main--Display
flex
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--m-display-inline__main--ColumnGap
1rem
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead__expandable-content--BoxShadow
0px 4px 8px 0px rgba(0, 0, 0, 0.1200)
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead__expandable-content--BorderBlockStart
1px solid #c7c7c7
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--c-toolbar--Width
100%
:where(:root, .pf-v6-c-masthead)--pf-v6-c-masthead--c-toolbar--PaddingBlock
0
.pf-v6-c-masthead--pf-v6-c-masthead--ColumnGap
1rem
.pf-v6-c-masthead--pf-v6-c-masthead--GridTemplateColumns
max-content 1fr
.pf-v6-c-masthead--pf-v6-c-masthead__brand--GridColumn
-1 / 1
.pf-v6-c-masthead--pf-v6-c-masthead__brand--Order
-1
.pf-v6-c-masthead--pf-v6-c-masthead__brand--PaddingBlockEnd
0.5rem
.pf-v6-c-masthead--pf-v6-c-masthead__brand--BorderBlockEnd
1px solid #c7c7c7
.pf-v6-c-masthead--pf-v6-c-masthead__main--GridColumn
unset
.pf-v6-c-masthead--pf-v6-c-masthead__content--GridColumn
1
.pf-v6-c-masthead--pf-v6-c-masthead__content--Order
1
.pf-v6-c-masthead--pf-v6-c-masthead__main--toggle--content--GridColumn
2
.pf-v6-c-masthead--pf-v6-c-masthead__main--Display
contents
.pf-v6-c-masthead--pf-v6-c-masthead__main--ColumnGap
unset
.pf-v6-c-masthead .pf-v6-c-toolbar--pf-v6-c-toolbar--Width
100%
.pf-v6-c-masthead .pf-v6-c-toolbar--pf-v6-c-toolbar--PaddingBlockEnd
0
.pf-v6-c-masthead .pf-v6-c-toolbar--pf-v6-c-toolbar__content--MinWidth
0
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead--ColumnGap
1rem
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead--GridTemplateColumns
max-content 1fr
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__brand--GridColumn
-1 / 1
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__brand--Order
-1
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__brand--PaddingBlockEnd
0.5rem
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__brand--BorderBlockEnd
1px solid #c7c7c7
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__main--GridColumn
unset
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__content--GridColumn
1
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__content--Order
1
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__main--toggle--content--GridColumn
2
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__main--Display
contents
.pf-v6-c-masthead.pf-m-display-stack--pf-v6-c-masthead__main--ColumnGap
unset
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead--ColumnGap
0
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead--GridTemplateColumns
min-content 1fr
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__brand--GridColumn
initial
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__brand--Order
initial
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__brand--PaddingBlockEnd
0
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__brand--BorderBlockEnd
0
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__main--GridColumn
1
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__content--GridColumn
2
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__content--Order
0
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__main--toggle--content--GridColumn
2
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__main--Display
flex
.pf-v6-c-masthead.pf-m-display-inline--pf-v6-c-masthead__main--ColumnGap
1rem
.pf-v6-c-masthead__main:has(.pf-v6-c-masthead__toggle) ~ .pf-v6-c-masthead__content--pf-v6-c-masthead__content--GridColumn
2
.pf-v6-c-masthead__toggle--pf-v6-c-button--FontSize
1.375rem

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines