Modals

Modals are used primarily for form submissions like signing or up. by adding an active class to .modal-content.

<div class='contain'>
  <div id='modal-content' class='animate modal modal-content active'>
    <form id='modal-name' class='modal-popup' method='post'>
      <div class='col6 modal-body fill-white contain'>
        <a href='#close' class='quiet pad1 icon fr close dark'></a>
        <div class='fill-blue dark pad2y'>
          <div class='pad4x center'>
            <h2>Favorite dog name?</h2>
          </div>
          <div class='pad4x pad2y'>
            <input type='text' name='dog-name' class='round clean stretch space-bottom2' placeholder='e.g Penny' />
          </div>
        </div>
        <div class='fill-gray pad2y pad4x center clearfix'>
          <input type='submit' class='col6 margin3' value='Submit name!' />
        </div>
      </div>
    </form>
  </div>
</div>

Notices

.note

Holly

We're getting a signal. It's probably nothing but I just thought I'd mention it.

.note.warning

Rimmer

Aliens.

.note.error

Lister

Oh God, aliens... Your explanation for anything slightly peculiar is aliens, isn't it? You lose your keys - it's aliens. A picture falls off the wall - it's aliens. That time we used up a whole bog roll in a day, you thought that was aliens as well!

<div class='note contain'>
  <div class='fixed-label label-right fill-darken3 dark small'>.note</div>
  <h3>Holly</h3>
  <p>We're getting a signal. It's probably nothing but I just thought I'd mention it.</p>
</div>
<div class='note warning contain'>
  <div class='fixed-label label-right fill-darken3 dark small'>.note.warning</div>
  <h3>Rimmer</h3>
  <p>Aliens.</p>
</div>
<div class='note error contain'>
  <div class='fixed-label label-right fill-darken3 dark small'>.note.error</div>
  <h3>Lister</h3>
  <p>Oh God, aliens... Your explanation for anything slightly peculiar is aliens, isn't it? You lose your keys - it's aliens. A picture falls off the wall - it's aliens. That time we used up a whole bog roll in a day, you thought that was aliens as well!</p>
</div>