Comment

Comment Thread Example

Comment is a standalone component

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

face
Peter Olsson
Peter Olsson

This is a reply comment text

PS
Peter Svensson
This comment was sent through the slot
<div id="62bed7ab08b0b" class="c-comment"  data-uid="62bed7ab08b06">

    <div class="c-comment__col">
        <!-- avatar.blade.php -->
    <div id="62bed7ab090ee" class="c-avatar c-avatar--size-md" data-uid="62bed7ab090ea">
        
                    <span class="c-avatar__icon" aria-label="Peter Svensson">
                <!-- icon.blade.php -->
    <i id="62bed7ab09148" class="c-icon c-icon--size-lg c-icon--size-inherit material-icons" translate="no" role="img" alt="" data-uid="62bed7ab09144">
                    face
            </i>
            </span>
        
            </div>
    </div>

    <div class="c-comment__col">

        <div class="c-comment__top">

            <a id="62bed7ab0925f" class="c-link c-comment__link" target="_top" href="#" role="link" data-uid="62bed7ab0925b">
        <!-- typography.blade.php  -->
<h6 id="62bed7ab091cd" class="c-typography c-comment__author c-typography__variant--title" data-uid="62bed7ab091c9">
    Peter Svensson
</h6>
    </a>
    
                            <!-- typography.blade.php  -->
<span id="62bed7ab095d3" class="c-typography c-comment__date c-typography__variant--meta" data-uid="62bed7ab095cf">
    <span 
        id="62bed7ab09512" 
    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="62bed7ab0950c"
    >
     <time class="2019-12-01 17:25">2 year</time> 
</span>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                            <!-- typography.blade.php  -->
<p id="62bed7ab09612" class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="62bed7ab09610">
    This is a comment text
</p>                
                    </div>

                    <div class="c-comment__actions">
                <a id="62bed7ab08674" class="c-button c-button__basic c-button__basic--default c-button--sm" href="#reply" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62bed7ab0866d">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bed7ab08718" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62bed7ab08713">
                    reply
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Reply
            </span>
        
    </span>
</a>
        <a id="62bed7ab08778" class="c-button c-button__basic c-button__basic--default c-button--sm" href="#like" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="62bed7ab08763">   
    <span class="c-button__label">
        
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <i id="62bed7ab087b5" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="62bed7ab087b2">
                    thumb_up
            </i>
            </span>
        
                    <span class="c-button__label-text ">
                Like
            </span>
        
    </span>
</a>
            </div>
            </div>
</div>
<div id="62bed7ab09651" class="c-comment c-comment__is-reply"  data-uid="62bed7ab0964f">

    <div class="c-comment__col">
        <!-- avatar.blade.php -->
    <div id="62bed7ab096ee" class="c-avatar c-avatar--size-md" data-uid="62bed7ab096e9">
                    <img src="https://picsum.photos/70/70?image=64" class="c-avatar__image" alt="Peter Olsson" aria-label="Peter Olsson"/>
        
        
            </div>
    </div>

    <div class="c-comment__col">

        <div class="c-comment__top">

            <span id="62bed7ab097a0" class="c-link c-comment__link" data-uid="62bed7ab0979a">    
        <!-- typography.blade.php  -->
<h6 id="62bed7ab09752" class="c-typography c-comment__author c-typography__variant--title" data-uid="62bed7ab0974f">
    Peter Olsson
</h6>
    </span>
    
                            <!-- typography.blade.php  -->
<span id="62bed7ab098d0" class="c-typography c-comment__date c-typography__variant--meta" data-uid="62bed7ab098cb">
    <span 
        id="62bed7ab09875" 
    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="62bed7ab09870"
    >
     <time class="2020-01-01 17:25">2 year</time> 
</span>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                            <!-- typography.blade.php  -->
<p id="62bed7ab0992b" class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="62bed7ab09927">
    This is a reply comment text
</p>                
                    </div>

            </div>
</div>
<div id="62bed7ab09984" class="c-comment"  data-uid="62bed7ab09980">

    <div class="c-comment__col">
        <!-- avatar.blade.php -->
    <div id="62bed7ab09aa1" class="c-avatar c-avatar--size-md" data-uid="62bed7ab09a9c">
        
        
                    <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>

    <div class="c-comment__col">

        <div class="c-comment__top">

            <span id="62bed7ab09b63" class="c-link c-comment__link" data-uid="62bed7ab09b61">    
        <!-- typography.blade.php  -->
<h6 id="62bed7ab09b18" class="c-typography c-comment__author c-typography__variant--title" data-uid="62bed7ab09b13">
    Peter Svensson
</h6>
    </span>
    
                            <!-- typography.blade.php  -->
<span id="62bed7ab09c60" class="c-typography c-comment__date c-typography__variant--meta" data-uid="62bed7ab09c5c">
    <span 
        id="62bed7ab09c18" 
    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="62bed7ab09c13"
    >
     <time class="2020-01-09 17:25">2 år</time> 
</span>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                
                            <div class="c-comment__bubble--inner">
                    This comment was sent through the slot
                </div>
                    </div>

            </div>
</div>
@comment([
    'author' => 'Peter Svensson',
    'author_url' => '#',
    'text' => 'This is a comment text',
    'icon' => 'face',
    'date' => '2019-12-01 17:25:43'
])
    @slot('actions')
        @button([
            'text' => 'Reply',
            'color' => 'default',
            'style' => 'basic',
            'href' => '#reply',
            'icon' => 'reply',
            'size' => 'sm'
        ])
        @endbutton

        @button([
            'text' => 'Like',
            'color' => 'default',
            'style' => 'basic',
            'href' => '#like',
            'icon' => 'thumb_up',
            'size' => 'sm'
        ])
        @endbutton
    @endslot
@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',
    'dateLabels' => [
      'year' => 'år',
      'month' => 'månad',
      'week' => 'vecka',
      'day' => 'dag',
      'hour' => 'timme',
      'minute' => 'minut',
      'second' => 'sekund'
    ],
    'dateLabelsPlural' => [
      'year' => 'år',
      'month' => 'månader',
      'week' => 'veckor',
      'day' => 'dagar',
      'hour' => 'timmar',
      'minute' => 'minuter',
      'second' => 'sekund'
    ]
])
    This comment was sent through the slot
@endcomment

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'
dateLabels [] array - Array containing translations valid keys: year, month, week, day, hour, minute, second
dateLabelsPlural [] array - Array containing translations valid keys: year, month, week, day, hour, minute, second
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