Simple alerts + links

<div class="alert">Simple default alert - lorem ipsum dolor sit amet consectetur adipiscing</div>

<div class="alert alert--primary">Simple primary alert - lorem ipsum dolor sit amet consectetur adipiscing</div>

<div class="alert alert--secondary">Simple secondary alert - lorem ipsum dolor sit amet consectetur adipiscing</div>

<div class="alert alert--success">Simple success alert - lorem ipsum dolor sit amet consectetur adipiscing</div>

<div class="alert alert--warning">Simple warning alert - lorem ipsum dolor sit amet consectetur adipiscing</div>

<div class="alert alert--info">Simple info alert - lorem ipsum dolor sit amet consectetur adipiscing</div>

<div class="alert alert--light">Simple light alert - lorem ipsum dolor sit amet consectetur adipiscing</div>

<div class="alert alert--dark">Simple dark alert - lorem ipsum dolor sit amet consectetur adipiscing</div>
           

Alert + close button

Will need js added for close button

<div class="alert alert--primary alert--dismissable">Simple dark alert - lorem ipsum dolor sit amet consectetur adipiscing
  <button class="icon-button icon-button--close">
    <i class="material-icons">close</i>
  </button>
</div>

Alert + icon

Alert with example icon

<div class="alert alert--warning alert--icon">
  <i class="material-icons">warning</i>
  Simple dark alert - lorem ipsum dolor sit amet consectetur adipiscing
</div>

Alert + content

Example of an alert containing additional HTML elements like headings, paragraphs and dividers

<div class="alert alert--primary">
  <h2>Heading here</h2>
  <p>Simple primary alert - with content here lorem ipsum dolor sit amet consectetur adipiscing</p>
  <hr>
  <p>Extra content here lorem ipsum dolor sit amet</p>
</div>