---
layout      : 'default'
css         : 'message'

element     : 'message'
elementType : 'collection'

title       : 'Message'
description : 'A message displays information that explains nearby content'
type        : 'UI Collection'

themes      : ['Default', 'GitHub', 'Google']
---
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/message.less" />
<%- @partial('header') %>

<div class="main container">

  <h2 class="ui dividing header">Types</h2>

  <div class="example">
    <h4 class="ui header">Message</h4>
    <p>A basic message</p>
    <div class="ui message">
      <div class="header">
        Changes in Service
      </div>
      <p>We just updated our privacy policy here to better service our customers. We recommend reviewing the changes.</p>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">List Message</h4>
    <p>A message with a list</p>
    <div class="ui message">
      <div class="header">
        Welcome back!
      </div>
      <ul class="list">
        <li>It's good to see you again.</li>
        <li>Did you know it's been a while?</li>
      </ul>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Icon Message</h4>
    <p>A message can contain an icon.</p>
    <div class="ui icon message">
      <i class="inbox icon"></i>
      <div class="content">
        <div class="header">
          Have you heard about our mailing list?
        </div>
        <p>Get all the best inventions in your e-mail every day. Sign up now!</p>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui icon message">
      <i class="circular notched circle loading icon"></i>
      <div class="content">
        <div class="header">
          Just one second
        </div>
        <p>We're fetching that content for you.</p>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Dismissable Block</h4>
    <p>A message that the user can choose to hide</p>
    <div class="ui message">
      <i class="close icon"></i>
      <div class="header">
        Welcome back!
      </div>
      <p>This is a special notification which you can dismiss if you're bored with it.</p>
    </div>
    <div class="warning ui message">
      <p>Dismissable blocks do not automatically close when using the close icon, this behavior must be defined using javascript, for example:</p>
      <div class="code">
      $('.message .close').on('click', function() {
        $(this).closest('.message').fadeOut();
      });
      </div>
    </div>
  </div>


  <h2 class="ui dividing header">States</h2>

  <div class="example">
    <h4 class="ui header">Hidden</h4>
    <p>Text Blocks can be hidden</p>
    <div class="existing code">
      <div class="ui hidden message">
        <p>You can't see me</p>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Visible</h4>
    <p>Text Blocks can be set to visible if they need to force themselves to be shown.</p>
    <div class="ui visible message">
      <p>You can always see me</p>
    </div>
  </div>

  <h2 class="ui dividing header">Variations</h2>

  <div class="example">
    <h4 class="ui header">Floating</h4>
    <p>A message can float above content that it is related to</p>
    <div class="ui floating message">
      <p>Way to go!</p>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Compact</h4>
    <p>A message can only take up the width of its content.</p>
    <div class="ui compact message">
      <p>Get all the best inventions in your e-mail every day. Sign up now!</p>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Attached</h4>
    <p>A message can be formatted to attach itself to other content</p>
    <div class="ui attached message">
      <div class="header">
        Welcome to our site!
      </div>
      <p>Fill out the form below to sign-up for a new account</p>
    </div>
    <form class="ui form attached fluid segment">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="field">
        <label>Username</label>
        <input placeholder="Username" type="text">
      </div>
      <div class="field">
        <label>Password</label>
        <input type="password">
      </div>
      <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" id="terms" />
          <label for="terms">I agree to the terms and conditions</label>
        </div>
      </div>
      <div class="ui blue submit button">Submit</div>
    </form>
    <div class="ui bottom attached warning message">
      <i class="icon help"></i>
      Already signed up? <a href="#">Login here</a> instead.
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Warning</h4>
    <p>A message may be formatted to display warning messages.</p>
    <div class="ui warning message">
      <i class="close icon"></i>
      <div class="header">
        You must register before you can do that!
      </div>
      Visit our registration page, then try again
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Info</h4>
    <p>A message may be formatted to display information.</p>
    <div class="ui info message">
      <i class="close icon"></i>
      <div class="header">
        Was this what you wanted?
      </div>
      <ul class="list">
        <li>It's good to see you again.</li>
        <li>Did you know it's been a while?</li>
      </ul>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Positive / Success</h4>
    <p>A message may be formatted to display a positive message.</p>
    <b class="ignored">
      <i class="attention icon"></i>
      Positive/Success and Negative/Error messages by default use similar colors, but each has their own color  variables that can be distinguished in your theme.
    </b>
    <div class="ui positive message">
      <i class="close icon"></i>
      <div class="header">
        You are eligible for a reward
      </div>
      <p>Go to your <b>special offers</b> page to see now.</p>
    </div>
  </div>
  <div class="another example">
    <div class="ui success message">
      <i class="close icon"></i>
      <div class="header">
        Your user registration was successful.
      </div>
      <p>You may now log-in with the username you have chosen</p>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Negative / Error </h4>
    <p>A message may be formatted to display a negative message.</p>
    <div class="ui negative message">
      <i class="close icon"></i>
      <div class="header">
        We're sorry we can't apply that discount
      </div>
      <p>That offer has expired
    </div>
  </div>
  <div class="another example">
    <div class="ui error message">
      <i class="close icon"></i>
      <div class="header">
        There was some errors with your submission
      </div>
      <ul class="list">
        <li>You must include both a upper and lower case letters in your password.</li>
        <li>You need to select your home country.</li>
      </ul>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Colored</h4>
    <p>A message can be formatted to be different colors</p>
      <div class="ui black message">Black</div>
      <div class="ui yellow message">Yellow</div>
      <div class="ui green message">Green</div>
      <div class="ui blue message">Blue</div>
      <div class="ui orange message">Orange</div>
      <div class="ui purple message">Purple</div>
      <div class="ui pink message">Pink</div>
      <div class="ui red message">Red</div>
      <div class="ui teal message">Teal</div>
  </div>


  <div class="example">
    <h4 class="ui header">Sizes</h4>
    <p>A message can have different sizes</p>
    <div class="ui small message">
      This is a very small message.
    </div>
    <div class="ui large message">
      This is large
    </div>
    <div class="ui huge message">
      This is huge
    </div>
    <div class="ui massive message">
      This is massive
    </div>
  </div>

</div>