This flash messages system has three different modes: Form, Fullscreen and Async.

• .flash-form messages—typically used in/near forms.
• .flash-fullscreen messages—used generally when the action is not "form-based" (successfully reordering contacts; selecting a featured show) or when the user is deleting a record.
• .flash-async messages—used when providing notifications outside of the typical request/response cycle.

Each mode has two versions .flash-notice and .flash-error.

.flash-form
  .flash-wrap{ class: 'flash-notice', data: { state: 'open' } }
    .flash-close
      %a
    .flash-contents
      %a
        Messages go here.

.flash-form
  .flash-wrap{ class: 'flash-error', data: { state: 'open' } }
    .flash-close
      %a
    .flash-contents
      %a
        Messages go here.

.flash-fullscreen
  .flash-wrap{ class: 'flash-notice', data: { state: 'open' } }
    .flash-close
      %a
    .flash-contents
      %a
        Messages go here.

.flash-fullscreen
  .flash-wrap{ class: 'flash-error', data: { state: 'open' } }
    .flash-close
      %a
    .flash-contents
      %a
        Messages go here.

.flash-form
  .flash-wrap{ class: 'flash-notice', data: { state: 'open' } }
    .flash-close
      %a
    .flash-contents
      %a
        Messages go here.

.flash-form
  .flash-wrap{ class: 'flash-error', data: { state: 'open' } }
    .flash-close
      %a
    .flash-contents
      %a
        Messages go here.