Skip to content
Patternfly Logo

Banner

Examples

Basic

Default banner

Info banner

Danger banner

Success banner

Warning banner

Documentation

Add a modifier class to the default banner to change the presentation: .pf-m-info, .pf-m-danger, .pf-m-success, or .pf-m-warning.

Usage

Class
Applied to
Outcome
.pf-c-banner
<div>
Initiates a banner. Required
.pf-m-info
.pf-c-banner
Modifies banner for info styles.
.pf-m-danger
.pf-c-banner
Modifies banner for danger styles.
.pf-m-success
.pf-c-banner
Modifies banner for success styles.
.pf-m-warning
.pf-c-banner
Modifies banner for warning styles.
.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--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

View source on GitHub