Banner

A banner is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed.

Examples

Basic

Banners can be styled with one of 9 different nonstatus colors. A nonstatus banner should only be used when the banner color does not represent status or severity.

Default banner

Red banner

Orangered banner

Orange banner

Yellow banner

Green banner

Teal banner

Blue banner

Purple banner

Status

When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using .pf-v6-screen-reader or an equivalent.

Success banner:
Success banner

Warning banner:
Warning banner

Danger banner:
Danger banner

Custom status banner:
Info banner

Custom status banner:
Custom banner

Documentation

Usage

Class
Applied to
Outcome
.pf-v6-c-banner
<div>
Initiates a banner. Required
.pf-m-red
.pf-v6-c-banner
Modifies banner for red styling.
.pf-m-orangered
.pf-v6-c-banner
Modifies banner for orangered styling.
.pf-m-orange
.pf-v6-c-banner
Modifies banner for orange styling.
.pf-m-yellow
.pf-v6-c-banner
Modifies banner for yellow styling.
.pf-m-green
.pf-v6-c-banner
Modifies banner for green styling.
.pf-m-teal
.pf-v6-c-banner
Modifies banner for teal styling.
.pf-m-blue
.pf-v6-c-banner
Modifies banner for blue styling.
.pf-m-purple
.pf-v6-c-banner
Modifies banner for purple styling.
.pf-m-success
.pf-v6-c-banner
Modifies banner for success status styling.
.pf-m-warning
.pf-v6-c-banner
Modifies banner for warning status styling.
.pf-m-danger
.pf-v6-c-banner
Modifies banner for danger status styling.
.pf-m-info
.pf-v6-c-banner
Modifies banner for info status styling.
.pf-m-custom
.pf-v6-c-banner
Modifies banner for custom status styling.
.pf-m-sticky
.pf-v6-c-banner
Modifies banner to be sticky to the top of its container.

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--PaddingBlockStart
0.25rem
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--PaddingInlineEnd
1rem
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--md--PaddingInlineEnd
1.5rem
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--PaddingBlockEnd
0.25rem
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--PaddingInlineStart
1rem
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--md--PaddingInlineStart
1.5rem
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--FontSize
0.875rem
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--Color
(In light theme) #151515
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--BackgroundColor
(In light theme) #e0e0e0
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--link--Color
(In light theme) #151515
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--link--TextDecoration
underline
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--link--hover--Color
(In light theme) #151515
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--link--hover--FontWeight
500
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--link--disabled--Color
(In light theme) #151515
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--link--disabled--TextDecoration
none
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-sticky--ZIndex
300
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-sticky--BoxShadow
0px 4px 8px 0px rgba(0, 0, 0, 0.1200)
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-danger--BackgroundColor
(In light theme) #b1380b
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-danger--Color
(In light theme) #ffffff
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-success--BackgroundColor
(In light theme) #3d7317
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-success--Color
(In light theme) #ffffff
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-warning--BackgroundColor
(In light theme) #ffcc17
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-warning--Color
(In light theme) #151515
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-info--BackgroundColor
(In light theme) #5e40be
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-info--Color
(In light theme) #ffffff
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-custom--BackgroundColor
(In light theme) #147878
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-custom--Color
(In light theme) #ffffff
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-red--BackgroundColor
(In light theme) #fbc5c5
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-red--Color
(In light theme) #151515
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-orangered--BackgroundColor
(In light theme) #fbbea8
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-orangered--Color
(In light theme) #151515
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-orange--BackgroundColor
(In light theme) #fccb8f
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-orange--Color
(In light theme) #151515
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-yellow--BackgroundColor
(In light theme) #ffe072
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-yellow--Color
(In light theme) #151515
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-green--BackgroundColor
(In light theme) #d1f1bb
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-green--Color
(In light theme) #151515
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-teal--BackgroundColor
(In light theme) #b9e5e5
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-teal--Color
(In light theme) #151515
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-blue--BackgroundColor
(In light theme) #b9dafc
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-blue--Color
(In light theme) #151515
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-purple--BackgroundColor
(In light theme) #d0c5f4
:where(:root, .pf-v6-c-banner)--pf-v6-c-banner--m-purple--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-danger--pf-v6-c-banner--BackgroundColor
(In light theme) #b1380b
.pf-v6-c-banner.pf-m-danger--pf-v6-c-banner--Color
(In light theme) #ffffff
.pf-v6-c-banner.pf-m-success--pf-v6-c-banner--BackgroundColor
(In light theme) #3d7317
.pf-v6-c-banner.pf-m-success--pf-v6-c-banner--Color
(In light theme) #ffffff
.pf-v6-c-banner.pf-m-warning--pf-v6-c-banner--BackgroundColor
(In light theme) #ffcc17
.pf-v6-c-banner.pf-m-warning--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-info--pf-v6-c-banner--BackgroundColor
(In light theme) #5e40be
.pf-v6-c-banner.pf-m-info--pf-v6-c-banner--Color
(In light theme) #ffffff
.pf-v6-c-banner.pf-m-custom--pf-v6-c-banner--BackgroundColor
(In light theme) #147878
.pf-v6-c-banner.pf-m-custom--pf-v6-c-banner--Color
(In light theme) #ffffff
.pf-v6-c-banner.pf-m-red--pf-v6-c-banner--BackgroundColor
(In light theme) #fbc5c5
.pf-v6-c-banner.pf-m-red--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-orangered--pf-v6-c-banner--BackgroundColor
(In light theme) #fbbea8
.pf-v6-c-banner.pf-m-orangered--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-orange--pf-v6-c-banner--BackgroundColor
(In light theme) #fccb8f
.pf-v6-c-banner.pf-m-orange--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-yellow--pf-v6-c-banner--BackgroundColor
(In light theme) #ffe072
.pf-v6-c-banner.pf-m-yellow--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-green--pf-v6-c-banner--BackgroundColor
(In light theme) #d1f1bb
.pf-v6-c-banner.pf-m-green--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-teal--pf-v6-c-banner--BackgroundColor
(In light theme) #b9e5e5
.pf-v6-c-banner.pf-m-teal--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-blue--pf-v6-c-banner--BackgroundColor
(In light theme) #b9dafc
.pf-v6-c-banner.pf-m-blue--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-purple--pf-v6-c-banner--BackgroundColor
(In light theme) #d0c5f4
.pf-v6-c-banner.pf-m-purple--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner a:hover:not(.pf-m-disabled)--pf-v6-c-banner--link--Color
(In light theme) #151515
.pf-v6-c-banner a.pf-m-disabled--pf-v6-c-banner--link--Color
(In light theme) #151515
.pf-v6-c-banner a.pf-m-disabled--pf-v6-c-banner--link--TextDecoration
none
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline--pf-v6-c-button--m-link--Color
(In light theme) #151515
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline--pf-v6-c-button--m-link--m-inline--hover--Color
(In light theme) #151515
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline--pf-v6-c-button--disabled--Color
(In light theme) #151515
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline:hover--pf-v6-c-banner--link--Color
(In light theme) #151515
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled--pf-v6-c-banner--link--TextDecoration
none