Input

<div class="Alert -color-secondary" role="alert">A basic Alert, no inputs or function</div>
<div class="Alert -color-success" role="alert">A basic Alert, no inputs or function</div>
<div class="Alert -color-info" role="alert">A basic Alert, no inputs or function</div>
<div class="Alert -color-warning" role="alert">A basic Alert, no inputs or function</div>
<div class="Alert -color-danger" role="alert">A basic Alert, no inputs or function</div>
<div class="Alert -color-primary" role="alert">A basic Alert, no inputs or function</div>

<div class="Alert" role="alert">
  <p> An Alert containing <a href="#" class="Link">an example link.</a> </p>
</div>

<div class="Alert" role="alert">
  <section class="Alert-Content">
    <h2 class="Text type-h2">Lorem Ipsum</h2>
    <p>
      In here is where we'd normally have a small chunk of the Lorem Ipsum text, however I'm too lazy to generate and copy it, so instead we
      will simply have this writing.
    </p>
  </section>
</div>

<div class="Alert Alert-Icons" role="alert">
  <i class="Icon exclamation-triangle-fill"></i>An Alert including an icon within the display
</div>

<guvam-alert>
  <div class="Alert Alert-Dismissable" data-target="alert" role="alert">
    <p class="Alert-Content"> a closable Alert with a button </p>
    <button class="Button icon -color-success" data-target="close-button" aria-label="Close"> <i class="Icon x-lg"></i> </button>
  </div>
</guvam-alert>