Skip to content
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

Class
Applied to
Outcome
.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-masthead
Modifies a masthead component to have a light theme with a background color of --pf-global--BackgroundColor--100.
.pf-m-light-200
.pf-c-masthead
Modifies a masthead component to have a light theme with a background color of --pf-global--BackgroundColor--200.

CSS variables

.pf-c-masthead.pf-m-light--pf-global--Color--100
#151515
.pf-c-masthead.pf-m-light--pf-global--Color--200
#6a6e73
.pf-c-masthead.pf-m-light--pf-global--BorderColor--100
#d2d2d2
.pf-c-masthead.pf-m-light--pf-global--primary-color--100
#06c
.pf-c-masthead.pf-m-light--pf-global--link--Color
#06c
.pf-c-masthead.pf-m-light--pf-global--link--Color--hover
#004080
.pf-c-masthead.pf-m-light--pf-global--BackgroundColor--100
#fff
.pf-c-masthead.pf-m-light--pf-c-masthead--BackgroundColor
#fff
.pf-c-masthead.pf-m-light--pf-c-masthead__main--BorderBottomColor
#f0f0f0
.pf-c-masthead--pf-global--Color--100
#fff
.pf-c-masthead--pf-global--Color--200
#f0f0f0
.pf-c-masthead--pf-global--BorderColor--100
#b8bbbe
.pf-c-masthead--pf-global--primary-color--100
#73bcf7
.pf-c-masthead--pf-global--link--Color
#2b9af3
.pf-c-masthead--pf-global--link--Color--hover
#2b9af3
.pf-c-masthead--pf-global--BackgroundColor--100
#151515
.pf-c-masthead--pf-c-masthead--PaddingLeft
1rem
.pf-c-masthead--pf-c-masthead--PaddingRight
1rem
.pf-c-masthead--pf-c-masthead--BackgroundColor
#151515
.pf-c-masthead--pf-c-masthead--inset
1rem
.pf-c-masthead--pf-c-masthead--xl--inset
1.5rem
.pf-c-masthead--pf-c-masthead--m-display-stack--FlexWrap
wrap
.pf-c-masthead--pf-c-masthead--m-display-stack__main--Order
-1
.pf-c-masthead--pf-c-masthead--m-display-stack__main--FlexBasis
100%
.pf-c-masthead--pf-c-masthead--m-display-stack__main--PaddingTop
0.5rem
.pf-c-masthead--pf-c-masthead--m-display-stack__main--PaddingBottom
0.5rem
.pf-c-masthead--pf-c-masthead--m-display-stack__main--MarginRight
0
.pf-c-masthead--pf-c-masthead--m-display-stack__main--before--BorderBottom
1px solid #6a6e73
.pf-c-masthead--pf-c-masthead--m-display-stack__content--Order
1
.pf-c-masthead--pf-c-masthead--m-display-stack__content--PaddingTop
0.5rem
.pf-c-masthead--pf-c-masthead--m-display-stack__content--PaddingBottom
0.5rem
.pf-c-masthead--pf-c-masthead--m-display-stack__content--MarginLeft
0
.pf-c-masthead--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginRight
calc(1rem * -1)
.pf-c-masthead--pf-c-masthead--m-display-stack__content--c-nav--m-horizontal--MarginLeft
calc(1rem * -1)
.pf-c-masthead--pf-c-masthead--m-display-inline--FlexWrap
nowrap
.pf-c-masthead--pf-c-masthead--m-display-inline__main--Order
0
.pf-c-masthead--pf-c-masthead--m-display-inline__main--FlexBasis
auto
.pf-c-masthead--pf-c-masthead--m-display-inline__main--PaddingTop
0
.pf-c-masthead--pf-c-masthead--m-display-inline__main--PaddingBottom
0
.pf-c-masthead--pf-c-masthead--m-display-inline__main--MarginRight
calc(1.5rem / 2)
.pf-c-masthead--pf-c-masthead--m-display-inline__main--before--BorderBottom
0
.pf-c-masthead--pf-c-masthead--m-display-inline__content--Order
0
.pf-c-masthead--pf-c-masthead--m-display-inline__content--PaddingTop
0
.pf-c-masthead--pf-c-masthead--m-display-inline__content--PaddingBottom
0
.pf-c-masthead--pf-c-masthead--m-display-inline__content--MarginLeft
calc(1.5rem / 2)
.pf-c-masthead--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginRight
0
.pf-c-masthead--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft
0
.pf-c-masthead--pf-c-masthead__main--before--Right
calc(1rem * -1)
.pf-c-masthead--pf-c-masthead__main--before--Left
calc(1rem * -1)
.pf-c-masthead--pf-c-masthead__main--before--BorderBottomWidth
1px
.pf-c-masthead--pf-c-masthead__main--before--BorderBottomColor
#6a6e73
.pf-c-masthead--pf-c-masthead__toggle--MarginRight
0.5rem
.pf-c-masthead--pf-c-masthead__toggle--MarginLeft
calc(1rem * -1)
.pf-c-masthead--pf-c-masthead__toggle--c-button--FontSize
1.5rem
.pf-c-masthead--pf-c-masthead--m-light--BackgroundColor
#fff
.pf-c-masthead--pf-c-masthead--m-light__main--BorderBottomColor
#f0f0f0
.pf-c-masthead--pf-c-masthead--m-light-200--BackgroundColor
#f0f0f0
.pf-c-masthead--pf-c-masthead--m-light-200__main--BorderBottomColor
#d2d2d2
.pf-c-masthead--pf-c-masthead--FlexWrap
wrap
.pf-c-masthead--pf-c-masthead__main--Order
-1
.pf-c-masthead--pf-c-masthead__main--FlexBasis
100%
.pf-c-masthead--pf-c-masthead__main--PaddingTop
0.5rem
.pf-c-masthead--pf-c-masthead__main--PaddingBottom
0.5rem
.pf-c-masthead--pf-c-masthead__main--MarginRight
0
.pf-c-masthead--pf-c-masthead__main--before--BorderBottom
1px solid #6a6e73
.pf-c-masthead--pf-c-masthead__content--Order
1
.pf-c-masthead--pf-c-masthead__content--PaddingTop
0.5rem
.pf-c-masthead--pf-c-masthead__content--PaddingBottom
0.5rem
.pf-c-masthead--pf-c-masthead__content--MarginLeft
0
.pf-c-masthead--pf-c-masthead__content--c-nav--m-horizontal--MarginRight
calc(1rem * -1)
.pf-c-masthead--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft
calc(1rem * -1)
.pf-c-masthead .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-masthead .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-masthead .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#fff
.pf-c-masthead.pf-m-light-200--pf-c-masthead--BackgroundColor
#f0f0f0
.pf-c-masthead.pf-m-light-200--pf-c-masthead__main--BorderBottomColor
#d2d2d2
.pf-c-masthead__main:last-child--pf-c-masthead__main--MarginRight
0
.pf-c-masthead__content:only-child--pf-c-masthead__content--MarginLeft
0
.pf-c-masthead__toggle ~ .pf-c-masthead__content--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft
calc(0 * -1)
.pf-c-masthead__toggle .pf-c-button--pf-c-button--FontSize
1.5rem
.pf-c-masthead.pf-m-display-stack--pf-c-masthead--FlexWrap
wrap
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--Order
-1
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--FlexBasis
100%
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--PaddingTop
0.5rem
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--PaddingBottom
0.5rem
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--MarginRight
0
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__main--before--BorderBottom
1px solid #6a6e73
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--Order
1
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--PaddingTop
0.5rem
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--PaddingBottom
0.5rem
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--MarginLeft
0
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--c-nav--m-horizontal--MarginRight
calc(1rem * -1)
.pf-c-masthead.pf-m-display-stack--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft
calc(1rem * -1)
.pf-c-masthead.pf-m-display-inline--pf-c-masthead--FlexWrap
nowrap
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--Order
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--FlexBasis
auto
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--PaddingTop
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--PaddingBottom
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--MarginRight
calc(1.5rem / 2)
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__main--before--BorderBottom
undefined
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--Order
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--PaddingTop
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--PaddingBottom
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--MarginLeft
calc(1.5rem / 2)
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--c-nav--m-horizontal--MarginRight
0
.pf-c-masthead.pf-m-display-inline--pf-c-masthead__content--c-nav--m-horizontal--MarginLeft
0

View source on GitHub