HTML

Alert group

ExamplesDocumentationCSS Variables

Examples

Basic

  • 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

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__item--MarginTopc_alert_group__item_MarginTop
0.5rem
--pf-c-alert-group--m-toast--MaxWidthc_alert_group_m_toast_MaxWidth
37.5rem
--pf-c-alert-group--m-toast--Rightc_alert_group_m_toast_Right
2rem
--pf-c-alert-group--m-toast--Topc_alert_group_m_toast_Top
3rem
--pf-c-alert-group--m-toast--ZIndexc_alert_group_m_toast_ZIndex
600