Flashes

gistfile1.html

<div class="flashes">
    <div class="flash">
      <a class="close" data-icon="close" data-close="flash"></a>
      <div class="badge-large" data-icon="lightbulb"></div>
      <div class="message">
        <h3>This is a flash</h3>
        <p>You shouldn't ignore it</p>
      </div>
    </div>
    <div class="flash flash-good">
      <a class="close" data-icon="close" data-close="flash"></a>
      <div class="badge-large" data-icon="lightbulb"></div>
      <div class="message">
        <h3>This is a flash</h3>
        <p>You shouldn't ignore it</p>
      </div>
    </div>
    <div class="flash flash-bad">
      <a class="close" data-icon="close" data-close="flash"></a>
      <div class="badge-large" data-icon="lightbulb"></div>
      <div class="message">
        <h3>This is a flash</h3>
        <p>You shouldn't ignore it</p>
      </div>
    </div>
    <div class="flash">
      <div class="badge-large" data-icon="lightbulb"></div>
      <div class="flash-action">
        <a class="button">Okay</a>
      </div>
      <div class="message">
        <h3>This is a flash</h3>
        <p>You shouldn't ignore it</p>
      </div>
    </div>
    <div class="flash flash-good">
      <div class="badge-large" data-icon="heart"></div>
      <div class="flash-action">
        <a class="button" data-close="flash">Forget it</a>
        <a class="button">Okay</a>
      </div>
      <div class="message">
        <h3>This is a flash</h3>
        <p>You shouldn't ignore it</p>
      </div>
    </div>
    <div class="flash flash-bad">
      <div class="badge-large" data-icon="alert"></div>
      <div class="flash-action">
        <a class="button" data-close="flash">Forget it</a>
        <a class="button">Okay</a>
      </div>
      <div class="message">
        <h3>This is a flash</h3>
        <p>You shouldn't ignore it.  If you do, something bad will happen.</p>
      </div>
    </div>
  </div>