Skip to content

Instantly share code, notes, and snippets.

@nathansmith
Last active January 10, 2020 23:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nathansmith/820c03e5c093a4c4e68d4bd46bd12eaf to your computer and use it in GitHub Desktop.
Save nathansmith/820c03e5c093a4c4e68d4bd46bd12eaf to your computer and use it in GitHub Desktop.
An attempt to document common WordPress comment class="…" names.

WordPress comment classes

Recently, I've endeavored to understand the comment class="…" name output from WordPress.

While it's possible to override everything at the theme level, I was curious what WP seems to want to output by default.

To that end, I have attempted to document all the commonalities I could find between the following themes.

  • Twenty Twenty
  • Twenty Nineteen
  • Twenty Seventeen
  • Twenty Sixteen

Below is an example *.scss file, without any styles applied. It just has selectors that one might use, if attempting to style the "standard" output of the most recent default WP themes.


For reference, I have also included the formatted markup for the comments section from each theme.

If you see any class="…" names that are used in all of the themes, feel free to leave a comment and I'll attempt to keep this gist somewhat up to date.


ℹ️ NOTE: Some of the inline HTML comments are incorrect. For instance, in Twenty Twenty there is no class="comments-title" element but there is a closing <!-- .comments-title --> comment. I just left in those types of errors, rather than attempt to gloss over the WP markup output.

