package.docs.components.Banner.examples.Banner.md Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: 'Banner'
section: components
cssPrefix: pf-v6-c-banner
---## 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.

```html
Default banner




Red banner




Orangered banner




Orange banner




Yellow banner




Green banner




Teal banner




Blue banner




Purple banner

```

### Banner with links

```html

  Default banner with a
  link




  Default banner with a
  disabled link




  Blue banner with an
  




  Yellow banner with an
  
    inline link button (anchor)
  




  Red banner with a
  


```

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

```html

  
    
      Success banner:

      
    
    Success banner
  






  
    
      Warning banner:

      
    
    Warning banner
  






  
    
      Danger banner:

      
    
    Danger banner
  






  
    
      Custom status banner:

      
    
    Info banner
  






  
    
      Custom status banner:

      
    
    Custom banner
  


```

## Documentation

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-banner` | `` |  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. |