Skip to content
PatternFly logo

Banner

A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible.

Accessibility

To implement an accessible PatternFly banner:

  • Check the color contrast of a banner and any text on it to make sure they can be read by users with color blindness or other visual impairments.
  • When a banner is used to convey status, add an icon that also conveys status visually, and provide screen reader text using .pf-screen-reader or an equivalent.

Testing

At a minimum, a banner should meet the following criteria:

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Prop
Applied to
Reason
screenReaderText
Banner
Adds text that is accessible only to assistive technologies and is not visually rendered. This prop should only be passed in when the banner is meant to convey status.

HTML/CSS customization

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or class
Applied to
Reason
.pf-screen-reader
span
Provides an accessible description of the type of banner. Required if banner conveys status

View source on GitHub