/*
// ===============
// What the what!?
// ===============
Below is a list of common `class` names
that appear in these default themes:
- Twenty Twenty
- Twenty Nineteen
- Twenty Seventeen
- Twenty Sixteen
// ==============
// Comments area.
// ==============
- #comments
- .comment-reply-title
// ================
// Comment element.
// ================
- .comment
- .comment.bypostauthor
- .comment.byuser
- .comment.comment-author-admin
- .comment.depth-1
- .comment.even
- .comment.odd
- .comment.thread-alt
- .comment.thread-even
- .comment.thread-odd
// =================
// Comment children.
// =================
- .comment-author
- .comment-body
- .comment-content
- .comment-meta
- .comment-metadata
- .comment-notes
- .says (sometimes hidden)
// =============
// Comment form.
// =============
- .comment-form-author
- .comment-form-comment
- .comment-form-email
- .comment-form-url
- .comment-notes
- .comment-respond
- .email-notes
- .form-submit
- .submit
// ================
// Comments closed.
// ================
- .comments-closed
- .no-comments
// ==================================
// VCARD (microformat).
//
// Don't style these directly.
//
// http://microformats.org/wiki/hcard
// ==================================
- .fn
- .url
- .vcard
*/
// ==============
// Comments area.
// ==============
#comments {}
.comment-reply-title {}
// ================
// Comment element.
// ================
.comment {}
.comment.bypostauthor {}
.comment.byuser {}
.comment.comment-author-admin {}
.comment.depth-1 {}
.comment.even {}
.comment.odd {}
.comment.thread-alt {}
.comment.thread-even {}
.comment.thread-odd {}
// =================
// Comment children.
// =================
.comment-author {}
.comment-body {}
.comment-content {}
.comment-meta {}
.comment-metadata {}
.comment-notes {}
/*
NOTE:
This is sometimes hidden, by being
paired with `screen-reader-text`.
```
<span class="says screen-reader-text">
says:
</span>
```
*/
.says {}
// =============
// Comment form.
// =============
.comment-form-author {}
.comment-form-comment {}
.comment-form-email {}
.comment-form-url {}
.comment-respond {}
.email-notes {}
.form-submit {}
.submit {}
// ================
// Comments closed.
// ================
/*
NOTE: The `<p>` selector is needed, so
that we can style either markup pattern:
```
<div id="comments">
<p class="comments-closed">
Comments are closed.
</p>
</div>
```
```
<div id="comments" class="comments-closed">
<p class="no-comments">
Comments are closed.
</p>
</div>
```
*/
p.no-comments,
p.comments-closed {}
<div class="comments-area" id="comments">
<div class="comments-title-wrap">
<h2 class="comments-title">
Join the Conversation
</h2>
<!-- .comments-title -->
<div class="discussion-meta">
<ol class="discussion-avatar-list">
<li>
<div
class="
comment-author
comment-user-avatar
vcard
"
></div>
</li>
<li>
<div
class="
comment-author
comment-user-avatar
vcard
"
></div>
</li>
<li>
<div
class="
comment-author
comment-user-avatar
vcard
"
></div>
</li>
</ol>
<!-- .discussion-avatar-list -->
<p class="discussion-meta-info">
<svg
class="svg-icon"
width="24"
height="24"
aria-hidden="true"
role="img"
focusable="false"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"
></path>
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
<span>3 Comments</span>
</p>
</div>
<!-- .discussion-meta -->
</div>
<!-- .comments-title-flex -->
<ol class="comment-list">
<li
id="comment-2"
class="
bypostauthor
byuser
comment
comment-author-admin
depth-1
even
thread-even
"
>
<article class="comment-body" id="div-comment-2">
<footer class="comment-meta">
<div
class="
comment-author
vcard
"
>
<span class="post-author-badge" aria-hidden="true">
<svg
class="svg-icon"
width="24"
height="24"
aria-hidden="true"
role="img"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
</svg>
</span>
<b class="fn">Jane Doe</b>
<span
class="
says
screen-reader-text
"
>
says:
</span>
</div>
<!-- .comment-author -->
<div class="comment-metadata">
<a>
<time datetime="2020-01-10T02:17:35+00:00" title="January 10, 2020 at 2:17 am">
January 10, 2020 at 2:17 am
</time>
</a>
</div>
<!-- .comment-metadata -->
</footer>
<!-- .comment-meta -->
<div class="comment-content">
<p>Super duper comment…</p>
<p>I agree!</p>
<p>Etc.</p>
<p>Does this work?</p>
</div>
<!-- .comment-content -->
</article>
<!-- .comment-body -->
</li>
<!-- #comment-## -->
<li
class="
alt
comment
depth-1
odd
thread-alt
thread-odd
"
id="comment-3"
>
<article class="comment-body" id="div-comment-3">
<footer class="comment-meta">
<div
class="
comment-author
vcard
"
>
<a class="url" rel="external nofollow">
<b class="fn">Patricia O'Reilly McLongname</b>
<span
class="
says
screen-reader-text
"
>
says:
</span>
</a>
</div>
<!-- .comment-author -->
<div class="comment-metadata">
<a>
<time datetime="2020-01-10T02:19:30+00:00" title="January 10, 2020 at 2:19 am">
January 10, 2020 at 2:19 am
</time>
</a>
</div>
<!-- .comment-metadata -->
</footer>
<!-- .comment-meta -->
<div class="comment-content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo eos maiores aliquam
distinctio rem omnis eum? Repellat voluptatem pariatur, officia quod praesentium aperiam
beatae dolore alias blanditiis voluptates saepe quibusdam.
</p>
</div>
<!-- .comment-content -->
</article>
<!-- .comment-body -->
</li>
<!-- #comment-## -->
<li
class="
comment
depth-1
even
thread-even
"
id="comment-4"
>
<article class="comment-body" id="div-comment-4">
<footer class="comment-meta">
<div
class="
comment-author
vcard
"
>
<a class="url" rel="external nofollow">
<b class="fn">Johnathan Rogersonian</b>
<span class="screen-reader-text says">says:</span>
</a>
</div>
<!-- .comment-author -->
<div class="comment-metadata">
<a>
<time datetime="2020-01-10T02:19:54+00:00" title="January 10, 2020 at 2:19 am">
January 10, 2020 at 2:19 am
</time>
</a>
</div>
<!-- .comment-metadata -->
</footer>
<!-- .comment-meta -->
<div class="comment-content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo eos maiores aliquam
distinctio rem omnis eum? Repellat voluptatem pariatur, officia quod praesentium aperiam
beatae dolore alias blanditiis voluptates saepe quibusdam.
</p>
</div>
<!-- .comment-content -->
</article>
<!-- .comment-body -->
</li>
<!-- #comment-## -->
</ol>
<!-- .comment-list -->
<div class="comment-form-flex">
<span class="screen-reader-text">Leave a comment</span>
<div class="comment-respond" id="respond">
<h3 class="comment-reply-title" id="reply-title">
<small>
<a rel="nofollow" id="cancel-comment-reply-link" style="display:none;">
Cancel reply
</a>
</small>
</h3>
<form class="comment-form" method="post" id="commentform" novalidate="">
<p class="comment-notes">
<span id="email-notes">Your email address will not be published.</span>
</p>
<p class="comment-form-comment">
<label for="comment">Comment</label>
<textarea
id="comment"
name="comment"
cols="45"
rows="5"
maxlength="65525"
required="required"
></textarea>
</p>
<p class="comment-form-author">
<label for="author">Name</label>
<input id="author" name="author" type="text" value="" size="30" maxlength="245" />
</p>
<p class="comment-form-email">
<label for="email">Email</label>
<input
id="email"
name="email"
type="email"
value=""
size="30"
maxlength="100"
aria-describedby="email-notes"
/>
</p>
<p class="comment-form-url">
<label for="url">Website</label>
<input id="url" name="url" type="url" value="" size="30" maxlength="200" />
</p>
<p class="form-submit">
<input name="submit" type="submit" id="submit" class="submit" value="Post Comment" />
<input type="hidden" name="comment_post_ID" value="1" id="comment_post_ID" />
<input type="hidden" name="comment_parent" id="comment_parent" value="0" />
</p>
</form>
</div>
<!-- #respond -->
<h2 class="comments-title" aria-hidden="true">Leave a comment</h2>
</div>
</div>
<!-- #comments -->
<div class="comments-area" id="comments">
<div class="comments-title-wrap">
<h2 class="comments-title">
Join the Conversation
</h2>
<!-- .comments-title -->
<div class="discussion-meta">
<ol class="discussion-avatar-list">
<li>
<div
class="
comment-author
comment-user-avatar
vcard
"
></div>
</li>
<li>
<div
class="
comment-author
comment-user-avatar
vcard
"
></div>
</li>
<li>
<div
class="
comment-author
comment-user-avatar
vcard
"
></div>
</li>
</ol>
<!-- .discussion-avatar-list -->
<p class="discussion-meta-info">
<svg
class="svg-icon"
width="24"
height="24"
aria-hidden="true"
role="img"
focusable="false"
viewBox="0 0 24 24"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"
></path>
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
<span>3 Comments</span>
</p>
</div>
<!-- .discussion-meta -->
</div>
<!-- .comments-title-flex -->
<ol class="comment-list">
<li
id="comment-2"
class="
bypostauthor
byuser
comment
comment-author-admin
depth-1
even
thread-even
"
>
<article class="comment-body" id="div-comment-2">
<footer class="comment-meta">
<div
class="
comment-author
vcard
"
>
<span class="post-author-badge" aria-hidden="true">
<svg
class="svg-icon"
width="24"
height="24"
aria-hidden="true"
role="img"
focusable="false"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
</svg>
</span>
<b class="fn">Jane Doe</b>
<span
class="
says
screen-reader-text
"
>
says:
</span>
</div>
<!-- .comment-author -->
<div class="comment-metadata">
<a>
<time datetime="2020-01-10T02:17:35+00:00" title="January 10, 2020 at 2:17 am">
January 10, 2020 at 2:17 am
</time>
</a>
</div>
<!-- .comment-metadata -->
</footer>
<!-- .comment-meta -->
<div class="comment-content">
<p>Super duper comment…</p>
<p>I agree!</p>
<p>Etc.</p>
<p>Does this work?</p>
</div>
<!-- .comment-content -->
</article>
<!-- .comment-body -->
</li>
<!-- #comment-## -->
<li
class="
alt
comment
depth-1
odd
thread-alt
thread-odd
"
id="comment-3"
>
<article class="comment-body" id="div-comment-3">
<footer class="comment-meta">
<div
class="
comment-author
vcard
"
>
<a class="url" rel="external nofollow">
<b class="fn">Patricia O'Reilly McLongname</b>
<span
class="
says
screen-reader-text
"
>
says:
</span>
</a>
</div>
<!-- .comment-author -->
<div class="comment-metadata">
<a>
<time datetime="2020-01-10T02:19:30+00:00" title="January 10, 2020 at 2:19 am">
January 10, 2020 at 2:19 am
</time>
</a>
</div>
<!-- .comment-metadata -->
</footer>
<!-- .comment-meta -->
<div class="comment-content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo eos maiores aliquam
distinctio rem omnis eum? Repellat voluptatem pariatur, officia quod praesentium aperiam
beatae dolore alias blanditiis voluptates saepe quibusdam.
</p>
</div>
<!-- .comment-content -->
</article>
<!-- .comment-body -->
</li>
<!-- #comment-## -->
<li
class="
comment
depth-1
even
thread-even
"
id="comment-4"
>
<article class="comment-body" id="div-comment-4">
<footer class="comment-meta">
<div
class="
comment-author
vcard
"
>
<a class="url" rel="external nofollow">
<b class="fn">Johnathan Rogersonian</b>
<span class="screen-reader-text says">says:</span>
</a>
</div>
<!-- .comment-author -->
<div class="comment-metadata">
<a>
<time datetime="2020-01-10T02:19:54+00:00" title="January 10, 2020 at 2:19 am">
January 10, 2020 at 2:19 am
</time>
</a>
</div>
<!-- .comment-metadata -->
</footer>
<!-- .comment-meta -->
<div class="comment-content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo eos maiores aliquam
distinctio rem omnis eum? Repellat voluptatem pariatur, officia quod praesentium aperiam
beatae dolore alias blanditiis voluptates saepe quibusdam.
</p>
</div>
<!-- .comment-content -->
</article>
<!-- .comment-body -->
</li>
<!-- #comment-## -->
</ol>
<!-- .comment-list -->
<div class="comment-form-flex">
<span class="screen-reader-text">Leave a comment</span>
<div class="comment-respond" id="respond">
<h3 class="comment-reply-title" id="reply-title">
<small>
<a rel="nofollow" id="cancel-comment-reply-link" style="display:none;">
Cancel reply
</a>
</small>
</h3>
<form class="comment-form" method="post" id="commentform" novalidate="">
<p class="comment-notes">
<span id="email-notes">Your email address will not be published.</span>
</p>
<p class="comment-form-comment">
<label for="comment">Comment</label>
<textarea
id="comment"
name="comment"
cols="45"
rows="5"
maxlength="65525"
required="required"
></textarea>
</p>
<p class="comment-form-author">
<label for="author">Name</label>
<input id="author" name="author" type="text" value="" size="30" maxlength="245" />
</p>
<p class="comment-form-email">
<label for="email">Email</label>
<input
id="email"
name="email"
type="email"
value=""
size="30"
maxlength="100"
aria-describedby="email-notes"
/>
</p>
<p class="comment-form-url">
<label for="url">Website</label>
<input id="url" name="url" type="url" value="" size="30" maxlength="200" />
</p>
<p class="form-submit">
<input name="submit" type="submit" id="submit" class="submit" value="Post Comment" />
<input type="hidden" name="comment_post_ID" value="1" id="comment_post_ID" />
<input type="hidden" name="comment_parent" id="comment_parent" value="0" />
</p>
</form>
</div>
<!-- #respond -->
<h2 class="comments-title" aria-hidden="true">Leave a comment</h2>
</div>
</div>
<!-- #comments -->
<div class="comments-area" id="comments">
<h2 class="comments-title">
3 thoughts on “Hello world!”
</h2>
<ol class="comment-list">
<li
class="
bypostauthor
byuser
comment
comment-author-admin
depth-1
even
thread-even
"
id="comment-2"
>
<article class="comment-body" id="div-comment-2">
<footer class="comment-meta">
<div
class="
comment-author
vcard
"
>
<b class="fn">Jane Doe</b>
<span class="says">says:</span>
</div>
<!-- .comment-author -->
<div class="comment-metadata">
<a>
<time datetime="2020-01-10T02:17:35+00:00">
January 10, 2020 at 2:17 am
</time>
</a>
</div>
<!-- .comment-metadata -->
</footer>
<!-- .comment-meta -->
<div class="comment-content">
<p>Super duper comment…</p>
<p>I agree!</p>
<p>Etc.</p>
<p>Does this work?</p>
</div>
<!-- .comment-content -->
</article>
<!-- .comment-body -->
</li>
<!-- #comment-## -->
<li
class="
alt
comment
depth-1
odd
thread-alt
thread-odd
"
id="comment-3"
>
<article class="comment-body" id="div-comment-3">
<footer class="comment-meta">
<div
class="
comment-author
vcard
"
>
<b class="fn">
<a class="url" rel="external nofollow ugc">Patricia O'Reilly McLongname</a>
</b>
<span class="says">says:</span>
</div>
<!-- .comment-author -->
<div class="comment-metadata">
<a>
<time datetime="2020-01-10T02:19:30+00:00">
January 10, 2020 at 2:19 am
</time>
</a>
</div>
<!-- .comment-metadata -->
</footer>
<!-- .comment-meta -->
<div class="comment-content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo eos maiores aliquam
distinctio rem omnis eum? Repellat voluptatem pariatur, officia quod praesentium aperiam
beatae dolore alias blanditiis voluptates saepe quibusdam.
</p>
</div>
<!-- .comment-content -->
</article>
<!-- .comment-body -->
</li>
<!-- #comment-## -->
<li
class="
comment
depth-1
even
thread-even
"
id="comment-4"
>
<article class="comment-body" id="div-comment-4">
<footer class="comment-meta">
<div
class="
comment-author
vcard
"
>
<b class="fn">
<a>
Johnathan Rogersonian
</a>
</b>
<span class="says">says:</span>
</div>
<!-- .comment-author -->
<div class="comment-metadata">
<a>
<time datetime="2020-01-10T02:19:54+00:00">
January 10, 2020 at 2:19 am
</time>
</a>
</div>
<!-- .comment-metadata -->
</footer>
<!-- .comment-meta -->
<div class="comment-content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo eos maiores aliquam
distinctio rem omnis eum? Repellat voluptatem pariatur, officia quod praesentium aperiam
beatae dolore alias blanditiis voluptates saepe quibusdam.
</p>
</div>
<!-- .comment-content -->
</article>
<!-- .comment-body -->
</li>
<!-- #comment-## -->
</ol>
<!-- .comment-list -->
<div class="comment-respond" id="respond">
<h2 class="comment-reply-title" id="reply-title">
Leave a Reply
<small>
<a rel="nofollow" id="cancel-comment-reply-link" style="display:none;">
Cancel reply
</a>
</small>
</h2>
<form class="comment-form" method="post" id="commentform" novalidate="">
<p class="comment-notes">
<span id="email-notes">Your email address will not be published.</span>
</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="comment-form-author">
<label for="author">Name</label>
<input id="author" name="author" type="text" value="" size="30" maxlength="245" />
</p>
<p class="comment-form-email">
<label for="email">Email</label>
<input
id="email"
name="email"
type="email"
value=""
size="30"
maxlength="100"
aria-describedby="email-notes"
/>
</p>
<p class="comment-form-url">
<label for="url">Website</label>
<input id="url" name="url" type="url" value="" size="30" maxlength="200" />
</p>
<p class="form-submit">
<input class="submit" name="submit" type="submit" id="submit" value="Post Comment" />
<input type="hidden" name="comment_post_ID" value="1" id="comment_post_ID" />
<input type="hidden" name="comment_parent" id="comment_parent" value="0" />
</p>
</form>
</div>
<!-- #respond -->
</div>
<!-- #comments -->
<div
class="
comments-wrapper
section-inner
"
>
<div class="comments" id="comments">
<div
class="
comments-header
max-percentage
section-inner
small
"
>
<h2 class="comment-reply-title">
3 replies on “Hello world!”
</h2>
<!-- .comments-title -->
</div>
<!-- .comments-header -->
<div
class="
comments-inner
max-percentage
section-inner
thin
"
>
<div
id="comment-2"
class="
bypostauthor
byuser
comment
comment-author-admin
depth-1
even
thread-even
"
>
<article class="comment-body" id="div-comment-2">
<footer class="comment-meta">
<div
class="
comment-author
vcard
"
>
<span class="fn">Jane Doe</span>
<span
class="
says
screen-reader-text
"
>
says:
</span>
</div>
<!-- .comment-author -->
<div class="comment-metadata">
<a>
<time datetime="2020-01-10T02:17:35+00:00" title="January 10, 2020 at 2:17 am">
January 10, 2020 at 2:17 am
</time>
</a>
</div>
<!-- .comment-metadata -->
</footer>
<!-- .comment-meta -->
<div
class="
comment-content
entry-content
"
>
<p>Super duper comment…</p>
<p>I agree!</p>
<p>Etc.</p>
<p>Does this work?</p>
</div>
<!-- .comment-content -->
<footer class="comment-footer-meta">
<span class="by-post-author">By Post Author</span>
</footer>
</article>
<!-- .comment-body -->
</div>
<!-- #comment-## -->
<div
class="
alt
comment
depth-1
odd
thread-alt
thread-odd
"
id="comment-3"
>
<article class="comment-body" id="div-comment-3">
<footer class="comment-meta">
<div
class="
comment-author
vcard
"
>
<a class="url" rel="external nofollow">
<span class="fn">Patricia O'Reilly McLongname</span>
<span class="screen-reader-text says">says:</span>
</a>
</div>
<!-- .comment-author -->
<div class="comment-metadata">
<a>
<time datetime="2020-01-10T02:19:30+00:00" title="January 10, 2020 at 2:19 am">
January 10, 2020 at 2:19 am
</time>
</a>
</div>
<!-- .comment-metadata -->
</footer>
<!-- .comment-meta -->
<div
class="
comment-content
entry-content
"
>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo eos maiores aliquam
distinctio rem omnis eum? Repellat voluptatem pariatur, officia quod praesentium
aperiam beatae dolore alias blanditiis voluptates saepe quibusdam.
</p>
</div>
<!-- .comment-content -->
</article>
<!-- .comment-body -->
</div>
<!-- #comment-## -->
<div
class="
comment
depth-1
even
thread-even
"
id="comment-4"
>
<article class="comment-body" id="div-comment-4">
<footer class="comment-meta">
<div
class="
comment-author
vcard
"
>
<a class="url" rel="external nofollow">
<span class="fn">Johnathan Rogersonian</span>
<span
class="
says
screen-reader-text
"
>
says:
</span>
</a>
</div>
<!-- .comment-author -->
<div class="comment-metadata">
<a>
<time datetime="2020-01-10T02:19:54+00:00" title="January 10, 2020 at 2:19 am">
January 10, 2020 at 2:19 am
</time>
</a>
</div>
<!-- .comment-metadata -->
</footer>
<!-- .comment-meta -->
<div
class="
comment-content
entry-content
"
>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo eos maiores aliquam
distinctio rem omnis eum? Repellat voluptatem pariatur, officia quod praesentium
aperiam beatae dolore alias blanditiis voluptates saepe quibusdam.
</p>
</div>
<!-- .comment-content -->
</article>
<!-- .comment-body -->
</div>
<!-- #comment-## -->
</div>
<!-- .comments-inner -->
</div>
<!-- comments -->
<hr
class="
styled-separator
is-style-wide
"
aria-hidden="true"
/>
<div class="comment-respond" id="respond">
<h2 class="comment-reply-title" id="reply-title">
Leave a Reply
<small>
<a rel="nofollow" id="cancel-comment-reply-link" style="display:none;">
Cancel reply
</a>
</small>
</h2>
<form
class="
section-inner
max-percentage
thin
"
id="commentform"
method="post"
novalidate=""
>
<p class="comment-notes">
<span id="email-notes">Your email address will not be published.</span>
</p>
<p class="comment-form-comment">
<label for="comment">Comment</label>
<textarea
cols="45"
id="comment"
maxlength="65525"
name="comment"
required="required"
rows="8"
></textarea>
</p>
<p class="comment-form-author">
<label for="author">Name</label>
<input id="author" name="author" type="text" value="" size="30" maxlength="245" />
</p>
<p class="comment-form-email">
<label for="email">Email</label>
<input
id="email"
name="email"
type="email"
value=""
size="30"
maxlength="100"
aria-describedby="email-notes"
/>
</p>
<p class="comment-form-url">
<label for="url">Website</label>
<input id="url" name="url" type="url" value="" size="30" maxlength="200" />
</p>
<p class="form-submit">
<input class="submit" name="submit" type="submit" id="submit" value="Post Comment" />
<input type="hidden" name="comment_post_ID" value="1" id="comment_post_ID" />
<input type="hidden" name="comment_parent" id="comment_parent" value="0" />
</p>
</form>
</div>
<!-- #respond -->
</div>
<!-- comments -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment