PF Next

Alert

Success Alert

Preview



<div class="pf-c-alert pf-m-success" aria-label="Success Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-check-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       				Success: 
     </span> Success notification title
    </h4>
    <p>
      Success notification description.
      <a href="#">This is a link.</a>
    </p>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-success" aria-label="Success Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-check-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       				Success: 
     </span> Success notification title
    </h4>
  </div>
  <div class="pf-c-alert__action">
    <button class="pf-c-button pf-m-secondary">
      Button
    </button>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-success" aria-label="Success Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-check-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       					Success: 
     </span> Success notification title
    </h4>
  </div>
</div>

Danger Alert

Preview



<div class="pf-c-alert pf-m-danger" aria-label="Danger Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Danger: </span> Danger notification title
    </h4>
    <p>
      Danger notification description.
      <a href="#">This is a link.</a>
    </p>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-danger" aria-label="Danger Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Danger: </span> Danger notification title
    </h4>
  </div>
  <div class="pf-c-alert__action">
    <button class="pf-c-button pf-m-secondary">
      Button
    </button>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-danger" aria-label="Danger Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Danger: </span> Danger notification title
    </h4>
  </div>
</div>

Warning Alert

Preview



<div class="pf-c-alert pf-m-warning" aria-label="Warning Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Warning: </span> Warning notification title
    </h4>
    <p>
      Warning notification description.
      <a href="#">This is a link.</a>
    </p>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-warning" aria-label="Warning Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Warning: </span> Warning notification title
    </h4>
  </div>
  <div class="pf-c-alert__action">
    <button class="pf-c-button pf-m-secondary">
      Button
    </button>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-warning" aria-label="Warning Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Warning: </span> Warning notification title
    </h4>
  </div>
</div>

Info Alert

Preview



<div class="pf-c-alert pf-m-info" aria-label="Information Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-info-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Info: </span> Info notification title
    </h4>
    <p>
      Info notification description.
      <a href="#">This is a link.</a>
    </p>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-info" aria-label="Information Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-info-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Info: </span> Info notification title
    </h4>
  </div>
  <div class="pf-c-alert__action">
    <button class="pf-c-button pf-m-secondary">
      Button
    </button>
  </div>
</div>
<br>
<div class="pf-c-alert pf-m-info" aria-label="Information Notification">
  <div class="pf-c-alert__icon">
    <i class="fas fa-info-circle" aria-hidden="true"></i>
  </div>
  <div class="pf-c-alert__body" role="alert">
    <h4 class="pf-c-alert__title">
      <span class="pf-u-sr-only">
       Info: </span> Info notification title
    </h4>
  </div>
</div>

Documentation

Overview

Always add a modifier class. Do not use .pf-c-alert on its own.

Accessibility

Attribute Applied To Outcome
role="alert" .pf-c-alert__body Communicates contents of the alert message to the user. This should only be used on dynamically created alerts, such as toast notifications or inline notifications that aren't present during page load (for example, an alert at the top of a form when there are errors in the form).
aria-label="Success Notification" .pf-c-alert Indicates the Success Notification.
aria-label="Danger Notification" .pf-c-alert Indicates the Danger Notification.
aria-label="Warning Notification" .pf-c-alert Indicates the Warning Notification.
aria-label="Information Notification" .pf-c-alert Indicates the Information Notification.
aria-hidden="true" .pf-c-alert__icon Hides icon for assistive technologies. Required
Class Applied To Outcome
.pf-u-sr-only .pf-c-alert__title <span> Content that is visually hidden but accessible to assistive technologies. This should state the type of alert/notification. Required

Usage

Class Applied To Outcome
.pf-c-alert <div> Applies default alert styling. Always use with a modifier class. Required
.pf-c-alert__icon <div> Defines the alert icon. Required
.pf-c-alert__body <div> Defines the alert body. Required
.pf-c-alert__action <div> Define the alert action.
.pf-m-success .pf-c-alert Applies success styling.
.pf-m-danger .pf-c-alert Applies danger styling.
.pf-m-warning .pf-c-alert Applies warning styling.
.pf-m-info .pf-c-alert Applies info styling.