section#messages
  h2 Messages
  p There are four types of messages&mdash;default (no class), alert (<code>message-alert</code>), error (<code>message-error</code>) and success (<code>message-success</code>).

  .message
    p This is a message. <a>This is a link.</a>

  .message.message-error
    p This is an error. <a>This is a link.</a>

  .message.message-alert
    p This is an alert. <a>This is a link.</a>

  .message.message-success
    p This is a success message. <a>This is a link.</a>

  :markdown
    ```html
      <div class='message'>
        <p>This is a message. <a>This is a link.</a></p>
      </div>

      <div class='message message-error'>
        <p>This is an error. <a>This is a link.</a></p>
      </div>

      <div class='message message-alert'>
        <p>This is an alert. <a>This is a link.</a></p>
      </div>

      <div class='message message-success'>
        <p>This is a success message. <a>This is a link.</a></p>
      </div>
    ```

  h3 Dismissable messages
  p Messages that can be dismissed should have <code>message-dismissable</code> class and a link with <code>close</code> class.

  .message.message-error.message-dismissable
    p This is an error that can be dismissed.
    a(class='close', title='Close') ×

  .message.message-alert.message-dismissable
    p This is an alert that can be dismissed.
    a(class='close', title='Close') ×

  .message.message-success.message-dismissable
    p This is a success message that can be dismissed.
    a(class='close', title='Close') ×

  :markdown
    ```html
      <div class='message message-error message-dismissable'>
        <p>This is an error that can be dismissed.</p>
        <a class='close' title='close'>×</a>
      </div>

      <div class='message message-alert message-dismissable'>
        <p>This is an alert that can be dismissed.</p>
        <a class='close' title='close'>×</a>
      </div>

      <div class='message message-success message-dismissable'>
        <p>This is a success message that can be dismissed.</p>
        <a class='close' title='close'>×</a>
      </div>
    ```

  h3 Full width messages
  p Add <code>message-full-width</code> class for message with centered text.

  .message.message-success.message-full-width.message-dismissable
    p This is a full width success message that can be dismissed.
    a(class='close', title='Close') ×

  :markdown
    ```html
      <div class='message message-success message-dismissable message-full-width'>
        <p>This is a full width success message that can be dismissed.</p>
        <a class='close' title='close'>×</a>
      </div>
    ```

  h3 Message positioning
  p Messages can be easily positioned using following classes: <code>message-below</code> and <code>message-above</code>&mdash;where these classes denotate position of the message relatively to the element.


  form(role='form')

    input(class='form-input', type='text', placeholder='Your Name')
    .message.message-below
      p This is a message appearing below an element.

    .message.message-success.message-above
      p This is a message appearing above an element.
    input(class='form-input', type='text', placeholder='Your Surname')

  :markdown
    ```html
      <div class='message message-below'>
        <p>This is a message appearing below an element.</p>
      </div>

      <div class='message message-success message-above'>
        <p>This is a message appearing above an element.</p>
      </div>
    ```