Comments
Comments component
Markup: ..\..\styleguide\templates\organisms\comments.html
<div id="comments" class="rocksite-o-comments">
<h3 class="rocksite-o-comments__header">
19 comments </h3>
<ol class="comment-list rocksite-o-comments__list">
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-60">
<article id="comment-60" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://1.gravatar.com/avatar/75e48a7020624657e5da6033590030ee?s=44&d=mm&r=g" srcset="http://1.gravatar.com/avatar/75e48a7020624657e5da6033590030ee?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author">Anonymous User </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-60"><time datetime="2013-03-11T23:45:54+00:00">March 11, 2013 at 11:45 pm</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=60">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>This user it trying to be anonymous.</p>
<p> They used a fake email, so there should be no <a href="https://gravatar.com//" title="Gravatar" rel="nofollow">Gravatar</a> associated with it.<br>
They did not speify a website, so there should be no link to it in the comment.</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
<a rel="nofollow" class="comment-reply-link rocksite-a-button -primary -small" href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/?replytocom=60#respond" onclick="return addComment.moveForm( "comment-60", "60", "respond", "1148" )" aria-label="Reply to Anonymous User">Reply</a> </div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-61">
<article id="comment-61" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">Jane Doe</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-61"><time datetime="2013-03-12T13:17:35+00:00">March 12, 2013 at 1:17 pm</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=61">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Comments? I love comments!</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
<a rel="nofollow" class="comment-reply-link rocksite-a-button -primary -small" href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/?replytocom=61#respond" onclick="return addComment.moveForm( "comment-61", "61", "respond", "1148" )" aria-label="Reply to Jane Doe">Reply</a> </div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-62">
<article id="comment-62" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org" rel="external nofollow" class="url">John Doe</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-62"><time datetime="2013-03-14T07:53:26+00:00">March 14, 2013 at 7:53 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=62">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>These tests are amazing!</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
<a rel="nofollow" class="comment-reply-link rocksite-a-button -primary -small" href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/?replytocom=62#respond" onclick="return addComment.moveForm( "comment-62", "62", "respond", "1148" )" aria-label="Reply to John Doe">Reply</a> </div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-even depth-1" id="li-comment-63">
<article id="comment-63" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://1.gravatar.com/avatar/4fdb3b572ac7dd8d7a58ba70317efa14?s=44&d=mm&r=g" srcset="http://1.gravatar.com/avatar/4fdb3b572ac7dd8d7a58ba70317efa14?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="https://wpthemetestdata.wordpress.com/" rel="external nofollow" class="url">themedemos</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-63"><time datetime="2013-03-14T07:56:46+00:00">March 14, 2013 at 7:56 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=63">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Author Comment.</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
<a rel="nofollow" class="comment-reply-link rocksite-a-button -primary -small" href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/?replytocom=63#respond" onclick="return addComment.moveForm( "comment-63", "63", "respond", "1148" )" aria-label="Reply to themedemos">Reply</a> </div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-64">
<article id="comment-64" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">John Doe</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-64"><time datetime="2013-03-14T07:57:01+00:00">March 14, 2013 at 7:57 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=64">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Comment Depth 01</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
<a rel="nofollow" class="comment-reply-link rocksite-a-button -primary -small" href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/?replytocom=64#respond" onclick="return addComment.moveForm( "comment-64", "64", "respond", "1148" )" aria-label="Reply to John Doe">Reply</a> </div>
<!-- .reply -->
</article>
<!-- #comment-## -->
<ol class="children">
<li class="comment even depth-2" id="li-comment-65">
<article id="comment-65" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">Jane Bloggs</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-65"><time datetime="2013-03-14T08:01:21+00:00">March 14, 2013 at 8:01 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=65">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Comment Depth 02</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
<a rel="nofollow" class="comment-reply-link rocksite-a-button -primary -small" href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/?replytocom=65#respond" onclick="return addComment.moveForm( "comment-65", "65", "respond", "1148" )" aria-label="Reply to Jane Bloggs">Reply</a> </div>
<!-- .reply -->
</article>
<!-- #comment-## -->
<ol class="children">
<li class="comment odd alt depth-3" id="li-comment-66">
<article id="comment-66" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">Fred Bloggs</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-66"><time datetime="2013-03-14T08:02:06+00:00">March 14, 2013 at 8:02 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=66">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Comment Depth 03</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
<a rel="nofollow" class="comment-reply-link rocksite-a-button -primary -small" href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/?replytocom=66#respond" onclick="return addComment.moveForm( "comment-66", "66", "respond", "1148" )" aria-label="Reply to Fred Bloggs">Reply</a> </div>
<!-- .reply -->
</article>
<!-- #comment-## -->
<ol class="children">
<li class="comment even depth-4" id="li-comment-67">
<article id="comment-67" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">Fred Bloggs</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-67"><time datetime="2013-03-14T08:03:22+00:00">March 14, 2013 at 8:03 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=67">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Comment Depth 04</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
<a rel="nofollow" class="comment-reply-link rocksite-a-button -primary -small" href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/?replytocom=67#respond" onclick="return addComment.moveForm( "comment-67", "67", "respond", "1148" )" aria-label="Reply to Fred Bloggs">Reply</a> </div>
<!-- .reply -->
</article>
<!-- #comment-## -->
<ol class="children">
<li class="comment odd alt depth-5" id="li-comment-68">
<article id="comment-68" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://1.gravatar.com/avatar/4fdb3b572ac7dd8d7a58ba70317efa14?s=44&d=mm&r=g" srcset="http://1.gravatar.com/avatar/4fdb3b572ac7dd8d7a58ba70317efa14?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="https://wpthemetestdata.wordpress.com/" rel="external nofollow" class="url">themedemos</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-68"><time datetime="2013-03-14T08:10:29+00:00">March 14, 2013 at 8:10 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=68">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Comment Depth 05</p>
<p>Also an author comment.</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
</div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even depth-5" id="li-comment-69">
<article id="comment-69" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">Jane Bloggs</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-69"><time datetime="2013-03-14T08:12:16+00:00">March 14, 2013 at 8:12 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=69">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Comment Depth 06 has some more text than some of the other comments on this post.</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
</div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt depth-5" id="li-comment-70">
<article id="comment-70" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">Joe Bloggs</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-70"><time datetime="2013-03-14T08:12:58+00:00">March 14, 2013 at 8:12 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=70">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Comment Depth 07 has a little bit.</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
</div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even depth-5" id="li-comment-71">
<article id="comment-71" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">Jane Bloggs</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-71"><time datetime="2013-03-14T08:13:42+00:00">March 14, 2013 at 8:13 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=71">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Comment Depth 08</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
</div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt depth-5" id="li-comment-72">
<article id="comment-72" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">Joe Bloggs</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-72"><time datetime="2013-03-14T08:14:13+00:00">March 14, 2013 at 8:14 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=72">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Comment Depth 09 is way nested, but there are a lot of sites with very nested comments.</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
</div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even depth-5" id="li-comment-73">
<article id="comment-73" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://1.gravatar.com/avatar/4fdb3b572ac7dd8d7a58ba70317efa14?s=44&d=mm&r=g" srcset="http://1.gravatar.com/avatar/4fdb3b572ac7dd8d7a58ba70317efa14?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="https://wpthemetestdata.wordpress.com/" rel="external nofollow" class="url">themedemos</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-73"><time datetime="2013-03-14T08:14:47+00:00">March 14, 2013 at 8:14 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=73">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Comment Depth 10</p>
<p>Also an author comment.</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
</div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-74">
<article id="comment-74" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">Jane Doe</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-74"><time datetime="2013-03-14T09:56:43+00:00">March 14, 2013 at 9:56 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=74">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Image comment.<br>
<img src="https://wpthemetestdata.files.wordpress.com/2008/06/dsc20050102_192118_51.jpg?w=171&h=128" alt="Albany wind-farm against the sunset, Western Australia"><br>
If the image imports…</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
<a rel="nofollow" class="comment-reply-link rocksite-a-button -primary -small" href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/?replytocom=74#respond" onclick="return addComment.moveForm( "comment-74", "74", "respond", "1148" )" aria-label="Reply to Jane Doe">Reply</a> </div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-75">
<article id="comment-75" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">John Doe</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-75"><time datetime="2013-03-14T11:23:24+00:00">March 14, 2013 at 11:23 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=75">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>We are totally going to blog about these tests!</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
<a rel="nofollow" class="comment-reply-link rocksite-a-button -primary -small" href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/?replytocom=75#respond" onclick="return addComment.moveForm( "comment-75", "75", "respond", "1148" )" aria-label="Reply to John Doe">Reply</a> </div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment odd alt thread-even depth-1" id="li-comment-76">
<article id="comment-76" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">John Doe</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-76"><time datetime="2013-03-14T11:27:54+00:00">March 14, 2013 at 11:27 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=76">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>We use these tests all the time! Killer stuff!</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
<a rel="nofollow" class="comment-reply-link rocksite-a-button -primary -small" href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/?replytocom=76#respond" onclick="return addComment.moveForm( "comment-76", "76", "respond", "1148" )" aria-label="Reply to John Doe">Reply</a> </div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-77">
<article id="comment-77" class="rocksite-o-comments__content">
<header class="rocksite-o-comments__content__header">
<div class="rocksite-o-comments__content__header__avatar">
<img alt="" src="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=44&d=mm&r=g" srcset="http://0.gravatar.com/avatar/f72c502e0d657f363b5f2dc79dd8ceea?s=88&d=mm&r=g 2x" class="avatar avatar-44 photo" height="44" width="44"> </div>
<cite class="rocksite-o-comments__content__header__author"><a href="http://example.org/" rel="external nofollow" class="url">Jane Doe</a> </cite><div class="rocksite-o-comments__content__header__date"><a href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/#comment-77"><time datetime="2013-03-14T11:30:33+00:00">March 14, 2013 at 11:30 am</time></a></div> <div class="rocksite-o-comments__content__edit"><a class="comment-edit-link" href="//127.0.0.1:3000/wordpress4.8/wp-admin/comment.php?action=editcomment&c=77">Edit</a></div> </header>
<!-- .comment-meta -->
<section class="comment-content comment">
<p>Thanks for all the comments, everyone!</p>
</section>
<!-- .comment-content -->
<div class="reply rocksite-o-comments__content__replay">
<a rel="nofollow" class="comment-reply-link rocksite-a-button -primary -small" href="//127.0.0.1:3000/wordpress4.8/2012/01/03/template-comments/?replytocom=77#respond" onclick="return addComment.moveForm( "comment-77", "77", "respond", "1148" )" aria-label="Reply to Jane Doe">Reply</a> </div>
<!-- .reply -->
</article>
<!-- #comment-## -->
</li><!-- #comment-## -->
</ol><!-- .comment-list -->
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/wordpress4.8/2012/01/03/template-comments/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="//127.0.0.1:3000/wordpress4.8/wp-comments-post.php" method="post" id="commentform" class="rocksite-o-comment-respond">
<p class="logged-in-as"><a href="//127.0.0.1:3000/wordpress4.8/wp-admin/profile.php" aria-label="Logged in as admin. Edit your profile.">Logged in as admin</a>. <a href="//127.0.0.1:3000/wordpress4.8/wp-login.php?action=logout&redirect_to=http%3A%2F%2F127.0.0.1%2Fwordpress4.8%2F2012%2F01%2F03%2Ftemplate-comments%2F&_wpnonce=bfd0162cdc">Log out?</a></p><p class="comment-form-comment"><label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="btn btn-primary" value="Post Comment"> <input type="hidden" name="comment_post_ID" value="1148" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p><input type="hidden" id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment" value="13777c0f0a"><script>(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();</script>
</form>
</div><!-- #respond -->
</div>
../source/scss/components/organisms/_comments.scss
, line 1
This user it trying to be anonymous.
They used a fake email, so there should be no Gravatar associated with it.
They did not speify a website, so there should be no link to it in the comment.
Comments? I love comments!
These tests are amazing!
Author Comment.
Comment Depth 01
Comment Depth 02
Comment Depth 03
Comment Depth 04
Comment Depth 05
Also an author comment.
Comment Depth 06 has some more text than some of the other comments on this post.
Comment Depth 07 has a little bit.
Comment Depth 08
Comment Depth 09 is way nested, but there are a lot of sites with very nested comments.
Comment Depth 10
Also an author comment.
Image comment.

If the image imports…
We are totally going to blog about these tests!
We use these tests all the time! Killer stuff!
Thanks for all the comments, everyone!