Alerts

<div class="alert alert-primary d-flex" role="alert">
  <div class="align-self-start">
    <svg
      class="icon-inline"
      xmlns="http://www.w3.org/2000/svg"
      height="1em"
      viewBox="0 0 576 512">
      <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
      <path
        d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
    </svg>
  </div>
  <div class="align-self-center">
    This is a <a href="#">new feature</a> we have, or an update to the system.
  </div>
</div>
<div class="alert alert-success d-flex" role="alert">
  <div class="align-self-start"><i class="fa-solid fa-circle-check"></i></div>
  <div class="align-self-center">Your action was successfully completed.</div>
</div>
<div class="alert alert-warning d-flex" role="alert">
  <div class="align-self-start"><i class="fa-solid fa-circle-info"></i></div>
  <div class="align-self-center">
    Only completed applications are displayed here. For drafts go to your
    <a href="#">dashboard</a>. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Aenean justo tortor, mollis nec felis sed, ultrices dapibus
    mi. Sed efficitur suscipit lectus in bibendum. Donec ipsum velit,
    sollicitudin ac lacus ultrices, consectetur vulputate nisi. Pellentesque
    molestie, nisl at aliquet blandit, odio nisi porta risus, sit amet feugiat
    nibh metus tincidunt tortor.
  </div>
</div>
<p>
  Alerts width is not fixed. It should be flexible to adapt to the content of
  the layout.
</p>
<div class="row">
  <div class="col-md-5">
    <p>Example of an alert in a col-md-5 screens.</p>
    <div class="alert alert-danger d-flex" role="alert">
      <div class="align-self-start">
        <i class="fa-solid fa-triangle-exclamation"></i>
      </div>
      <div class="align-self-center">
        <strong>Heads up!</strong> The system will be down for 3 hours from 10
        am to 1 pm on Sunday, Jan 1st, 2021. We apologize for any inconvenience
        caused.
      </div>
    </div>
  </div>
  <div class="col-md-7"></div>
</div>

<h2>Dismissable Alerts</h2>

<div
  class="alert alert-primary d-flex alert-dismissible fade show"
  role="alert">
  <div class="align-self-start">
    <svg
      class="icon-inline"
      xmlns="http://www.w3.org/2000/svg"
      height="1em"
      viewBox="0 0 576 512">
      <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
      <path
        d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
    </svg>
  </div>
  <div class="align-self-center">
    Learn about the <a href="#">new features of this system</a>. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Aenean justo tortor, mollis nec
    felis sed, ultrices dapibus mi. Sed efficitur suscipit lectus in bibendum.
    Donec ipsum velit, sollicitudin ac lacus ultrices, consectetur vulputate
    nisi. Pellentesque molestie, nisl at aliquet blandit, odio nisi porta risus,
    sit amet feugiat nibh metus tincidunt tortor.
  </div>
  <button
    class="btn-close"
    data-bs-dismiss="alert"
    type="button"
    aria-label="Close"></button>
</div>
<div
  class="alert alert-success d-flex alert-dismissible fade show"
  role="alert">
  <div class="align-self-start">
    <svg
      class="icon-inline"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512">
      <!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
      <path
        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" />
    </svg>
  </div>
  <div class="align-self-center">
    Your action was successfully completed. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Aenean justo tortor, mollis nec felis sed,
    ultrices dapibus mi. Sed efficitur suscipit lectus in bibendum.
  </div>
  <button
    class="btn-close"
    data-bs-dismiss="alert"
    type="button"
    aria-label="Close"></button>
</div>
<div
  class="alert alert-warning d-flex alert-dismissible fade show"
  role="alert">
  <div class="align-self-start"><i class="fa-solid fa-circle-info"></i></div>
  <div class="align-self-center">
    <p>
      This system will be down for 3 hours from 10 am to 1 pm on Sunday, Jun
      5th, 2022. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
      justo tortor, mollis nec felis sed, ultrices dapibus mi.
    </p>
    <p>
      Sed efficitur suscipit lectus in bibendum. Donec ipsum velit, sollicitudin
      ac lacus ultrices, consectetur vulputate nisi. Pellentesque molestie, nisl
      at aliquet blandit, odio nisi porta risus, sit amet feugiat nibh metus
      tincidunt tortor.
    </p>
  </div>
  <button
    class="btn-close"
    data-bs-dismiss="alert"
    type="button"
    aria-label="Close"></button>
</div>
<div class="alert alert-danger d-flex alert-dismissible fade show" role="alert">
  <div class="align-self-start">
    <i class="fa-solid fa-triangle-exclamation"></i>
  </div>
  <div class="align-self-center">
    This system is currently down for unscheduled maintenance. We apologize for
    the inconvenience. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aenean justo tortor, mollis nec felis sed, ultrices dapibus mi. Sed
    efficitur suscipit lectus in bibendum. Donec ipsum velit, sollicitudin ac
    lacus ultrices, consectetur vulputate nisi. Pellentesque molestie, nisl at
    aliquet blandit, odio nisi porta risus, sit amet feugiat nibh metus
    tincidunt tortor.
  </div>
  <button
    class="btn-close"
    data-bs-dismiss="alert"
    type="button"
    aria-label="Close"></button>
</div>