# 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) ```

1 Description will be shown here. This can be a combination of dismissible and link.

2 Lorem Ipsum is simply dummy text of the printing an d typesetting industry. Lorem Ipsum has been the industry's standard dummy.

``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sg-jds.gitbook.io/jds-beta/components/notification.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.