Comment block

To place a block of extra content, use the nested tag structure <div>:
<div data-block="comments" ...>
    <div data-block="comment" ...>
        <div data-block="content">...</div>
    </div>
    ...
</div>


The number of nesting levels is unlimited.

Note. The first 40 comments are processed (the content of the div element with the comment value in the data-block attribute).
Attribute Description
data-block *
Take the following values:
  • comments — The comments list block.
  • comment — A comment in the list.
  • content — The comment content of the comment.
data-author * Takes the author value — The name of the comment's author.
data-avatar-url Link to the avatar of the comment's author. The picture must be in JPG or PNG format, no less than 64 × 64 pixels.
data-subtitle Additional line, for example, for the comment date. Placed under the author's name.
data-url Used only in the top level div element. Link to the page for adding comments.

*Required attribute.

The content of the comment:

Element Description
header

The comment title. Placed above the comment text.

HTML elements Supported HTML elements.
 <div data-block="comments" data-url="http://example.com/comments">
   <div
    data-block="comment"
    data-author="author" 
    data-avatar-url="http://example.com/img.png" 
    data-subtitle="2017-12-10"
   >
       <div data-block="content">
           <header>First comment header</header>
           <p>
               <b>Text</b> of the comment
               <a href="https://example.com">Link text</a>
           </p>
       </div>
       <div data-block="comments"> 
           <div 
            data-block="comment"
            data-author="author2">
               <!--Reply to the first comment-->
           </div> 
       </div>  
   </div>
   <div
    data-block="comment"
    data-author="author"> 
       <div data-block="content">
           <!-- Contents of the second comment-->
       </div>
   </div>  
</div>