Alerts

The web-alert component is used to convey important information to the user through the use of contextual types, icons, and colors. These default types come in 4 variations: success, info, warning

Your first alert

<web-alert badge="New">
   to you by addwebsolution.com -web-alert-
</web-alert>

More examples

<div class="p-5 space-y-5 w-10/12 text mx-auto">
    <web-alert badge="New">
    Provided to you by addwebsolution.com -web-alert-
    </web-alert>

    <web-alert class="bg-red-500">
    Provided to you by addwebsolution.com -web-alert-
    </web-alert>

    <web-alert class="bg-indigo-500 w-10/12">
    Provided to you by addwebsolution.com -web-alert-
    </web-alert>
</div>

Alerts with title

With web-alert-message component you can pass title and description to visualize more user-friendly and descriptive content.

<div class="p-5 space-y-5 w-10/12 text mx-auto">
  <web-alert-message color="green" title="Addweb solution">
    Provided to you by addwebsolution.com -web-alert-message-
  </web-alert-message>

  <web-alert-message color="orange" title="Addweb solution">
    Provided to you by addwebsolution.com -web-alert-message-
  </web-alert-message>

  <web-alert-message color="red" title="Addweb solution">
    Provided to you by addwebsolution.com -web-alert-message-
  </web-alert-message>
</div>