Alerts

Colours

Holy guacamole! You should check in on some of those fields below.

.alert-primary

Holy guacamole! You should check in on some of those fields below.

.alert-secondary

Holy guacamole! You should check in on some of those fields below.

.alert-danger

Holy guacamole! You should check in on some of those fields below.

.alert-warning

Holy guacamole! You should check in on some of those fields below.

.alert-success

Holy guacamole! You should check in on some of those fields below.

.alert-light

Holy guacamole! You should check in on some of those fields below.

.alert-white

<div class="alert alert-primary fade show" role="alert">...
</div> 
<div class="alert alert-secondary fade show" role="alert">...
</div> 
<div class="alert alert-danger fade show" role="alert">...
</div> 
<div class="alert alert-warning fade show" role="alert">...
</div> 
<div class="alert alert-success fade show" role="alert">...
</div> 
<div class="alert alert-light fade show" role="alert">...
</div> 
<div class="alert alert-white fade show" role="alert">...
</div>

Dismissable

Holy guacamole! You should check in on some of those fields below.

<div class="alert alert-success alert-dismissible fade show" role="alert"> ... 
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> 
        <span class="icon">
            <x-icon icon="close-circle">
            </x-icon>
        </span> 
    </button> 
</div>

Icon

Holy guacamole! You should check in on some of those fields below.

<div class="alert alert-success alert-dismissible fade show" role="alert"> 
    <span class="icon">
        <x-icon icon="warning-triangle">
        </x-icon>
    </span> ... 
</div>