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.
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.
Pill
To display a banner with rounded corners, use pf-m-pill. The pill modifier can be combined with any Banner modifier.
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. |
.pf-m-pill | .pf-v6-c-banner | Modifies banner for pill styles. |