@guardian/mobile-apps-article-templates/ArticleTemplates/commentsTemplateBlock.html

Templates for articles on both iOS and Android next-gen apps

<div class="comment __COMMENTS_TYPE__ __COMMENTS_STATUS__" id="__COMMENTS_ID__">
    <div class="comment__container">
        <div class="comment__header">
            <span class="avatar avatar--user">
                <img class="avatar__img" src="__COMMENTS_AVATAR__" alt=""/>
            </span>
            <div class="comment__meta">
                <span class="comment__username">__COMMENTS_USERNAME__</span>
                <div class="comment__role" data-role="__COMMENTS_ROLE__">
                    <svg width="36" height="36" viewBox="0 0 36 36" class="comment__badge">
                        <path d="M18 0a18 18 0 1 0 0 36 18 18 0 0 0 0-36"></path>
                        <path fill="#FFF" d="M21.2 4.4c2.3.4 5.3 2 6.3 3.1v5.2H27L21.2 5v-.6zm-2.2.4c-4 0-6.3 5.6-6.3 13.2 0 7.7 2.2 13.3 6.3 13.3v.6c-6 .4-14.4-4.2-14-13.8A13.3 13.3 0 0 1 19 4v.7zm10.4 14.4l-1.9.9v8.6c-1 1-3.8 2.6-6.3 3.1V19.9l-2.2-.7v-.6h10.4v.6z"></path>
                    </svg>
                    <strong class="comment__role__title">__COMMENTS_ROLE__</strong>
                </div>

                <div data-highlighted="__COMMENTS_HIGHLIGHTED__">
                    <svg width="36" height="36" viewBox="0 0 36 36" class="comment__badge">
                        <path d="M18 0a18 18 0 1 0 0 36 18 18 0 0 0 0-36"></path>
                        <path fill="#FFF" d="M21.2 4.4c2.3.4 5.3 2 6.3 3.1v5.2H27L21.2 5v-.6zm-2.2.4c-4 0-6.3 5.6-6.3 13.2 0 7.7 2.2 13.3 6.3 13.3v.6c-6 .4-14.4-4.2-14-13.8A13.3 13.3 0 0 1 19 4v.7zm10.4 14.4l-1.9.9v8.6c-1 1-3.8 2.6-6.3 3.1V19.9l-2.2-.7v-.6h10.4v.6z"></path>
                    </svg>
                    <strong class="comment__pick">Guardian Pick</strong>
                </div>

                <span class="comment__response-to">
                    <span data-icon="&#xe061;" aria-hidden="true"></span>
                    <span class="screen-readable">in response to </span>
                    __COMMENTS_RESPONSE_TO__
                </span>
                <div class="comment__role" data-role="__COMMENTS_RESPONSE_TO_ROLE__">
                    <svg width="36" height="36" viewBox="0 0 36 36" class="comment__badge">
                        <path d="M18 0a18 18 0 1 0 0 36 18 18 0 0 0 0-36"></path>
                        <path fill="#FFF" d="M21.2 4.4c2.3.4 5.3 2 6.3 3.1v5.2H27L21.2 5v-.6zm-2.2.4c-4 0-6.3 5.6-6.3 13.2 0 7.7 2.2 13.3 6.3 13.3v.6c-6 .4-14.4-4.2-14-13.8A13.3 13.3 0 0 1 19 4v.7zm10.4 14.4l-1.9.9v8.6c-1 1-3.8 2.6-6.3 3.1V19.9l-2.2-.7v-.6h10.4v.6z"></path>
                    </svg>
                    <strong class="comment__role__title">__COMMENTS_RESPONSE_TO_ROLE__</strong>
                </div>
                <span class="comment__timestamp" title="__COMMENTS_TIME__">__COMMENTS_TIME_RELATIVE__</span>
            </div>
        </div>

        <div class="comment__body">
            <div class="prose resizable resizable-line-height selectable">
                __COMMENTS_BODY__
            </div>
        </div>

        <div class="comment__options">
            <a class="comment__reply touchpoint touchpoint--primary touchpoint--small" href="x-gu://leavereply/__COMMENTS_ID__">
                <span class="touchpoint__button" data-icon="&#xe061;" aria-hidden="true"></span>
                <span class="touchpoint__label">Reply</span>
            </a>
            <a class="comment__report touchpoint" href="x-gu://reportabuse/__COMMENTS_ID__">
                <span class="touchpoint__label">Report</span>
            </a>
        </div>

        <a class="comment__recommend touchpoint touchpoint--secondary touchpoint--small" href="x-gu://recommendcomment/__COMMENTS_ID__">
            <span class="touchpoint__label comment__recommend__count">
                __COMMENTS_RECOMMEND_COUNT__
                <span class="screen-readable">recommendations. Tap to recommend.</span>
            </span>
            <span class="touchpoint__button" data-icon="&#xe066;" aria-hidden="true"></span>
        </a>
    </div>
</div>