cloud.gov pattern library

notification: Info

Notification

Write documentation

<div class="notification notification-info">
    <div class="notification-wrap">
        <p class="notification-message">Here is some information</p>

        <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": "info",
  "message": "Here is some information"
}