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

title       : 'Comment'
description : 'A comment view is used to display lists of user feedback to site content'
type        : 'UI View'
---

<%- @partial('header') %>
<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">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>

    <div class="ui two column grid">
      <div class="column">
        <div class="ui piled blue segment">
          <h2 class="ui header">
            <i class="icon inverted circular blue comment"></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">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>
                  <a class="delete">Delete</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">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>
                  <a class="delete">Delete</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">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>
                  <a class="delete">Delete</a>
                </div>
              </div>
            </div>
            <form class="ui reply form">
              <div class="field">
                <textarea></textarea>
              </div>
              <div class="ui fluid blue labeled submit icon button">
                <i class="icon edit"></i> Add Reply
              </div>
            </form>
          </div>
        </div>
      </div>
    </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="stars">
              <i class="icon star"></i>
              <i class="icon star"></i>
              <i class="icon star"></i>
              <i class="icon empty star"></i>
              <i class="icon empty star"></i>
            </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="stars">
              <i class="icon star"></i>
              <i class="icon star"></i>
              <i class="icon star"></i>
              <i class="icon empty star"></i>
              <i class="icon empty star"></i>
            </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>
            <a class="delete">Delete</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>
            <a class="delete">Delete</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>
            <a class="delete">Delete</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">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>
            <a class="delete">Delete</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>
                <a class="delete">Delete</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>
                    <a class="delete">Delete</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>
                    <a class="delete">Delete</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>
                <a class="delete">Delete</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>
            <a class="delete">Delete</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>
                <a class="delete">Delete</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>
                    <a class="delete">Delete</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>
                    <a class="delete">Delete</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>
                <a class="delete">Delete</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>