iPro / Alerts

iPro styled alerts come in as modals on various pages for example, the Cross Selling page alerts the user with a modal styled alert that asks for confirmation from the user prior to continuing the action.

Newly styled alerts share the same dark transparency as the cross selling page, however its design is more aligned as the standard browser alert. It demonstrates a simple line of text and a single button. It displays a close "X" on the top right and the thick shadow that surrounds the alert.

Soft Alerts

Alert Type: Success

Action completed successfully.

Alert Type: Error

Invalid format, please check and resubmit the form.

Alert Type: Notification

Remember to save your settings.

Alert Type: Primary

A simple primary alert.

Alert Type: Warning

A simple warning alert.

Alert Type: Light

A simple light alert.


<div class="row">
  <div class="col-md-2">
    <button class="btn-secondary btn-lg" onclick="javascript:softalert('success','Action completed successfully.');">Success</button>
  </div>
  <div class="col-md-2">
    <button class="btn-primary btn-lg" onclick="javascript:softalert('error','Invalid format, please check and resubmit the form.');">Error</button>
  </div>
  <div class="col-md-2">
    <button class="btn-tertiary btn-lg" onclick="javascript:softalert('info','Remember to save your settings.');">Notification</button>
  </div>
</div>

Hard Alerts


<div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title">Alert Message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
	<hr>
        <div class="row pl-4 pr-4 pb-4 pt-1">
        <div class="col-4"><button type="button" class="btn-sm btn-tertiary btn-block" data-dismiss="modal">Close</button></div>
        <div class="col-4"></div>
        <div class="col-4"><button type="button" class="btn-sm btn-primary btn-block"  data-dismiss="modal">OK</button></div>
        </div>
    </div>
</div>

Inline Alert


<div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title">Alert Message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>This is an inline alert message.</p>
    </div>
        <hr>
        <div class="row pl-4 pr-4 pb-4 pt-1">
        <div class="col"><button type="button" class="btn-sm btn-primary btn-block btn-sm margin-bottom-0" data-dismiss="modal">OK</button></div>
        </div>
    </div>
</div>

Alert Message

Alert messages are clean and simple by design, they can have internal buttons for closing the message or leading the user to another interaction.


  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Alert Message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
        <hr>
        <div class="row pl-4 pr-4 pb-4 pt-1">
          <div class="col-4"><button type="button" class="btn-sm btn-tertiary btn-block" data-dismiss="modal">Close</button></div>
          <div class="col-4"></div>
          <div class="col-4"><button type="button" class="btn-sm btn-primary btn-block"  data-dismiss="modal">OK</button></div>
        </div>
    </div>
  </div>

UI Style Guide