# Notification

### [Interactive demo](https://vision.crimsonlogic.studio/jds/v1.2/components.html#notfication-wrapper)

### Types

Notifications / Alerts are available for any length of text, as well as an optional dismiss button.

### Variants

For proper styling, use one of the required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts you must use ( JS provided).

### Examples

### **Form Field Validation alerts**

<div align="left"><figure><img src="https://2758270529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MVPzFJV0KiMDuBMGmVD%2Fuploads%2F95QcQwyGOiZRyiPgdkSE%2Fimage.png?alt=media&#x26;token=2b8aaa26-c6cd-46f8-a266-0e8e1cff4dd7" alt=""><figcaption></figcaption></figure></div>

### Notifications

<div align="left"><img src="https://2758270529-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVPzFJV0KiMDuBMGmVD%2F-MZSNMNNRazyOkHxEz3d%2F-MZSTKhBbF8O8S-coh6U%2Fimage.png?alt=media&#x26;token=9128650f-37e1-407d-b82c-aebe24db530c" alt=""></div>

<pre class="language-html" data-overflow="wrap"><code class="lang-html"><strong>&#x3C;!-- Form Validation Alerts -->
</strong>&#x3C;div class="form-group  required"> &#x3C;label class="col-form-label"> Input with success
message&#x3C;/label>
                                        &#x3C;div class="field-icon field-success"> &#x3C;input class="form-control" type="text" spellcheck="false" data-ms-editor="true">
                                        &#x3C;/div> &#x3C;span class="message text-success">&#x3C;i class="fas fa-check-circle mr-1">&#x3C;/i>This is a success message.&#x3C;/span>
                                        
                                    &#x3C;/div>
									
									&#x3C;div class="form-group required">
											  &#x3C;label class="col-form-label">Input with warning message&#x3C;/label>
											  &#x3C;div class="field-icon field-warning">
												&#x3C;input class="form-control" type="text" spellcheck="false" data-ms-editor="true">
											  &#x3C;/div>
											  &#x3C;span class="message text-warning">&#x3C;i class="fas fa-exclamation-triangle mr-1">&#x3C;/i>This is a warning message.&#x3C;/span> &#x3C;/div>
                                    &#x3C;div class="form-group required  field-has-error"> &#x3C;label class="col-form-label">Input with error message&#x3C;/label> &#x3C;input class="form-control" type="text" spellcheck="false" data-ms-editor="true"> &#x3C;span class="message text-danger">&#x3C;i class="fas fa-minus-circle mr-1">&#x3C;/i>This is an error message.
                                        &#x3C;/span> 
                                    &#x3C;/div>
<strong>&#x3C;!--Default Alert-->
</strong>&#x3C;div class="alert alert-default" role="alert"> This is a standard notification/alert. &#x3C;/div>
&#x3C;!--Dismissable Alert-->
&#x3C;div class="alert alert-default alert-dismissible fade show" role="alert"> This is a &#x3C;strong>dismissable!&#x3C;/strong> notification/alert.
   &#x3C;button type="button" class="close" data-dismiss="alert" aria-label="Close"> &#x3C;span aria-hidden="true">&#x3C;i class="fal fa-times-circle">&#x3C;/i>&#x3C;/span> &#x3C;/button>
&#x3C;/div>
&#x3C;!--With a link -->
&#x3C;div class="alert alert-default" role="alert"> This is a notification/alert &#x3C;a href="#" class="alert-link">with a link&#x3C;/a>. &#x3C;/div>
&#x3C;!--With an icon -->
&#x3C;div class="alert alert-default has-icon alert-dismissible fade show" role="alert"> &#x3C;span>&#x3C;i class="fal fa-info-circle">&#x3C;/i>&#x3C;/span> This is a notification/alert &#x3C;a href="#" class="alert-link">with an icon&#x3C;/a>.
   &#x3C;button type="button" class="close" data-dismiss="alert" aria-label="Close"> &#x3C;span aria-hidden="true">&#x3C;i class="fal fa-times-circle">&#x3C;/i>&#x3C;/span> &#x3C;/button>
&#x3C;/div>
&#x3C;div class="alert alert-default has-icon alert-large" role="alert">
   &#x3C;span>&#x3C;i class="fal fa-info-circle">&#x3C;/i>&#x3C;/span>
   &#x3C;div class="alert-content">
      &#x3C;h4>Title / Heading of the alert&#x3C;/h4>
      &#x3C;p>Description will be shown here. This can be a combination of dismissible and link.&#x3C;/p>
   &#x3C;/div>
