+

Alerts






Alerts help in showing error and different notification while JS/Jquery interactivity in your web-page. PixelzUI provides ten classes for alerts.

Types

Following are the three types of alerts in PixelzUI.
  1. Square
  2. Semi-rounded
  3. Rounded
=>Other types are based on color class(es).

Classes

Following are the classes to use alerts in your scripts.

  1. .alrt-msg
  2. .alrt-cls
  3. .alrt-srnd
  4. .alrt-rnd
  5. .alrt-xsm
  6. .alrt-sm
  7. .alrt-md
  8. .alrt-lg
  9. .alrt-xlg
  10. .alrt-exp
.

=>Other classes are based on color class(es).

How to use

  1. Add .alrt-* as class attribute in <div> for alter sizing.
  2. <div class="alrt-*"></div>
  3. Add .alrt-# as extra class for alert styles.
  4. <div class="alrt-* alrt-#"></div>
  5. Add .alrt-exp as extra class for expanded alerts.
  6. <div class="alrt-* alrt-# alrt-exp"></div>
  7. Add .alrt-dy as extra class for dynamic alerts.
  8. <div class="alrt-* alrt-# alrt-exp alrt-dy"></div>
  9. Add some color classes.
  10. <div class="alrt-* alrt-# alrt-exp alrt-dy bg-bl t-wt br-wt"></div>
  11. Add .alrt-msg inside parent <div> for alter message.
  12. <div class="alrt-* alrt-# alrt-exp alrt-dy bg-bl t-wt br-wt">
     <div class="alrt-msg">Alert Message</div>
    </div>
  13. Add .alrt-cls inside parent <div> for alter cross icon.
  14. <div class="alrt-* alrt-# alrt-exp alrt-dy bg-bl t-wt br-wt">
     <div class="alrt-msg">Alert Message</div>
     <div class="alrt-cls">&#10006;</div>
    </div>
=>* means (xsm, sm, md, lg, xlg & exp).

=># means (srnd & rnd).

Demo

Square Alerts

Success! Your form has been submitted.

Success! Your form has been submitted.

Success! Your form has been submitted.

Success! Your form has been submitted.

Success! Your form has been submitted.

Semi-rounded Alerts

Success! Your form has been submitted.

Success! Your form has been submitted.

Success! Your form has been submitted.

Success! Your form has been submitted.

Success! Your form has been submitted.

Rounded Alerts

Success! Your form has been submitted.

Success! Your form has been submitted.

Success! Your form has been submitted.

Success! Your form has been submitted.

Success! Your form has been submitted.

Dynamic Rounded Alerts

Success! Your form has been submitted.

Success! Your form has been submitted.

Success! Your form has been submitted.

Success! Your form has been submitted.

Success! Your form has been submitted.

Editing

Edit Classes


Success! Your form has been submitted.



 <div class="alrt-md alrt-dy alrt-rnd bg-pl t-wt br-wt">
  <div class="alrt-msg">
   <b>Success!</b><i>Your form has been submitted.</i>
  </div>
  <div class="alrt-cls">&#10006;</div>
 </div>

Leave a Reply

Your email address will not be published. Required fields are marked.