Comment

Comment Thread Example

face

This is a comment text

Peter Olsson

Peter Olsson

This is a reply comment text

Peter Svensson

PS
This comment was sent through the slot

Comment is a standalone component

The comment can be used as a top level comment and as a reply.

<!-- segment.blade.php -->
<section id="61efb6b0e5680" class="c-segment c-segment--full-width c-segment--text-dark c-segment--height-md c-segment--text-default c-segment--alignment-top" data-uid="61efb6b0e567e">
    
    <div class="c-segment__content o-container o-container--content o-container--keep-spacing">
    
        
    </div>
    
            <div class="c-segment__slot o-container">
            <div id="61efb6b0e47966.83774854" class="c-comment"  data-uid="61efb6b0e47a4">
    <div class="c-comment__top">


                    <a id="61efb6b0e4d4a" class="c-link c-comment__link" target="_top" href="#" role="link" data-uid="61efb6b0e4d46">
        <!-- typography.blade.php  -->
<h6 id="61efb6b0e4cac" class="c-typography c-comment__author c-typography__variant--title" data-uid="61efb6b0e4ca8">
    Peter Svensson
</h6>
    </a>
        

                    <!-- typography.blade.php  -->
<p id="61efb6b0e4fb4" class="c-typography c-comment__date c-typography__variant--meta" data-uid="61efb6b0e4fb0">
    <span 
        id="61efb6b0e4f1d" 
    class="c-tooltip c-tooltip__top"
    js-bind-hover="tooltip" data-title="Sun 01 Dec 2019" role="tooltip" aria-label="Tooltip: Sun 01 Dec 2019" data-uid="61efb6b0e4f18"
    >
     <time class="2019-12-01 17:25:43">2 years</time> 
</span>
</p>                    </div>


    <div class="c-comment__bubble c-comment__bubble--color-dark">
        <!-- avatar.blade.php -->
    <div id="61efb6b0e5045" class="c-avatar c-avatar--size-md" data-uid="61efb6b0e5042">
        
                    <span class="c-avatar__icon" aria-label="Peter Svensson">
                <!-- icon.blade.php -->
    <i id="61efb6b0e50d8" class="c-icon c-icon--size-lg c-icon--size-inherit material-icons" translate="no" role="img" alt="" data-uid="61efb6b0e50d4">
                    face
            </i>
            </span>
        
            </div>

                    <!-- typography.blade.php  -->
<p id="61efb6b0e512d" class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="61efb6b0e512b">
    This is a comment text
</p>        
            </div>
</div>
    <div id="61efb6b0e51754.92949893" class="c-comment c-comment__is-reply"  data-uid="61efb6b0e517e">
    <div class="c-comment__top">


        
            <!-- typography.blade.php  -->
<h6 id="61efb6b0e520e" class="c-typography c-comment__author c-typography__variant--title" data-uid="61efb6b0e520b">
    Peter Olsson
</h6>
        

                    <!-- typography.blade.php  -->
<p id="61efb6b0e532c" class="c-typography c-comment__date c-typography__variant--meta" data-uid="61efb6b0e5329">
    <span 
        id="61efb6b0e52d5" 
    class="c-tooltip c-tooltip__top"
    js-bind-hover="tooltip" data-title="Wed 01 Jan 2020" role="tooltip" aria-label="Tooltip: Wed 01 Jan 2020" data-uid="61efb6b0e52d0"
    >
     <time class="2020-01-01 17:25:43">2 years</time> 
</span>
</p>                    </div>


    <div class="c-comment__bubble c-comment__bubble--color-dark">
        <!-- avatar.blade.php -->
    <div id="61efb6b0e5379" class="c-avatar c-avatar--size-md" data-uid="61efb6b0e5377">
                    <img src="https://picsum.photos/70/70?image=64" class="c-avatar__image" alt="Peter Olsson" aria-label="Peter Olsson"/>
        
        
            </div>

                    <!-- typography.blade.php  -->
<p id="61efb6b0e53c0" class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="61efb6b0e53bd">
    This is a reply comment text
</p>        
            </div>
</div>
    <div id="61efb6b0e54004.86965256" class="c-comment"  data-uid="61efb6b0e5406">
    <div class="c-comment__top">


        
            <!-- typography.blade.php  -->
<h6 id="61efb6b0e548c" class="c-typography c-comment__author c-typography__variant--title" data-uid="61efb6b0e548a">
    Peter Svensson
</h6>
        

                    <!-- typography.blade.php  -->
<p id="61efb6b0e557b" class="c-typography c-comment__date c-typography__variant--meta" data-uid="61efb6b0e5579">
    <span 
        id="61efb6b0e5535" 
    class="c-tooltip c-tooltip__top"
    js-bind-hover="tooltip" data-title="Thu 09 Jan 2020" role="tooltip" aria-label="Tooltip: Thu 09 Jan 2020" data-uid="61efb6b0e5530"
    >
     <time class="2020-01-09 17:25:43">2 years</time> 
</span>
</p>                    </div>


    <div class="c-comment__bubble c-comment__bubble--color-dark">
        <!-- avatar.blade.php -->
    <div id="61efb6b0e55de" class="c-avatar c-avatar--size-md" data-uid="61efb6b0e55db">
        
        
                    <svg class="c-avatar__initials" aria-label="Peter Svensson" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <text font-size="380" y="50%" x="50%" fill="#fff" dominant-baseline="middle" text-anchor="middle" alignment-baseline="central">PS</text>
            </svg>
            </div>

        
                    <div class="c-comment__bubble--inner">
                This comment was sent through the slot
            </div>
            </div>
</div>
        </div>
    
            
        <div class="c-segment__inner-blocks o-container u-margin__x--auto u-hide-empty"><InnerBlocks /></div>
        
</section>
@segment([
    'template' => 'featured',
    'containContent' => true,
    'height' => 'md',
    'width' => 'lg',
    'card' => [
        'isCard' => true,
        'background' => "gray",
        'padding' => "10"
    ],
    'text_alignment' => 'right',
    'content_alignment' => [
        'vertical' => 'center',
        'horizontal' => 'right'
    ],
    'article_heading' => [
        "variant" => "h1",
        "element" => "h2",
        "slot" => ""
    ],
    'article_body' => ""
])
    @comment([
        'author' => 'Peter Svensson',
        'author_url' => '#',
        'text' => 'This is a comment text',
        'icon' => 'face',
        'date' => '2019-12-01 17:25:43'
    ])
    @endcomment

    @comment([
        'author' => 'Peter Olsson',
        'text' => 'This is a reply comment text',
        'icon' => 'face',
        'author_image' => 'https://picsum.photos/70/70?image=64',
        'date' => '2020-01-01 17:25:43',
        'is_reply' => true
    ])
    @endcomment

    @comment([
        'author' => 'Peter Svensson',
        'date' => '2020-01-09 17:25:43'
    ])
        This comment was sent through the slot
    @endcomment

@endsegment

Blade component parameters

Key Default value Type Available values Description
author string - Name of the commenter
author_url string - URL to the profile of the author
author_image string - A link to an image
text string - Content of the comment
icon string - Which icon to show
bubble_color dark string - Color for comment bubble background: light or dark
date 01/02/2019 string - The date when the comment was posted
date_suffix string - Time elapsed 'since'
componentElement div string - Element of the component
is_reply false boolean - If true the comment will be displayed as a reply
filterHtml false boolean - If set to true the comment will be filtered from html tags
allowedTags <b><strong><i><em><mark><small><del><ins><sub><sup> string - Which tags should be excluded from filtration
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Comment/comment.json