Skip to Content

Banner

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesDocumentationCSS Variables

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

ClassApplied toOutcome
.pf-c-banner<div>Initiates a banner. Required
.pf-m-info.pf-c-bannerModifies banner for info styles.
.pf-m-danger.pf-c-bannerModifies banner for danger styles.
.pf-m-success.pf-c-bannerModifies banner for success styles.
.pf-m-warning.pf-c-bannerModifies banner for warning styles.
.pf-m-sticky.pf-c-bannerModifies banner to be sticky to the top of its container.

CSS Variables