&#x3C;/div>
&#x3C;!--Success-->
&#x3C;div class="alert alert-success has-icon alert-large" role="alert">
   &#x3C;span>&#x3C;i class="fal fa-check-circle">&#x3C;/i>&#x3C;/span>
   &#x3C;div class="alert-content">
      &#x3C;h4>Success&#x3C;/h4>
      &#x3C;p>Description will be shown here. This can be a combination of dismissible and link.&#x3C;/p>
   &#x3C;/div>
&#x3C;/div>
&#x3C;!--Warning-->
&#x3C;div class="alert alert-warning has-icon alert-large" role="alert">
   &#x3C;span>&#x3C;i class="fal fa-exclamation-triangle">&#x3C;/i>&#x3C;/span>
   &#x3C;div class="alert-content">
      &#x3C;h4>Warning&#x3C;/h4>
      &#x3C;p>Description will be shown here. This can be a combination of dismissible and link.&#x3C;/p>
   &#x3C;/div>
&#x3C;/div>
&#x3C;!--Warning-->
&#x3C;div class="alert alert-error has-icon alert-large" role="alert">
   &#x3C;span>&#x3C;i class="fal fa-times-circle">&#x3C;/i>&#x3C;/span>
   &#x3C;div class="alert-content">
      &#x3C;h4>Error Message&#x3C;/h4>
      &#x3C;p>Description will be shown here. This can be a combination of dismissible and link.&#x3C;/p>
   &#x3C;/div>
&#x3C;/div>
&#x3C;!--Example-->
&#x3C;div class="alert alert-example has-icon alert-large" role="alert">
   &#x3C;span>&#x3C;i class="fal fa-lightbulb-on">&#x3C;/i>&#x3C;/span>
   &#x3C;div class="alert-content">
      &#x3C;h4>Example&#x3C;/h4>
      &#x3C;p>Description will be shown here. This can be a combination of dismissible and link.&#x3C;/p>
   &#x3C;/div>
&#x3C;/div>
</code></pre>

### Full width notification bars

<div align="left"><img src="https://2758270529-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MVPzFJV0KiMDuBMGmVD%2F-MZSNMNNRazyOkHxEz3d%2F-MZSTDSoCjwikmf2IRzc%2Fimage.png?alt=media&#x26;token=b8b9d43c-54d3-4040-8b90-c72b4708b857" alt=""></div>

```
<!--Full width notification bar to show system down time, maintenance notices etc..-->
<div id="notification" class="notification_fw bg-primary" style="display: block;">
  <div class="container-fluid">
  <div class="notification_close" title="Dismiss Notification"><span class="fal fa-times"></span></div>
  <i class="fal fa-info-circle"></i> <strong>Important Notice:</strong> This is a full width notification bar. You have a notification! </div>
</div>
<div class="notification_fw bg-success d-block">
    <div class="container-fluid">
      <div class="notification_close" title="Dismiss Notification"><span class="fal fa-times"></span></div>
      <i class="fal fa-check-circle"></i> <strong>Success:</strong> This is a full width notification bar. You have a notification! </div>
  </div>
  <div class="notification_fw bg-warning d-block">
    <div class="container-fluid">
      <div class="notification_close" title="Dismiss Notification"><span class="fal fa-times"></span></div>
      <i class="fal fa-exclamation-circle"></i> <strong>Warning:</strong> This is a full width notification bar. You have a notification! </div>
  </div>
  <div class="notification_fw bg-error d-block">
    <div class="container-fluid">
      <div class="notification_close" title="Dismiss Notification"><span class="fal fa-times"></span></div>
      <i class="fal fa-times-circle"></i> <strong>Error:</strong> This is a full width notification bar. You have a notification! </div>
  </div>
```

### Notification bar with Carousel

![](https://2758270529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MVPzFJV0KiMDuBMGmVD%2Fuploads%2FuF52pjBL20H5ThZNKbVV%2Fimage.png?alt=media\&token=177cd46a-cf8a-40ea-b597-142747599957)

```
<div id="alert_carousel" class="carousel carousel-fade mb-3" data-ride="carousel">
  <div class="notification_close" title="Dismiss Notification">
    <span class="fal fa-times"></span>
  </div>
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="notification_fw">
        <div class="notification_fw-details">
          <p>
            <span class="has-icon">
              <i class="fas fa-info-circle"></i>
            </span>1 Description will be shown here. This can be a combination of dismissible and link.
          </p>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="notification_fw">
        <div class="notification_fw-details">
          <p>
            <span class="has-icon">
              <i class="fas fa-info-circle"></i>
            </span>2 Lorem Ipsum is simply dummy text of the printing an d typesetting industry. Lorem Ipsum has been the industry's standard dummy.
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#alert_carousel" data-slide="prev">
    <i class="fal fa-chevron-left"></i>
  </a>
  <a class="carousel-control-next" href="#alert_carousel" data-slide="next">
    <i class="fal fa-chevron-right"></i>
  </a>
</div>
```
