Skip to content
PatternFly logo

Banner

A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible.

Examples

Basic

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

Default banner

Blue banner

Red banner

Green banner

Gold 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-screen-reader or an equivalent.

Default banner:
Default banner

Info banner:
Info banner

Danger banner:
Danger banner

Success banner:
Success banner

Warning banner:
Warning banner

Documentation

Add a modifier class to the default banner to change the presentation: .pf-m-blue, .pf-m-red, .pf-m-green, or .pf-m-gold.

Usage

Class
Applied to
Outcome
.pf-c-banner
<div>
Initiates a banner. Required
.pf-m-blue
.pf-c-banner
Modifies banner for blue styling.
.pf-m-red
.pf-c-banner
Modifies banner for red styling.
.pf-m-green
.pf-c-banner
Modifies banner for green styling.
.pf-m-gold
.pf-c-banner
Modifies banner for gold styling.
.pf-m-sticky
.pf-c-banner
Modifies banner to be sticky to the top of its container.

CSS variables

.pf-c-banner.pf-m-warning--pf-global--Color--100
#151515
.pf-c-banner.pf-m-warning--pf-global--Color--200
#6a6e73
.pf-c-banner.pf-m-warning--pf-global--BorderColor--100
#d2d2d2
.pf-c-banner.pf-m-warning--pf-global--primary-color--100
#06c
.pf-c-banner.pf-m-warning--pf-global--link--Color
#06c
.pf-c-banner.pf-m-warning--pf-global--link--Color--hover
#004080
.pf-c-banner.pf-m-warning--pf-global--BackgroundColor--100
#fff
.pf-c-banner.pf-m-warning--pf-c-banner--BackgroundColor
#f0ab00
.pf-c-banner--pf-global--Color--100
#fff
.pf-c-banner--pf-global--Color--200
#f0f0f0
.pf-c-banner--pf-global--BorderColor--100
#b8bbbe
.pf-c-banner--pf-global--primary-color--100
#73bcf7
.pf-c-banner--pf-global--link--Color
#2b9af3
.pf-c-banner--pf-global--link--Color--hover
#2b9af3
.pf-c-banner--pf-global--BackgroundColor--100
#151515
.pf-c-banner--pf-c-banner--PaddingTop
0.25rem
.pf-c-banner--pf-c-banner--PaddingRight
1rem
.pf-c-banner--pf-c-banner--md--PaddingRight
1.5rem
.pf-c-banner--pf-c-banner--PaddingBottom
0.25rem
.pf-c-banner--pf-c-banner--PaddingLeft
1rem
.pf-c-banner--pf-c-banner--md--PaddingLeft
1.5rem
.pf-c-banner--pf-c-banner--FontSize
0.875rem
.pf-c-banner--pf-c-banner--Color
#151515
.pf-c-banner--pf-c-banner--BackgroundColor
#4f5255
.pf-c-banner--pf-c-banner--link--Color
#151515
.pf-c-banner--pf-c-banner--link--TextDecoration
underline
.pf-c-banner--pf-c-banner--link--hover--Color
#151515
.pf-c-banner--pf-c-banner--link--hover--FontWeight
700
.pf-c-banner--pf-c-banner--link--disabled--Color
#151515
.pf-c-banner--pf-c-banner--link--disabled--TextDecoration
none
.pf-c-banner--pf-c-banner--m-info--BackgroundColor
#73bcf7
.pf-c-banner--pf-c-banner--m-danger--BackgroundColor
#c9190b
.pf-c-banner--pf-c-banner--m-success--BackgroundColor
#3e8635
.pf-c-banner--pf-c-banner--m-warning--BackgroundColor
#f0ab00
.pf-c-banner--pf-c-banner--m-sticky--ZIndex
300
.pf-c-banner--pf-c-banner--m-sticky--BoxShadow
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
.pf-c-banner .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-banner .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-banner .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-banner .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-banner .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-banner .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-banner .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-banner .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-banner .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-banner .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-banner .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-banner .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-banner .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-banner .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-banner .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-banner .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-banner .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#fff
.pf-c-banner.pf-m-info--pf-c-banner--BackgroundColor
#73bcf7
.pf-c-banner.pf-m-danger--pf-c-banner--BackgroundColor
#c9190b
.pf-c-banner.pf-m-success--pf-c-banner--BackgroundColor
#3e8635
.pf-c-banner a:hover:not(.pf-m-disabled)--pf-c-banner--link--Color
#151515
.pf-c-banner a.pf-m-disabled--pf-c-banner--link--Color
#151515
.pf-c-banner a.pf-m-disabled--pf-c-banner--link--TextDecoration
none
.pf-c-banner .pf-c-button.pf-m-inline--pf-c-button--m-link--Color
#151515
.pf-c-banner .pf-c-button.pf-m-inline--pf-c-button--m-link--m-inline--hover--Color
#151515
.pf-c-banner .pf-c-button.pf-m-inline--pf-c-button--disabled--Color
#151515
.pf-c-banner .pf-c-button.pf-m-inline:hover--pf-c-banner--link--Color
#151515
.pf-c-banner .pf-c-button.pf-m-inline:disabled--pf-c-banner--link--TextDecoration
none

View source on GitHub