Alert

<c-bs-alert variant="primary">A simple primary alert—check it out!</c-bs-alert>

<c-bs-alert variant="secondary">A simple secondary alert—check it out!</c-bs-alert>

<c-bs-alert variant="success">A simple success alert—check it out!</c-bs-alert>

<c-bs-alert variant="danger">A simple danger alert—check it out!</c-bs-alert>

<c-bs-alert variant="warning">A simple warning alert—check it out!</c-bs-alert>

<c-bs-alert variant="info">A simple info alert—check it out!</c-bs-alert>

<c-bs-alert variant="light">A simple light alert—check it out!</c-bs-alert>

<c-bs-alert variant="dark">A simple dark alert—check it out!</c-bs-alert>

<c-bs-alert variant="primary">
  A simple primary alert with
  <c-bs-alert-link href="#">an example link</c-bs-alert-link>. Give it a click if you like.
</c-bs-alert>

<c-bs-alert variant="success">
  A simple success alert with
  <c-bs-alert-link href="#">an example link</c-bs-alert-link>.
</c-bs-alert>

<c-bs-alert variant="danger">
  A simple danger alert with
  <c-bs-alert-link href="#">an example link</c-bs-alert-link>.
</c-bs-alert>

<c-bs-alert variant="success">
  <c-bs-alert-heading>Well done!</c-bs-alert-heading>
  <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>
</c-bs-alert>

<c-bs-alert variant="primary" c-attrs="{'class': 'd-flex align-items-center'}">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
    <use xlink:href="#info-fill"></use>
  </svg>
  <div>An example alert with an icon</div>
</c-bs-alert>

<c-bs-alert variant="primary" c-dismissible="True">A simple primary dismissible alert—check it out!</c-bs-alert>

<c-bs-alert variant="secondary" c-dismissible="True">A simple secondary dismissible alert—check it out!</c-bs-alert>

<c-bs-alert variant="success" c-dismissible="True">A simple success dismissible alert—check it out!</c-bs-alert>

<c-bs-alert variant="danger" c-dismissible="True">A simple danger dismissible alert—check it out!</c-bs-alert>

<c-bs-alert variant="warning" c-dismissible="True">
  <strong>Holy guacamole!</strong>
  You should check in on some of those fields below.
</c-bs-alert>

<c-bs-alert variant="info" c-dismissible="True">A simple info dismissible alert—check it out!</c-bs-alert>

<c-bs-alert variant="light" c-dismissible="True">A simple light dismissible alert—check it out!</c-bs-alert>

<c-bs-alert variant="dark" c-dismissible="True">A simple dark dismissible alert—check it out!</c-bs-alert>