Front End Help

Comments Pattern

Comments group together information about the commenter, information about the item the comment refers to, the comment itself, and actions pertaining to the comment.

The comment style is declared in 15-group-comments.css.

Rules

An individual comment is always a li contained within an ol. These comment lists, or threads, may be nested. Comments are given the class even or odd.

Quick reference

[...]
always included
{...}
sometimes included
[ol thread]
  [li odd comment group]
    [byline heading] {a} [span datetime] [/heading]
    [div icon] {a} {img} {/a} [/div]
    [blockquote userstuff]
    {p datetime}
    {landmark heading}
    {ul actions}
  [/li]
[/ol]

XHTML diagram

This diagram is taken from a news post comment thread.

  1. <ol class="thread">
    1. <li class="odd comment group">
      1. <h4 class="byline heading">
        1. <a&gt
        2. <span class="posted datetime">
      2. <div class="icon">
        1. <a>
          1. <img class="icon">
      3. <blockquote class="userstuff">
      4. <p class="edited datetime">
      5. <h5 class="landmark heading">
      6. <ul class="actions">
    2. <li class="even comment group">
    3. <li>
      1. <ol class="thread">
        1. <li class="even comment group"...
        2. <li class="odd comment group"...
        3. <li>
          1. <ol class="thread">
            1. <li class="even comment group"...
        </li>