Alerts

Colours
.alert-primary
.alert-secondary
.alert-danger
.alert-warning
.alert-success
.alert-light
.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
<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
<div class="alert alert-success alert-dismissible fade show" role="alert"> 
    <span class="icon">
        <x-icon icon="warning-triangle">
        </x-icon>
    </span> ... 
</div>