> For the complete documentation index, see [llms.txt](https://sg-jds.gitbook.io/jds-beta/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sg-jds.gitbook.io/jds-beta/components/notification.md). # 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**
### Notifications 
<!-- Form Validation Alerts -->
<div class="form-group  required"> <label class="col-form-label"> Input with success
message</label>
                                        <div class="field-icon field-success"> <input class="form-control" type="text" spellcheck="false" data-ms-editor="true">
                                        </div> <span class="message text-success"><i class="fas fa-check-circle mr-1"></i>This is a success message.</span>
                                        
                                    </div>
									
									<div class="form-group required">
											  <label class="col-form-label">Input with warning message</label>
											  <div class="field-icon field-warning">
												<input class="form-control" type="text" spellcheck="false" data-ms-editor="true">
											  </div>
											  <span class="message text-warning"><i class="fas fa-exclamation-triangle mr-1"></i>This is a warning message.</span> </div>
                                    <div class="form-group required  field-has-error"> <label class="col-form-label">Input with error message</label> <input class="form-control" type="text" spellcheck="false" data-ms-editor="true"> <span class="message text-danger"><i class="fas fa-minus-circle mr-1"></i>This is an error message.
                                        </span> 
                                    </div>
<!--Default Alert-->
<div class="alert alert-default" role="alert"> This is a standard notification/alert. </div>
<!--Dismissable Alert-->
<div class="alert alert-default alert-dismissible fade show" role="alert"> This is a <strong>dismissable!</strong> notification/alert.
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"><i class="fal fa-times-circle"></i></span> </button>
</div>
<!--With a link -->
<div class="alert alert-default" role="alert"> This is a notification/alert <a href="#" class="alert-link">with a link</a>. </div>
<!--With an icon -->
<div class="alert alert-default has-icon alert-dismissible fade show" role="alert"> <span><i class="fal fa-info-circle"></i></span> This is a notification/alert <a href="#" class="alert-link">with an icon</a>.
   <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true"><i class="fal fa-times-circle"></i></span> </button>
</div>
<div class="alert alert-default has-icon alert-large" role="alert">
   <span><i class="fal fa-info-circle"></i></span>
   <div class="alert-content">
      <h4>Title / Heading of the alert</h4>
      <p>Description will be shown here. This can be a combination of dismissible and link.</p>
   </div>
</div>
<!--Success-->
<div class="alert alert-success has-icon alert-large" role="alert">
   <span><i class="fal fa-check-circle"></i></span>
   <div class="alert-content">
      <h4>Success</h4>
      <p>Description will be shown here. This can be a combination of dismissible and link.</p>
   </div>
</div>
<!--Warning-->
<div class="alert alert-warning has-icon alert-large" role="alert">
   <span><i class="fal fa-exclamation-triangle"></i></span>
   <div class="alert-content">
      <h4>Warning</h4>
      <p>Description will be shown here. This can be a combination of dismissible and link.</p>
   </div>
</div>
<!--Warning-->
<div class="alert alert-error has-icon alert-large" role="alert">
   <span><i class="fal fa-times-circle"></i></span>
   <div class="alert-content">
      <h4>Error Message</h4>
      <p>Description will be shown here. This can be a combination of dismissible and link.</p>
   </div>
</div>
<!--Example-->
<div class="alert alert-example has-icon alert-large" role="alert">
   <span><i class="fal fa-lightbulb-on"></i></span>
   <div class="alert-content">
      <h4>Example</h4>
      <p>Description will be shown here. This can be a combination of dismissible and link.</p>
   </div>
</div>
### Full width notification bars
```
Important Notice: This is a full width notification bar. You have a notification!
Success: This is a full width notification bar. You have a notification!
Warning: This is a full width notification bar. You have a notification!
Error: This is a full width notification bar. You have a notification!
``` ### Notification bar with Carousel ![](/files/0yqlgLYlEm0ki6TTEiTu) ``` ```