Patternfly Logo

Examples

Static alert group

  • Success alert:Success alert title

  • Danger alert:Danger alert title

  • Info alert:Info alert title

    Info alert description. This is a link.

Overview

.pf-c-alert-group is optional when only one alert is needed. It becomes required when more than one alert is used in a list.

Usage

AttributeApplied toOutcome
.pf-c-alert-group<ul>Creates an alert group component. Required
.pf-c-alert-group__item<li>Creates an alert group item. Required

Toast alert group

Overview

An alert group that includes the .pf-m-toast modifier becomes a toast alert group with unique positioning in the top-right corner of the window. .pf-c-alert-group is required to create a toast alert group.

Every toast alert must include a close button to dismiss the alert.

Modifiers

ClassApplied toOutcome
.pf-m-toast.pf-c-alert-groupApplies toast alert styling to an alert group.

Documentation

Overview

Alert groups are used to contain and align consecutive alerts. Groups can either be embedded alongside a page's content or in the top-right corner as a toast group using the .pf-m-toast modifier.

CSS variables

.pf-c-alert-group--pf-c-alert-group__item--MarginTop
0.5rem
.pf-c-alert-group--pf-c-alert-group--m-toast--Top
3rem
.pf-c-alert-group--pf-c-alert-group--m-toast--Right
2rem
.pf-c-alert-group--pf-c-alert-group--m-toast--MaxWidth
37.5rem
.pf-c-alert-group--pf-c-alert-group--m-toast--ZIndex
600

View source on GitHub