Basic Alerts

<div class="alert alert--info flex--row">
  <span class="material-icons alert__icon">info</span>
  <div class="alert__copy flex--column">
    <strong class="alert__title">Info Alert</strong>
    <p class="alert__subtitle display--none"></p>
  </div>
</div>
<div class="alert alert--success flex--row">
  <span class="material-icons alert__icon">check_circle</span>
  <div class="alert__copy flex--column">
    <strong class="alert__title">Success Alert</strong>
    <p class="alert__subtitle display--none"></p>
  </div>
</div>
<div class="alert alert--warning flex--row">
  <span class="material-icons alert__icon">warning</span>
  <div class="alert__copy flex--column">
    <strong class="alert__title">Warning Alert</strong>
    <p class="alert__subtitle">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod,
      maiores.
    </p>
  </div>
</div>

Closeable Alerts

<div class="alert alert--info alert--closeable flex--row">
  <span class="material-icons alert__icon">info</span>
  <div class="alert__copy flex--column">
    <strong class="alert__title">Info Alert with close</strong>
    <p class="alert__subtitle display--none"></p>
  </div>
  <span class="material-icons alert__close" title="close">close</span>
</div>
<div class="alert alert--success alert--closeable flex--row">
  <span class="material-icons alert__icon">check_circle</span>
  <div class="alert__copy flex--column">
    <strong class="alert__title">Success Alert with close</strong>
    <p class="alert__subtitle display--none"></p>
  </div>
  <span class="material-icons alert__close" title="close">close</span>
</div>
<div class="alert alert--warning alert--closeable flex--row">
  <span class="material-icons alert__icon">warning</span>
  <div class="alert__copy flex--column">
    <strong class="alert__title">Warning Alert with close</strong>
    <p class="alert__subtitle">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod,
      maiores.
    </p>
  </div>
  <span class="material-icons alert__close" title="close">close</span>
</div>
<div class="alert alert--error alert--closeable flex--row">
  <span class="material-icons alert__icon">error</span>
  <div class="alert__copy flex--column">
    <strong class="alert__title">Error Alert with close</strong>
    <p class="alert__subtitle">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam,
      non?
    </p>
  </div>
  <span class="material-icons alert__close" title="close">close</span>
</div>