Comment block

To place a comment block, use the nested structure of <div> tags:

<div data-block="comments" data-url="https://example.com">
    <div data-block="comment"
         data-author="Alice Little"
         data-avatar-url="https://clck.ru/KyKNk"
         data-subtitle="10 Nov 2019"
    >
        <div data-block="content">
            <p>Text of comment 1</p>
        </div>
        <div data-block="comments"> 
            <div data-block="comment"
                 data-author="Mad Hatter"
                 data-avatar-url="https://clck.ru/KyKPP"
                 data-subtitle="12 Nov 2019"
            >
                <div data-block="content">
                    <p>Reply to comment 1</p>
                </div>
            </div>
        </div>
    </div>
    <div data-block="comment"
         data-author="Cheshire Cat"
         data-avatar-url="https://clck.ru/KyKPy"
         data-subtitle="11 Nov 2019"
    >
        <div data-block="content">
            <p>Text of comment 2</p>
        </div>
    </div>
</div>
Copied to clipboard

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 * The comment author's name.
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 Link to the page for adding comments.

Used only in the top level div element.

*Required attribute.

The content of the comment:

Element Description
header

The comment title. Placed above the comment text.

HTML elements Supported HTML elements