Alerts in Bermuda

Alerts are very important components, they come handy when we want to attract the user's attention to something important. Bermuda provides you the bunch of alerts

Simple Aterts

Primary Alert!   I am a primary alert. Please look at me.
Error Alert!   I am an error alert. Please look at me.
Success Alert!   I am a success alert. Please look at me.
Warning Alert!   I am a warning alert. Please look at me. 
                    
                        <div class="alert alert-primary border-rounded-sm">
                            <strong class="bold-xl">Primary Alert!  </strong>
                            <span>I am a primary alert. Please look at me.</span> </div>

                          <div class="alert alert-error border-rounded-sm">
                            <strong class="bold-xl">Error Alert!  </strong>
                            <span>I am an error alert. Please look at me.</span> </div>

                          <div class="alert alert-success border-rounded-sm">
                            <strong class="bold-xl">Success Alert!  </strong>
                            <span>I am a success alert. Please look at me.</span> </div>

                          <div class="alert alert-warning border-rounded-sm">
                            <strong class="bold-xl">Warning Alert!  </strong>
                            <span>I am a warning alert. Please look at me.</span> </div>

Dismissible Alerts

If alert pops up and cannot be dismissed then it is just intimidating thing. So bermuda also provides the dismissible alerts, which can be dismissed by user very easily.
In order to make use of these alerts you also need to use the Bermuda's CDN link for javascript.

Primary Alert!   I am a primary alert. You can dismiss me.
Error Alert!   I am an error alert. You can dismiss me.
Success Alert!   I am a success alert. You can dismiss me.
Warning Alert!   I am a warning alert. You can dismiss me. 
                    
                        <div class="alert alert-primary border-rounded-sm">
                            <strong class="bold-xl">Primary Alert!  </strong>
                            <span>I am a primary alert. You can dismiss me.</span>
                            <div class="alert__dismiss-btn">
                              <i class="fas fa-times"></i>
                            </div>
                          </div>

                          <div class="alert alert-error border-rounded-sm">
                            <strong class="bold-xl">Error Alert!  </strong>
                            <span>I am an error alert. You can dismiss me.</span>
                            <div class="alert__dismiss-btn">
                              <i class="fas fa-times"></i>
                            </div>
                          </div>

                          <div class="alert alert-success border-rounded-sm">
                            <strong class="bold-xl">Success Alert!  </strong>
                            <span>I am a success alert. You can dismiss me.</span>
                            <div class="alert__dismiss-btn">
                              <i class="fas fa-times"></i>
                            </div>
                          </div>

                          <div class="alert alert-warning border-rounded-sm">
                            <strong class="bold-xl">Warning Alert!  </strong>
                            <span>I am a warning alert. You can dismiss me.</span>
                            <div class="alert__dismiss-btn">
                              <i class="fas fa-times"></i>
                            </div>
                          </div>

Note: For dismiss icon Bermuda is using fontawesome icons. If icon is not working for you please feel free to chnage the icon.

  Avatars
Badges