HxAlert #

<HxAlert Color="ThemeColor.Primary">A simple primary alert—check it out!</HxAlert>
<HxAlert Color="ThemeColor.Secondary">A simple secondary alert—check it out!</HxAlert>
<HxAlert Color="ThemeColor.Success"> A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</HxAlert>
<HxAlert Color="ThemeColor.Danger">A simple danger alert—check it out!</HxAlert>
<HxAlert Color="ThemeColor.Warning">A simple warning alert—check it out!</HxAlert>
<HxAlert Color="ThemeColor.Info">A simple info alert—check it out!</HxAlert>
<HxAlert Color="ThemeColor.Light">A simple light alert—check it out!</HxAlert>
<HxAlert Color="ThemeColor.Dark">A simple dark alert—check it out!</HxAlert>

<HxAlert Color="ThemeColor.Info"><HxIcon Icon="@BootstrapIcon.InfoCircleFill" /> An example alert with an icon</HxAlert>
<HxAlert Color="ThemeColor.Success"><HxIcon Icon="@BootstrapIcon.CheckCircleFill" /> An example success alert with an icon</HxAlert>
<HxAlert Color="ThemeColor.Warning"><HxIcon Icon="@BootstrapIcon.ExclamationTriangleFill" /> An example warning alert with an icon</HxAlert>
<HxAlert Color="ThemeColor.Danger"><HxIcon Icon="@BootstrapIcon.ExclamationTriangleFill" /> An example danger alert with an icon</HxAlert>

<HxAlert Color="ThemeColor.Success">
	<h4 class="alert-heading">Well done!</h4>
	<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
	<hr>
	<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</HxAlert>

<HxAlert Color="ThemeColor.Warning" Dismissible="true">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</HxAlert>