Info Alert

Info: This is an informational alert with important details.

<div class="alert alert-info">
    <strong>Info:</strong> Message text...
</div>

Success Alert

Success! Your action was completed successfully.

<div class="alert alert-success">
    <strong>Success!</strong> Message text...
</div>

Warning: Please review this important information before proceeding.

<div class="alert alert-warning">
    <strong>Warning:</strong> Message text...
</div>

Error: Something went wrong. Please try again.

<div class="alert alert-error">
    <strong>Error:</strong> Message text...
</div>

Info: This alert can be dismissed by clicking the X button.

<div class="alert alert-info alert-dismissible">
    <button class="alert-close" onclick="...">×</button>
    Message text...
</div>

✓ Success! Your data has been saved successfully.

<div class="alert alert-success">
    <span class="alert-icon">✓</span>
    <strong>Success!</strong> Message...
</div>

✓ This is a toast notification

<div class="toast">
    <span>✓ Message</span>
    <button class="toast-close">×</button>
</div>