---
layout : 'default'
css    : 'text'

title  : 'Message'
type   : 'UI Collection'
---

<div class="segment">
  <div class="container">
    <h1>Message</h1>
    <p>Messages can alert a user to something they must immediately consider before proceeding on to the normal content of the page.</p>
  </div>
</div>
<div class="main container">
  
  <div class="peek">
    <div class="ui vertical pointing menu">
      <a class="active item">Standard</a>
      <a class="item">States</a>
      <a class="item">Variations</a>
      <a class="item">Groups</a>
    </div>
  </div>
  
  <h2>Standard</h2>
  
  <div class="example">
    <h4>Text Block</h4>
    <p>A basic text block</p>
    <div class="ui message">
      <div class="header">
        Welcome back!
      </div>
      <p>
        It's good to see you again. I have had a lot to think about since our last visit, I've changed much as a person and I can see that you have too.
      </p>
      <p>
        Perhaps we can talk about it if you have the time.
      </p>
    </div>
  </div>
  
  <div class="example">
    <h4>List Block</h4>
    <p>A text block 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>Dismissable Block</h4>
    <p>A text block that the user can choose to hide</p>
    <div class="ui message">
      <i class="icon close"></i>
      <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>
  

  <h2>States</h2>
  
  <h4>Hidden</h4>
  <p>Text Blocks can be hidden</p>
  <div class="ui hidden message">
    <p>You can't see me</p>
  </div>
  
  <div class="example">
    <h4>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>Variations</h2>
  
  <div class="example">
    <h4>Icon Block</h4>
    <p>A text block can contain an icon.</p>
    <div class="ui icon message">
      <i class="icon cloud"></i>
      <div class="content">
        <div class="header">
          Have you heard about our mailing list?
        </div>
        Get all the best inventions in your e-mail every day. Sign up now!
      </div>
    </div>
  </div>
  
  <div class="example">
    <h4>Compact Block</h4>
    <p>A text block that only takes up the width of its content.</p>
    <div class="ui compact message">
      Get all the best inventions in your e-mail every day. Sign up now!
    </div>
  </div>
  
  <div class="example">
    <h4>Attached Block</h4>
    <p>A text block can be formatted to attach itself to content</p>
    <div class="ui attached message">
      <div class="header">
        Have you heard about our mailing list?
      </div>
      Get all the best inventions in your e-mail every day. Sign up now!
    </div>
    <form class="ui form attached fluid segment">
      <p>Let's go ahead and get you signed up.</p>
      <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"></label>
        </div>
        <label>I agree to the terms and conditions</label>
      </div>
      <div class="ui blue submit button">Submit</div>
    </form>
    <div class="ui bottom attached info message">
      <div class="header">
        <i class="icon help"></i>Are you sure you know what you're doing?
      </div>
    </div>
  </div>
  <div class="example">
    <h4>Colored Block</h4>
    <p>A text block can be formatted to be different colors</p>
    
  </div>
  
  
  <div class="example">
    <h4>Warning Block</h4>
    <p>A text block may be formatted to display warning messages.</p>
    <div class="ui warning message">
      <i class="icon close"></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>Info Block</h4>
    <p>A text block may be formatted to display information.</p>
    <div class="ui info message">
      <i class="icon close"></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>Success Block</h4>
    <p>A text block may be formatted to display a success message.</p>
    <div class="ui success message">
      <i class="icon close"></i>
      <div class="header">
        Congratulations, you are now a member!
      </div>
    </div>
  </div>
  
  <div class="example">
    <h4>Error Block</h4>
    <p>A text block may be formatted to display errors.</p>
    <div class="ui error message">
      <i class="icon close"></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>
  
</div>
</body>

</html>