SemanSemantic-UItic-UI/server/partials/examples/message.html

<div class="ui message">
  <i class="close icon"></i>
  Closable message
</div>
<div class="ui warning icon message">
  <div class="content">
  <div class="header">Warning Message</div>
    <ul class="list">
      <li>List item</li>
      <li>List item</li>
    </ul>
  </div>
</div>
<div class="ui info message">
  <div class="header">Info Message</div>
  <p>Example description</p>
</div>
<div class="ui success message">
  <div class="content">
    <div class="header">Positive Message</div>
    <p>Example description</p>
  </div>
</div>
<div class="ui icon error message">
  <i class="attention circle icon"></i>
  <div class="content">
    <div class="header">Negative Message</div>
    <p>Example description</p>
  </div>
</div>
<div class="ui top attached message">
  Top attached
</div>
<div class="ui bottom attached message">
  Bottom attached
</div>

<script type="text/javascript">
$(document)
  .ready(function(){
    $('.example .message .close')
      .on('click', function() {
        $(this).closest('.message').transition('scale out');
      })
    ;

  })
;
</script>