Alert - Raven

Basic

A simple primary alert!

A simple danger alert!

A simple warning alert!

A simple success alert!

A simple secondary alert!

A simple dark alert!


<div class="alert alert-primary">a simple primary alert!</div>
<div class="alert alert-danger">a simple danger alert!</div>
<div class="alert alert-warning">a simple warning alert!</div>
<div class="alert alert-success">a simple success alert!</div>
<div class="alert alert-secondary">a simple secondary alert!</div>
<div class="alert alert-dark">a simple dark alert!</div>

With Icon

A primary alert with icon!

A danger alert with icon!

A warning alert with icon!

A success alert with icon!

A secondary alert with icon!

A dark alert with icon!


<div class="alert alert-primary flex items-center">
    <i class="la la-info-circle text-2xl leading-none mr-2"></i>
    a primary alert with icon!
</div>
<div class="alert alert-danger flex items-center">
    <i class="la la-ban text-2xl leading-none mr-2"></i>
    a danger alert with icon!
</div>
<div class="alert alert-warning flex items-center">
    <i class="la la-exclamation-circle text-2xl leading-none mr-2"></i>
    a warning alert with icon!
</div>
<div class="alert alert-success flex items-center">
    <i class="la la-check-circle text-2xl leading-none mr-2"></i>
    a success alert with icon!
</div>
<div class="alert alert-secondary flex items-center">
    <i class="la la-info-circle text-2xl leading-none mr-2"></i>
    a secondary alert with icon!
</div>
<div class="alert alert-dark flex items-center">
    <i class="la la-info-circle text-2xl leading-none mr-2"></i>
    a dark alert with icon!
</div>

Dismissable

A dismissable primary alert!

A dismissable danger alert!

A dismissable warning alert!

A dismissable success alert!

A dismissable secondary alert!

A dismissable dark alert!

To create a dismissable alert, create a button and add class alert-dismiss to the button. Make sure the button is exactly under the alert element.


<div class="alert alert-primary">
    a dismissable primary alert!
    <button type="button" class="alert-dismiss text-2xl leading-none">&times;</button>
</div>
<div class="alert alert-danger">
    a dismissable danger alert!
    <button type="button" class="alert-dismiss text-2xl leading-none">&times;</button>
</div>
<div class="alert alert-warning">
    a dismissable warning alert!
    <button type="button" class="alert-dismiss text-2xl leading-none">&times;</button>
</div>
<div class="alert alert-success">
    a dismissable success alert!
    <button type="button" class="alert-dismiss text-2xl leading-none">&times;</button>
</div>
<div class="alert alert-secondary">
    a dismissable secondary alert!
    <button type="button" class="alert-dismiss text-2xl leading-none">&times;</button>
</div>
<div class="alert alert-dark">
    a dismissable dark alert!
    <button type="button" class="alert-dismiss text-2xl leading-none">&times;</button>
</div>

With Additional Content

What An Awesome Alert! New

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nulla est perspiciatis quam, veniam, eligendi modi expedita inventore voluptatem vel illum aspernatur veritatis dolores quis sint esse commodi. Reiciendis, repellendus.

What An Awesome Alert! New

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit quod, molestiae aut quisquam obcaecati in vero illo quam, iure rem tempore eaque placeat voluptate vitae, quia culpa minus sequi. A!

You can just put anything, really!


<div class="alert alert-primary">
    <h6 class="font-semibold">
        what an awesome alert!
        <span class="badge badge-primary ml-1 text-xs font-bold">new</span>
    </h6>
    <p class="mt-2">
        lorem...
    </p>
    <button type="button" class="alert-dismiss text-2xl leading-none">&times;</button>
</div>
<div class="alert alert-success">
    <h6 class="font-semibold">
        what an awesome alert!
        <span class="badge badge-success ml-1 text-xs font-bold">new</span>
    </h6>
    <p class="mt-2">
        lorem...
    </p>
    <button type="button" class="alert-dismiss text-2xl leading-none">&times;</button>
</div>