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

title       : 'Comment'
description : 'A comment is used to display 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">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Types</a>
      <a class="item">Content</a>
      <a class="item">State</a>
      <a class="item">Variations</a>
    </div>
  </div>

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

  <div class="example">
    <h4 class="ui header">Comments</h4>
    <p>A basic list of comments</p>
    <h2 class="ui header">
      <i class="comment icon"></i> Comments
    </h2>
    <div class="ui 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">Today at 5:42PM</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 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">Yesterday at 12:30AM</span>
          </div>
          <div class="text">
            <p>This is against my beliefs, and the beliefs of other dogs like me. Dogs aren't cats and cats aren't dogs, the two should never be mistaken. I'm sure the creator of this post would mistake a cat for a dog.</p>
            <p>I however and dogs like me, would never want to listen to someone who sympathizes so much with cats. Who likes cats anyway.</p>
          </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">Just now</span>
              </div>
              <div class="text">
                +1 I agree with you.
              </div>
              <div class="actions">
                <a class="reply">Reply</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="comment">
        <a class="avatar">
          <img src="/images/demo/avatar3.jpg">
        </a>
        <div class="content">
          <a class="author">Roofus</a>
          <div class="metadata">
            <span class="date">5 days ago</span>
          </div>
          <div class="text">
            I like to bark. If you like to bark visit <a href="http://www.bark.com"> this website</a> for great resources on barking.
          </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/demo/avatar.jpg">
        </a>
        <div class="content">
          <a class="author">Dog Doggington</a>
          <div class="text">
            I think this is a great idea and i am voting on it
          </div>
        </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/demo/avatar.jpg">
        </a>
        <div class="content">
          <a class="author">Dog Doggington</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">
            I think this is a great idea and i am voting on it
          </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/demo/avatar.jpg">
        </a>
        <div class="content">
          <a class="author">Dog Doggington</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">
            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 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 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">
            <div class="date">2 days ago</div>
          </div>
          <div class="text">
            I think this is a great idea and i am voting on it
          </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 button teal submit labeled icon">
              <i class="icon edit"></i> Add Reply
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <p>A comment reply form can also exist below a comment feed to reply specifically to the original content.
    <div class="ui 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">
            <div class="date">2 days ago</div>
          </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 class="comment">
        <a class="avatar">
          <img src="/images/demo/avatar2.jpg">
        </a>
        <div class="content">
          <a class="author">Pawfin Dog</a>
          <div class="metadata">
            <div class="date">1 day ago</div>
          </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>
      <form class="ui reply form">
        <div class="field">
          <textarea></textarea>
        </div>
        <div class="ui button teal submit labeled icon">
          <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/demo/avatar.jpg">
        </a>
        <div class="content">
          <a class="author">Dog Doggington</a>
          <div class="metadata">
            <span class="date">2 days 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="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">
      <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">2 days 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/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 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">
                    Also pizza.
                  </div>
                  <div class="actions">
                    <a class="reply">Reply</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <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">2 days 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 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 hours 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 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">15 hours 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 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">
      <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">2 days 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/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 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">
                    Also pizza.
                  </div>
                  <div class="actions">
                    <a class="reply">Reply</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <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">2 days 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 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 hours 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 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">15 hours 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>