lindo
Component with custom comments markup.
The code to generate the component is this:
<div class="comments col-12 col-lg-8" id="comments">
<h3 class="section-title"><span>Comments</span></h3>
<!-- comment -->
<div class="comment mb-2 row">
<div class="comment-avatar col-md-1 col-sm-2 text-center pr-1">
<a href=""><img class="mx-auto rounded-circle img-fluid" src="http://placehold.it/128x128" alt="avatar"></a>
</div>
<div class="comment-content col-md-11 col-sm-10">
<h6 class="small comment-meta"><a href="#">admin</a> Today, 2:38</h6>
<div class="comment-body">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <a href>http://wwwwww.com</a> tempoua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. <br>
<a href="" class="text-right small"><i class="ion-reply"></i> Reply</a>
</p>
</div>
</div>
<!-- reply is indented -->
<div class="comment-reply col-md-11 offset-md-1 col-sm-10 offset-sm-2">
<div class="row">
<div class="comment-avatar col-md-1 col-sm-2 text-center pr-1">
<a href=""><img class="mx-auto rounded-circle img-fluid" src="http://placehold.it/128x128" alt="avatar"></a>
</div>
<div class="comment-content col-md-11 col-sm-10 col-12">
<h6 class="small comment-meta"><a href="#">phildownney</a> Today, 12:31</h6>
<div class="comment-body">
<p>Really?? Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat. <br>
<a href="" class="text-right small"><i class="ion-reply"></i> Reply</a>
</p>
</div>
</div>
<!-- reply is indented -->
<div class="comment-reply col-md-11 offset-md-1 col-sm-10 offset-sm-2">
<div class="row">
<div class="comment-avatar col-md-1 col-sm-2 text-center pr-1">
<a href=""><img class="mx-auto rounded-circle img-fluid" src="http://placehold.it/128x128" alt="avatar"></a>
</div>
<div class="comment-content col-md-11 col-sm-10 col-12">
<h6 class="small comment-meta"><a href="#">phildownney</a> Today, 12:31</h6>
<div class="comment-body">
<p>Really?? Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat. <br>
<a href="" class="text-right small"><i class="ion-reply"></i> Reply</a>
</p>
</div>
</div>
</div>
</div>
<!-- /reply is indented -->
</div>
</div>
<!-- /reply is indented -->
</div>
<!-- /comment -->
<!-- comment -->
<div class="comment mb-2 row">
<div class="comment-avatar col-md-1 col-sm-2 text-center pr-1">
<a href=""><img class="mx-auto rounded-circle img-fluid" src="http://placehold.it/128x128" alt="avatar"></a>
</div>
<div class="comment-content col-md-11 col-sm-10">
<h6 class="small comment-meta"><a href="#">maslarino</a> Yesterday, 5:03 PM</h6>
<div class="comment-body">
<p>Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. <br>
<a href="" class="text-right small"><i class="ion-reply"></i> Reply</a>
</p>
</div>
</div>
</div>
<!-- /comment -->
<form class="mb-5">
<h3 class="section-title"><span>Leave a Reply</span></h3>
<div class="form-group">
<textarea class="form-control" id="comment" placeholder="Comment: *" required="required" rows="6"></textarea>
</div>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="Name: *" required="required">
</div>
<div class="col">
<input type="email" class="form-control" id="email" placeholder="Email: *" required="required">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Website:">
</div>
</div>
<div class="row pt-2">
<div class="col-12">
<button type="submit" class="btn btn-sm btn-primary">Add a Comment</button>
</div>
</div>
</form>
</div>
lindo
Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
que maravilha
Really?? Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
Really?? Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
The code to generate the component is this:
<ul class="wp-coments-list">
<li id="comment-2" class="comment byuser comment-author-rafael bypostauthor even thread-even depth-1 parent">
<article id="div-comment-2" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt="" src="http://0.gravatar.com/avatar/00d7c4866e85853e15afb170e0bbb072?s=32&d=mm&r=g" srcset="http://0.gravatar.com/avatar/00d7c4866e85853e15afb170e0bbb072?s=64&d=mm&r=g 2x" class="avatar avatar-32 photo" height="32" width="32">
<b class="fn"><a href="#" rel="external nofollow ugc" class="url">rafael</a></b>
<span class="says">disse:</span>
</div><!-- .comment-author -->
<div class="comment-metadata">
<a href="#">
<time datetime="2020-08-26T21:51:50-03:00">26 de agosto de 2020 às 21:51</time>
</a>
<span class="edit-link"><a class="comment-edit-link" href="#/wp-admin/comment.html?action=editcomment&c=2">Editar</a></span>
</div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>lindo</p>
</div><!-- .comment-content -->
<div class="reply">
<a rel="nofollow" class="comment-reply-link" href="#/pagina-exemplo/?replytocom=2#respond" data-commentid="2" data-postid="2" data-belowelement="div-comment-2" data-respondelement="respond" aria-label="Responder para rafael">Responder</a>
</div>
</article><!-- .comment-body -->
<ol class="children">
<li id="comment-4" class="comment byuser comment-author-rafael bypostauthor odd alt depth-2">
<article id="div-comment-4" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt="" src="http://0.gravatar.com/avatar/00d7c4866e85853e15afb170e0bbb072?s=32&d=mm&r=g" srcset="http://0.gravatar.com/avatar/00d7c4866e85853e15afb170e0bbb072?s=64&d=mm&r=g 2x" class="avatar avatar-32 photo" height="32" width="32">
<b class="fn"><a href="#" rel="external nofollow ugc" class="url">rafael</a></b>
<span class="says">disse:</span>
</div><!-- .comment-author -->
<div class="comment-metadata">
<a href="#/pagina-exemplo/#comment-4">
<time datetime="2020-08-27T00:17:53-03:00">
27 de agosto de 2020 às 00:17
</time>
</a>
<span class="edit-link">
<a class="comment-edit-link" href="#/wp-admin/comment.html?action=editcomment&c=4">Editar</a></span>
</div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</div><!-- .comment-content -->
<div class="reply">
<a rel="nofollow" class="comment-reply-link" href="#/pagina-exemplo/?replytocom=4#respond" data-commentid="4" data-postid="2" data-belowelement="div-comment-4" data-respondelement="respond" aria-label="Responder para rafael">Responder</a>
</div>
</article><!-- .comment-body -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
<li id="comment-3" class="comment byuser comment-author-rafael bypostauthor even thread-odd thread-alt depth-1 parent">
<article id="div-comment-3" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt="" src="http://0.gravatar.com/avatar/00d7c4866e85853e15afb170e0bbb072?s=32&d=mm&r=g" srcset="http://0.gravatar.com/avatar/00d7c4866e85853e15afb170e0bbb072?s=64&d=mm&r=g 2x" class="avatar avatar-32 photo" height="32" width="32">
<b class="fn"><a href="#" rel="external nofollow ugc" class="url">Rafael</a></b>
<span class="says">disse:</span>
</div><!-- .comment-author -->
<div class="comment-metadata">
<a href="#/pagina-exemplo/#comment-3">
<time datetime="2020-08-26T21:52:02-03:00">
26 de agosto de 2020 às 21:52
</time>
</a>
<span class="edit-link">
<a class="comment-edit-link" href="#/wp-admin/comment.html?action=editcomment&c=3">Editar</a>
</span>
</div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>que maravilha</p>
</div><!-- .comment-content -->
<div class="reply">
<a rel="nofollow" class="comment-reply-link" href="#/pagina-exemplo/?replytocom=3#respond" data-commentid="3" data-postid="2" data-belowelement="div-comment-3" data-respondelement="respond" aria-label="Responder para Rafael">Responder</a>
</div>
</article><!-- .comment-body -->
<ol class="children">
<li id="comment-5" class="comment byuser comment-author-rafael bypostauthor odd alt depth-2 parent">
<article id="div-comment-5" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt="" src="http://0.gravatar.com/avatar/00d7c4866e85853e15afb170e0bbb072?s=32&d=mm&r=g" srcset="http://0.gravatar.com/avatar/00d7c4866e85853e15afb170e0bbb072?s=64&d=mm&r=g 2x" class="avatar avatar-32 photo" height="32" width="32">
<b class="fn"><a href="#" rel="external nofollow ugc" class="url">rafael</a></b>
<span class="says">disse:</span>
</div><!-- .comment-author -->
<div class="comment-metadata">
<a href="#/pagina-exemplo/#comment-5">
<time datetime="2020-08-27T00:18:02-03:00">
27 de agosto de 2020 às 00:18
</time>
</a>
<span class="edit-link"><a class="comment-edit-link" href="#/wp-admin/comment.html?action=editcomment&c=5">Editar</a></span>
</div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>Really?? Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
</div><!-- .comment-content -->
<div class="reply">
<a rel="nofollow" class="comment-reply-link" href="#/pagina-exemplo/?replytocom=5#respond" data-commentid="5" data-postid="2" data-belowelement="div-comment-5" data-respondelement="respond" aria-label="Responder para rafael">Responder</a>
</div>
</article><!-- .comment-body -->
<ol class="children">
<li id="comment-6" class="comment byuser comment-author-rafael bypostauthor even depth-3">
<article id="div-comment-6" class="comment-body">
<footer class="comment-meta">
<div class="comment-author vcard">
<img alt="" src="http://0.gravatar.com/avatar/00d7c4866e85853e15afb170e0bbb072?s=32&d=mm&r=g" srcset="http://0.gravatar.com/avatar/00d7c4866e85853e15afb170e0bbb072?s=64&d=mm&r=g 2x" class="avatar avatar-32 photo" height="32" width="32">
<b class="fn"><a href="#" rel="external nofollow ugc" class="url">rafael</a></b>
<span class="says">disse:</span>
</div><!-- .comment-author -->
<div class="comment-metadata">
<a href="#/pagina-exemplo/#comment-6">
<time datetime="2020-08-27T00:18:11-03:00">
27 de agosto de 2020 às 00:18
</time>
</a>
<span class="edit-link"><a class="comment-edit-link" href="#/wp-admin/comment.html?action=editcomment&c=6">Editar</a></span>
</div><!-- .comment-metadata -->
</footer><!-- .comment-meta -->
<div class="comment-content">
<p>Really?? Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
</div><!-- .comment-content -->
<div class="reply">
<a rel="nofollow" class="comment-reply-link" href="#/pagina-exemplo/?replytocom=6#respond" data-commentid="6" data-postid="2" data-belowelement="div-comment-6" data-respondelement="respond" aria-label="Responder para rafael">Responder</a>
</div>
</article><!-- .comment-body -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
</ol><!-- .children -->
</li><!-- #comment-## -->
</ul>
Comments
admin Today, 2:38
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod http://wwwwww.com tempoua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Reply
phildownney Today, 12:31
Really?? Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
Reply
phildownney Today, 12:31
Really?? Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.
Reply
maslarino Yesterday, 5:03 PM
Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Reply