- React
- HTML
- HTML demos

## 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.

### Banner with links

### 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.

## 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