---
layout      : 'default'
css         : 'comment'

title       : 'Comment'
description : 'A comment displays user feedback to site content'
type        : 'UI View'

element     : 'comment'
elementType : 'view'

themes      : ['Default', 'Chubby']
---

<%- @partial('header') %>
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/comment.less" />

<div class="main container">

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

  <div class="example">
    <h4 class="ui header">Comments</h4>
    <p>A basic list of comments</p>
    <div class="ui ignored info attached message">
      <p>These examples uses <a href="/elements/segment.html">ui segment</a> to create content segments. This is not required.</p>
    </div>
    <div class="ui ignored bottom attached warning message">
      <p><b>UI Views</b> provide structured layouts, but do not hook up site specific code. You will need to add your own javascript behaviors to hide and show the appropriate forms. For example, having a reply button open a reply form<p>
    </div>
    <div class="ui comments">
      <h3 class="ui dividing header">Comments</h3>
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/matt.jpg">
        </a>
        <div class="content">
          <a class="author">Matt</a>
          <div class="metadata">
            <span class="date">Today at 5:42PM</span>
          </div>
          <div class="text">
            How artistic!
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
      </div>
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/elliot.jpg">
        </a>
        <div class="content">
          <a class="author">Elliot Fu</a>
          <div class="metadata">
            <span class="date">Yesterday at 12:30AM</span>
          </div>
          <div class="text">
            <p>This has been very useful for my research. Thanks as well!</p>
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
        <div class="comments">
          <div class="comment">
            <a class="avatar">
              <img src="/images/avatar/small/jenny.jpg">
            </a>
            <div class="content">
              <a class="author">Jenny Hess</a>
              <div class="metadata">
                <span class="date">Just now</span>
              </div>
              <div class="text">
                Elliot you are always so right :)
              </div>
              <div class="actions">
                <a class="reply">Reply</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/joe.jpg">
        </a>
        <div class="content">
          <a class="author">Joe Henderson</a>
          <div class="metadata">
            <span class="date">5 days ago</span>
          </div>
          <div class="text">
            Dude, this is awesome. Thanks so much
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
      </div>
      <form class="ui reply form">
        <div class="field">
          <textarea></textarea>
        </div>
        <div class="ui blue labeled submit icon button">
          <i class="icon edit"></i> Add Reply
        </div>
      </form>
    </div>
  </div>
  <h2 class="ui dividing header">Content</h2>

  <h3 class="ui header">Comment</h3>

  <div class="example">
    <h4 class="ui header">Avatar</h4>
    <p>A comment can contain an image or avatar</p>
    <div class="ui comments">
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/elliot.jpg">
        </a>
        <div class="content">
          <a class="author">Elliot Fu</a>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Metadata</h4>
    <p>A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.</p>
    <div class="ui comments">
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/stevie.jpg">
        </a>
        <div class="content">
          <a class="author">Stevie Feliciano</a>
          <div class="metadata">
            <div class="date">2 days ago</div>
            <div class="rating">
              <i class="star icon"></i>
              5 Faves
            </div>
          </div>
          <div class="text">
            Hey guys, I hope this example comment is helping you read this documentation.
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Actions</h4>
    <p>A comment can contain an list of actions a user may perform related to this comment.</p>
    <div class="ui comments">
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/joe.jpg">
        </a>
        <div class="content">
          <a class="author">Tom Lukic</a>
          <div class="text">
            This will be great for business reports. I will definitely download this.
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
            <a class="save">Save</a>
            <a class="hide">Hide</a>
            <a>
              <i class="expand icon"></i>
              Full-screen
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Reply Form</h4>
    <p>A comment can contain a form to reply to a comment. This may have arbitrary content.</p>
    <div class="ui info message">
      <p>If a comment form is located inside a <code> ui comment</code> it will be formatted as an nested reply form. If the comment form is included after all comments, it will be formatted as a normal reply form.</p>
    </div>
    <div class="ui comments">
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/steve.jpg">
        </a>
        <div class="content">
          <a class="author">Steve Jobes</a>
          <div class="metadata">
            <div class="date">2 days ago</div>
          </div>
          <div class="text">
            Revolutionary!
          </div>
          <div class="actions">
            <a class="reply active">Reply</a>
          </div>
          <form class="ui reply form">
            <div class="field">
              <textarea></textarea>
            </div>
            <div class="ui primary submit labeled icon button">
              <i class="icon edit"></i> Add Reply
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui comments">
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/joe.jpg">
        </a>
        <div class="content">
          <a class="author">Joe Henderson</a>
          <div class="metadata">
            <div class="date">1 day ago</div>
          </div>
          <div class="text">
            <p>The hours, minutes and seconds stand as visible reminders that your effort put them all there. </p>
            <p>Preserve until your next run, when the watch lets you see how Impermanent your efforts are.</p>
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
      </div>
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/christian.jpg">
        </a>
        <div class="content">
          <a class="author">Christian Rocha</a>
          <div class="metadata">
            <div class="date">2 days ago</div>
          </div>
          <div class="text">
            I re-tweeted this.
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
      </div>
      <form class="ui reply form">
        <div class="field">
          <textarea></textarea>
        </div>
        <div class="ui primary submit labeled icon button">
          <i class="icon edit"></i> Add Comment
        </div>
      </form>
    </div>
  </div>

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

  <div class="example">
    <h4 class="ui header">Collapsed</h4>
    <p>Comments can be collapsed, or hidden from view</p>
    <div class="ui comments">
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/christian.jpg">
        </a>
        <div class="content">
          <a class="author">Christian Rocha</a>
          <div class="metadata">
            <span class="date">2 days ago</span>
          </div>
          <div class="text">
            I'm very interested in this motherboard. Do you know if it'd work in a Intel LGA775 CPU socket?
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
        <div class="collapsed comments">
          <div class="comment">
            <a class="avatar">
              <img src="/images/demo/avatar2.jpg">
            </a>
            <div class="content">
              <a class="author">Pawfin Dog</a>
              <div class="metadata">
                <span class="date">1 day ago</span>
              </div>
              <div class="text">
                I think this is a great idea and i am voting on it
              </div>
              <div class="actions">
                <a class="reply">Reply</a>
              </div>
            </div>
            <div class="comments">
              <div class="comment">
                <a class="avatar">
                  <img src="/images/demo/avatar.jpg">
                </a>
                <div class="content">
                  <a class="author">Dog Doggington</a>
                  <div class="metadata">
                    <span class="date">20 minutes ago</span>
                  </div>
                  <div class="text">
                    I think this is a great idea and i am voting on it
                  </div>
                  <div class="actions">
                    <a class="reply">Reply</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


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

  <div class="example">
    <h4 class="ui header">Threaded</h4>
    <p>A comment list can be threaded to showing the relationship between conversations</p>
    <div class="ui threaded comments">
      <h3 class="ui dividing header">Comments</h3>
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/matt.jpg">
        </a>
        <div class="content">
          <a class="author">Matt</a>
          <div class="metadata">
            <span class="date">Today at 5:42PM</span>
          </div>
          <div class="text">
            How artistic!
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
      </div>
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/elliot.jpg">
        </a>
        <div class="content">
          <a class="author">Elliot Fu</a>
          <div class="metadata">
            <span class="date">Yesterday at 12:30AM</span>
          </div>
          <div class="text">
            <p>This has been very useful for my research. Thanks as well!</p>
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
        <div class="comments">
          <div class="comment">
            <a class="avatar">
              <img src="/images/avatar/small/jenny.jpg">
            </a>
            <div class="content">
              <a class="author">Jenny Hess</a>
              <div class="metadata">
                <span class="date">Just now</span>
              </div>
              <div class="text">
                Elliot you are always so right :)
              </div>
              <div class="actions">
                <a class="reply">Reply</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/joe.jpg">
        </a>
        <div class="content">
          <a class="author">Joe Henderson</a>
          <div class="metadata">
            <span class="date">5 days ago</span>
          </div>
          <div class="text">
            Dude, this is awesome. Thanks so much
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
      </div>
      <form class="ui reply form">
        <div class="field">
          <textarea></textarea>
        </div>
        <div class="ui blue labeled submit icon button">
          <i class="icon edit"></i> Add Reply
        </div>
      </form>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Minimal</h4>
    <p>Comments can hide extra information unless a user shows intent to interact with a comment.</p>
    <div class="ui minimal comments">
      <h3 class="ui dividing header">Comments</h3>
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/matt.jpg">
        </a>
        <div class="content">
          <a class="author">Matt</a>
          <div class="metadata">
            <span class="date">Today at 5:42PM</span>
          </div>
          <div class="text">
            How artistic!
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
      </div>
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/elliot.jpg">
        </a>
        <div class="content">
          <a class="author">Elliot Fu</a>
          <div class="metadata">
            <span class="date">Yesterday at 12:30AM</span>
          </div>
          <div class="text">
            <p>This has been very useful for my research. Thanks as well!</p>
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
        <div class="comments">
          <div class="comment">
            <a class="avatar">
              <img src="/images/avatar/small/jenny.jpg">
            </a>
            <div class="content">
              <a class="author">Jenny Hess</a>
              <div class="metadata">
                <span class="date">Just now</span>
              </div>
              <div class="text">
                Elliot you are always so right :)
              </div>
              <div class="actions">
                <a class="reply">Reply</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="comment">
        <a class="avatar">
          <img src="/images/avatar/small/joe.jpg">
        </a>
        <div class="content">
          <a class="author">Joe Henderson</a>
          <div class="metadata">
            <span class="date">5 days ago</span>
          </div>
          <div class="text">
            Dude, this is awesome. Thanks so much
          </div>
          <div class="actions">
            <a class="reply">Reply</a>
          </div>
        </div>
      </div>
      <form class="ui reply form">
        <div class="field">
          <textarea></textarea>
        </div>
        <div class="ui blue labeled submit icon button">
          <i class="icon edit"></i> Add Reply
        </div>
      </form>
    </div>
  </div>


</div>