Style Guide

Alerts

Use alerts to provide feedback to the user or call attention to important information the user should know.

Note: Javascript functions exist for displaying most common alerts, avoiding the need to manually style them in most cases.

Success alert

Successfully run. Total query runtime: 32 msec. 1 row retrieved

Use this to provide feedback on an event that happened correctly:

<div class="alert-row">
  <div class="alert alert-success border-green-2 font-green-3 text-14 alert-box">
    <div class="media">
      <div class="media-body media-middle">
        <div class="alert-icon success-icon">
          <i class="fa fa-check" aria-hidden="true"></i>
        </div>
        <div class="alert-text">
          Successfully run. Total query runtime: 32 msec. 1 row retrieved
        </div>
      </div>
    </div>
  </div>
</div>

Error alert

Error retrieving properties - INTERNAL SERVER ERROR

Use this to provide feedback that something went wrong:

<div class="alert-row">
  <div class="alert alert-danger border-red-2 font-red-3 text-14 alert-box">
    <div class="media">
      <div class="media-body media-middle">
        <div class="alert-icon error-icon">
          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
        </div>
        <div class="alert-text">
          Error retrieving properties - INTERNAL SERVER ERROR
        </div>
      </div>
    </div>
  </div>
</div>

Info alert

This is a neutral message

Use this for non urgent info that users should know. Links can also be placed within the banner if needed.

<div class="alert-row">
  <div class="alert alert-info border-blue-2 font-primary-blue text-14 alert-box">
    <div class="media">
      <div class="media-body media-middle">
        <div class="alert-text">
          This is a neutral message
        </div>
      </div>
    </div>
  </div>
</div>

Small alerts

<div class="pg-prop-status-bar">
  <div class="success-in-footer alert-success border-green-2 font-green-3 text-14 alert-box">
    <div class="media">
      <div class="media-body media-middle">
        <div class="alert-icon success-icon">
          <i class="fa fa-check" aria-hidden="true"></i>
        </div>
        <div class="alert-text">
          Successfully run. Total query runtime: 32 msec. 1 row retrieved
        </div>
      </div>
    </div>
  </div>
</div>

<div class="pg-prop-status-bar">
  <div class="error-in-footer alert-danger border-red-2 font-red-3 text-14 alert-box">
    <div class="media">
      <div class="media-body media-middle">
        <div class="alert-icon error-icon">
          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
        </div>
        <div class="alert-text">
          Error retrieving properties - INTERNAL SERVER ERROR
        </div>
      </div>
    </div>
  </div>
</div>

<div class="pg-prop-status-bar">
  <div class="info-in-footer alert-info border-blue-2 font-primary-blue text-14 alert-box">
    <div class="media">
      <div class="media-body media-middle">
        <div class="alert-text">
          This is a neutral message
        </div>
      </div>
    </div>
  </div>
</div>