cloud.gov pattern library

notification: Error

Notification

Write documentation

<div class="notification notification-error">
    <div class="notification-wrap">
        <p class="notification-message">Something bad happened, please try again.</p>

        <button href="#" class="notification-action action action-outline action-white">
      Refresh
    </button>

        <a href="#" class="notification-dismiss" title="Dismiss notification">
      <span class="usa-sr-only">Close</span>
    </a>
    </div>
</div>
 
<div class="notification notification-{{ status }}">
  <div class="notification-wrap">
    <p class="notification-message">{{ message }}</p>
    {% if actionText %}
    <button href="#" class="notification-action action action-outline action-white">
      {{ actionText }}
    </button>
    {% endif %}
    <a href="#" class="notification-dismiss" title="Dismiss notification">
      <span class="usa-sr-only">Close</span>
    </a>
  </div>
</div>
 
{
  "status": "error",
  "message": "Something bad happened, please try again.",
  "actionText": "Refresh"
}