HTML

Alert group

ExamplesDocumentationCSS Variables

Examples

Inline alert group

  • Success alert: Success Alert Title

  • Danger alert: Danger Alert Title

  • Info alert: Info Alert Title

    Info alert description. This is a link.

Copied to clipboard

Toast alert group

This Preview can only be accessed in full page mode.
Copied to clipboard

Documentation

Overview

Alert Groups are used to contain and align consecutive alerts. Groups can either be placed inline 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_MarginTop0.5rem
--pf-c-alert-group--m-toast--MaxWidthc_alert_group_m_toast_MaxWidth37.5rem
--pf-c-alert-group--m-toast--Rightc_alert_group_m_toast_Right2rem
--pf-c-alert-group--m-toast--Topc_alert_group_m_toast_Top3rem
--pf-c-alert-group--m-toast--ZIndexc_alert_group_m_toast_ZIndex600