Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack.
Examples
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-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]} | .pf-c-masthead | Modifies masthead horizontal padding. |
.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-200 | --pf-global--Color--100 | #151515 | |
| .pf-c-masthead.pf-m-light-200 | --pf-global--Color--200 | #6a6e73 | |
| .pf-c-masthead.pf-m-light-200 | --pf-global--BorderColor--100 | #d2d2d2 | |
| .pf-c-masthead.pf-m-light-200 | --pf-global--primary-color--100 | #06c | |
| .pf-c-masthead.pf-m-light-200 | --pf-global--link--Color | #06c | |
| .pf-c-masthead.pf-m-light-200 | --pf-global--link--Color--hover | #004080 | |
| .pf-c-masthead.pf-m-light-200 | --pf-global--BackgroundColor--100 | #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 | --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--GridTemplateColumns | max-content 1fr | |
| .pf-c-masthead | --pf-c-masthead--m-display-stack__main--GridColumn | -1 / 1 | |
| .pf-c-masthead | --pf-c-masthead--m-display-stack__main--MinHeight | 4.375rem | |
| .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__toggle--GridColumn | 1 | |
| .pf-c-masthead | --pf-c-masthead--m-display-stack__content--GridColumn | 2 | |
| .pf-c-masthead | --pf-c-masthead--m-display-stack__content--MinHeight | 4.375rem | |
| .pf-c-masthead | --pf-c-masthead--m-display-stack__content--Order | 1 | |
| .pf-c-masthead | --pf-c-masthead--m-display-stack__content--PaddingTop | 0 | |
| .pf-c-masthead | --pf-c-masthead--m-display-stack__content--PaddingBottom | 0 | |
| .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--GridTemplateColumns | max-content max-content 1fr | |
| .pf-c-masthead | --pf-c-masthead--m-display-inline__main--GridColumn | 2 | |
| .pf-c-masthead | --pf-c-masthead--m-display-inline__main--MinHeight | 4.375rem | |
| .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--BorderBottom | 0 | |
| .pf-c-masthead | --pf-c-masthead--m-display-inline__toggle--GridColumn | 1 | |
| .pf-c-masthead | --pf-c-masthead--m-display-inline__content--GridColumn | 3 | |
| .pf-c-masthead | --pf-c-masthead--m-display-inline__content--MinHeight | 4.375rem | |
| .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--c-toolbar__item--Display | flex | |
| .pf-c-masthead | --pf-c-masthead--item-border-color--base | #3c3f42 | |
| .pf-c-masthead | --pf-c-masthead--c-context-selector--Width | auto | |
| .pf-c-masthead | --pf-c-masthead--c-context-selector__toggle--BorderTopColor | transparent | |
| .pf-c-masthead | --pf-c-masthead--c-context-selector__toggle--BorderRightColor | transparent | |
| .pf-c-masthead | --pf-c-masthead--c-context-selector__toggle--BorderBottomColor | transparent | |
| .pf-c-masthead | --pf-c-masthead--c-context-selector__toggle--BorderLeftColor | transparent | |
| .pf-c-masthead | --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderRightColor | #3c3f42 | |
| .pf-c-masthead | --pf-c-masthead--c-context-selector--m-full-height__toggle--BorderLeftColor | #3c3f42 | |
| .pf-c-masthead | --pf-c-masthead--c-dropdown__toggle--before--BorderTopColor | transparent | |
| .pf-c-masthead | --pf-c-masthead--c-dropdown__toggle--before--BorderRightColor | transparent | |
| .pf-c-masthead | --pf-c-masthead--c-dropdown__toggle--before--BorderBottomColor | transparent | |
| .pf-c-masthead | --pf-c-masthead--c-dropdown__toggle--before--BorderLeftColor | transparent | |
| .pf-c-masthead | --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderRightColor | #3c3f42 | |
| .pf-c-masthead | --pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor | #3c3f42 | |
| .pf-c-masthead | --pf-c-masthead--c-menu-toggle--before--BorderTopColor | transparent | |
| .pf-c-masthead | --pf-c-masthead--c-menu-toggle--before--BorderRightColor | transparent | |
| .pf-c-masthead | --pf-c-masthead--c-menu-toggle--before--BorderBottomColor | transparent | |
| .pf-c-masthead | --pf-c-masthead--c-menu-toggle--before--BorderLeftColor | transparent | |
| .pf-c-masthead | --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderRightColor | #3c3f42 | |
| .pf-c-masthead | --pf-c-masthead--c-menu-toggle--m-full-height--before--BorderLeftColor | #3c3f42 | |
| .pf-c-masthead | --pf-c-masthead--c-toolbar__content--PaddingRight | 0 | |
| .pf-c-masthead | --pf-c-masthead--c-toolbar__content--PaddingLeft | 0 | |
| .pf-c-masthead | --pf-c-masthead--c-toolbar__expandable-content--PaddingTop | 1rem | |
| .pf-c-masthead | --pf-c-masthead--c-toolbar__expandable-content--PaddingRight | 1rem | |
| .pf-c-masthead | --pf-c-masthead--c-toolbar__expandable-content--PaddingBottom | 1rem | |
| .pf-c-masthead | --pf-c-masthead--c-toolbar__expandable-content--PaddingLeft | 1rem | |
| .pf-c-masthead | --pf-c-masthead--c-toolbar__expandable-content--BorderTopWidth | 1px | |
| .pf-c-masthead | --pf-c-masthead--c-toolbar__expandable-content--BorderTopColor | #3c3f42 | |
| .pf-c-masthead | --pf-c-masthead--GridTemplateColumns | max-content 1fr | |
| .pf-c-masthead | --pf-c-masthead__main--GridColumn | -1 / 1 | |
| .pf-c-masthead | --pf-c-masthead__main--MinHeight | 4.375rem | |
| .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--GridColumn | undefined | |
| .pf-c-masthead | --pf-c-masthead__content--MinHeight | 4.375rem | |
| .pf-c-masthead | --pf-c-masthead__content--Order | 1 | |
| .pf-c-masthead | --pf-c-masthead__content--PaddingTop | 0 | |
| .pf-c-masthead | --pf-c-masthead__content--PaddingBottom | 0 | |
| .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 | --pf-c-masthead--BackgroundColor | #fff | |
| .pf-c-masthead.pf-m-light | --pf-c-masthead__main--BorderBottomColor | #f0f0f0 | |
| .pf-c-masthead .pf-c-toolbar | --pf-c-toolbar__content--PaddingRight | 0 | |
| .pf-c-masthead .pf-c-toolbar | --pf-c-toolbar__content--PaddingLeft | 0 | |
| .pf-c-masthead .pf-c-toolbar | --pf-c-toolbar__expandable-content--PaddingTop | 1rem | |
| .pf-c-masthead .pf-c-toolbar | --pf-c-toolbar__expandable-content--PaddingRight | 1rem | |
| .pf-c-masthead .pf-c-toolbar | --pf-c-toolbar__expandable-content--PaddingBottom | 1rem | |
| .pf-c-masthead .pf-c-toolbar | --pf-c-toolbar__expandable-content--PaddingLeft | 1rem | |
| .pf-c-masthead .pf-c-menu-toggle | --pf-c-menu-toggle--before--BorderTopColor | transparent | |
| .pf-c-masthead .pf-c-menu-toggle | --pf-c-menu-toggle--before--BorderRightColor | transparent | |
| .pf-c-masthead .pf-c-menu-toggle | --pf-c-menu-toggle--before--BorderBottomColor | transparent | |
| .pf-c-masthead .pf-c-menu-toggle | --pf-c-menu-toggle--before--BorderLeftColor | transparent | |
| .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height | --pf-c-menu-toggle--before--BorderRightColor | #3c3f42 | |
| .pf-c-masthead .pf-c-menu-toggle.pf-m-full-height | --pf-c-menu-toggle--before--BorderBottomColor | undefined | |
| .pf-c-masthead .pf-c-context-selector | --pf-c-context-selector--Width | auto | |
| .pf-c-masthead .pf-c-context-selector | --pf-c-context-selector__toggle--BorderTopColor | transparent | |
| .pf-c-masthead .pf-c-context-selector | --pf-c-context-selector__toggle--BorderRightColor | transparent | |
| .pf-c-masthead .pf-c-context-selector | --pf-c-context-selector__toggle--BorderLeftColor | transparent | |
| .pf-c-masthead .pf-c-context-selector.pf-m-full-height | --pf-c-context-selector__toggle--BorderRightColor | #3c3f42 | |
| .pf-c-masthead .pf-c-context-selector.pf-m-full-height | --pf-c-context-selector__toggle--BorderLeftColor | #3c3f42 | |
| .pf-c-masthead .pf-c-dropdown | --pf-c-dropdown__toggle--before--BorderTopColor | transparent | |
| .pf-c-masthead .pf-c-dropdown | --pf-c-dropdown__toggle--before--BorderRightColor | transparent | |
| .pf-c-masthead .pf-c-dropdown | --pf-c-dropdown__toggle--before--BorderBottomColor | transparent | |
| .pf-c-masthead .pf-c-dropdown | --pf-c-dropdown__toggle--before--BorderLeftColor | transparent | |
| .pf-c-masthead .pf-c-dropdown.pf-m-full-height | --pf-c-dropdown__toggle--before--BorderRightColor | #3c3f42 | |
| .pf-c-masthead .pf-c-dropdown.pf-m-full-height | --pf-c-dropdown__toggle--before--BorderLeftColor | #3c3f42 | |
| .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--GridTemplateColumns | max-content 1fr | |
| .pf-c-masthead.pf-m-display-stack | --pf-c-masthead__main--GridColumn | -1 / 1 | |
| .pf-c-masthead.pf-m-display-stack | --pf-c-masthead__main--MinHeight | 4.375rem | |
| .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--GridColumn | undefined | |
| .pf-c-masthead.pf-m-display-stack | --pf-c-masthead__content--MinHeight | 4.375rem | |
| .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 | |
| .pf-c-masthead.pf-m-display-stack | --pf-c-masthead__content--PaddingBottom | 0 | |
| .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--GridTemplateColumns | max-content max-content 1fr | |
| .pf-c-masthead.pf-m-display-inline | --pf-c-masthead__main--GridColumn | 2 | |
| .pf-c-masthead.pf-m-display-inline | --pf-c-masthead__main--MinHeight | 4.375rem | |
| .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 | 0 | |
| .pf-c-masthead.pf-m-display-inline | --pf-c-masthead__content--GridColumn | 3 | |
| .pf-c-masthead.pf-m-display-inline | --pf-c-masthead__content--MinHeight | 4.375rem | |
| .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 | |
| .pf-c-masthead.pf-m-inset-none | --pf-c-masthead--inset | 0 | |
| .pf-c-masthead.pf-m-inset-sm | --pf-c-masthead--inset | 0.5rem | |
| .pf-c-masthead.pf-m-inset-md | --pf-c-masthead--inset | 1rem | |
| .pf-c-masthead.pf-m-inset-lg | --pf-c-masthead--inset | 1.5rem | |
| .pf-c-masthead.pf-m-inset-xl | --pf-c-masthead--inset | 2rem | |
| .pf-c-masthead.pf-m-inset-2xl | --pf-c-masthead--inset | 3rem | |
View source on GitHub