Comment

Comment Thread Example

Comment is a standalone component

Peter Svensson
2 år

This is a comment text

Reply Like
Peter Olsson
Peter Olsson
1 år

This is a reply comment text

Peter Olsson
Peter Olsson
just now

This is a reply comment text, it was written now.

Peter Olsson
Peter Olsson
2 minuter

This is a reply comment text, it was written two minutes ago.

Peter Olsson
Peter Olsson
5 timmar

This is a reply comment text, it was written five hours ago.

PS
Peter Svensson
1 år
This comment content was sent through the slot. 
<div class="c-comment"  data-uid="673ed33c9f362">

    <div class="c-comment__col">
            <!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-uid="673ed33c9f3c3">
        
                    <span class="c-avatar__icon" aria-label="Peter Svensson">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--size-lg c-icon--face c-icon--material c-icon--material-face material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-inherit" material-symbol="face" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed33c9f3fd">
                    </span>
            </span>
        
            </div>
    </div>

    <div class="c-comment__col">

        <div class="c-comment__top">

                <a class="c-link c-comment__link" id="" href="#" target="_top" data-uid="673ed33c9f4c7">
        <!-- typography.blade.php   original: h6 -->
<h2 class="c-typography c-comment__author c-typography__variant--h2" data-uid="673ed33c9f470">
    Peter Svensson
</h2>
    </a>
    
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="673ed33c9f604">
    <span class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="673ed33c9f58d" data-uid="673ed33c9f58d">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed33c9f58d">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed33c9f5ca">
    2 år
</strong>                    <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed33c9f58d">
             
            <div class="c-tooltip__content">
                <time class="2022-05-18T01:18:56 c-date" data-uid="673ed33c9f538">Wed 18 May 2022</time>
            </div>
            <span class="c-tooltip__arrow"></span>
                    </div>
    </div>
</span>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="673ed33c9f63d">
    This is a comment text
</p>                
                    </div>

                    <div class="c-comment__actions">
                <a class="c-button c-button__basic c-button__basic--default c-button--sm" target="_top" type="button" href="#reply" aria-label="Reply" data-uid="673ed33c9f137">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--reply c-icon--material c-icon--material-reply material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="reply" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed33c9f23a">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Reply
            </span>
        
    </span> </a>
            <a class="c-button c-button__basic c-button__basic--default c-button--sm" target="_top" type="button" href="#like" aria-label="Like" data-uid="673ed33c9f296">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--thumb-up c-icon--material c-icon--material-thumb_up material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="thumb_up" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="673ed33c9f2cf">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Like
            </span>
        
    </span> </a>
            </div>
            </div>
</div>
    <div class="c-comment c-comment__is-reply"  data-uid="673ed33c9f67f">

    <div class="c-comment__col">
            <!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-uid="673ed33c9f6b1">
                    <img src="https://picsum.photos/id/338/70/70" class="c-avatar__image" alt="Peter Olsson" aria-label="Peter Olsson"/>
        
        
            </div>
    </div>

    <div class="c-comment__col">

        <div class="c-comment__top">

                <span class="c-link c-comment__link" id="" target="_top" data-uid="673ed33c9f718">
        <!-- typography.blade.php   original: h6 -->
<h3 class="c-typography c-comment__author c-typography__variant--h3" data-uid="673ed33c9f6e3">
    Peter Olsson
</h3>
        </span>
        
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="673ed33c9f7ed">
    <span class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="673ed33c9f78a" data-uid="673ed33c9f78a">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed33c9f78a">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed33c9f7ba">
    1 år
</strong>                    <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed33c9f78a">
             
            <div class="c-tooltip__content">
                <time class="2023-10-16T06:29:16 c-date" data-uid="673ed33c9f762">Mon 16 Oct 2023</time>
            </div>
            <span class="c-tooltip__arrow"></span>
                    </div>
    </div>
</span>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="673ed33c9f819">
    This is a reply comment text
</p>                
                    </div>

            </div>
</div>
    <div class="c-comment c-comment__is-reply"  data-uid="673ed33c9f84c">

    <div class="c-comment__col">
            <!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-uid="673ed33c9f87a">
                    <img src="https://picsum.photos/id/342/70/70" class="c-avatar__image" alt="Peter Olsson" aria-label="Peter Olsson"/>
        
        
            </div>
    </div>

    <div class="c-comment__col">

        <div class="c-comment__top">

                <span class="c-link c-comment__link" id="" target="_top" data-uid="673ed33c9f8d2">
        <!-- typography.blade.php   original: h6 -->
<h4 class="c-typography c-comment__author c-typography__variant--h4" data-uid="673ed33c9f8a8">
    Peter Olsson
</h4>
        </span>
        
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="673ed33c9f98b">
    <span class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="673ed33c9f92c" data-uid="673ed33c9f92c">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed33c9f92c">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed33c9f95a">
    just now
</strong>                    <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed33c9f92c">
             
            <div class="c-tooltip__content">
                <time class="2024-11-21T06:29:16 c-date" data-uid="673ed33c9f905">Thu 21 Nov 2024</time>
            </div>
            <span class="c-tooltip__arrow"></span>
                    </div>
    </div>
</span>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="673ed33c9f9b6">
    This is a reply comment text, it was written now.
</p>                
                    </div>

            </div>
</div>
    <div class="c-comment c-comment__is-reply"  data-uid="673ed33c9f9eb">

    <div class="c-comment__col">
            <!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-uid="673ed33c9fa20">
                    <img src="https://picsum.photos/id/342/70/70" class="c-avatar__image" alt="Peter Olsson" aria-label="Peter Olsson"/>
        
        
            </div>
    </div>

    <div class="c-comment__col">

        <div class="c-comment__top">

                <span class="c-link c-comment__link" id="" target="_top" data-uid="673ed33c9fa77">
        <!-- typography.blade.php   original: h6 -->
<h5 class="c-typography c-comment__author c-typography__variant--h5" data-uid="673ed33c9fa4e">
    Peter Olsson
</h5>
        </span>
        
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="673ed33c9fb33">
    <span class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="673ed33c9fad4" data-uid="673ed33c9fad4">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed33c9fad4">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed33c9fb02">
    2 minuter
</strong>                    <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed33c9fad4">
             
            <div class="c-tooltip__content">
                <time class="2024-11-21T06:27:16 c-date" data-uid="673ed33c9faad">Thu 21 Nov 2024</time>
            </div>
            <span class="c-tooltip__arrow"></span>
                    </div>
    </div>
</span>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="673ed33c9fb5d">
    This is a reply comment text, it was written two minutes ago.
</p>                
                    </div>

            </div>
</div>
    <div class="c-comment c-comment__is-reply"  data-uid="673ed33c9fb91">

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

    <div class="c-comment__col">

        <div class="c-comment__top">

                <span class="c-link c-comment__link" id="" target="_top" data-uid="673ed33c9fc15">
        <!-- typography.blade.php   original: h6 -->
<h6 class="c-typography c-comment__author c-typography__variant--h6" data-uid="673ed33c9fbec">
    Peter Olsson
</h6>
        </span>
        
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="673ed33c9fccf">
    <span class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="673ed33c9fc71" data-uid="673ed33c9fc71">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed33c9fc71">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed33c9fc9e">
    5 timmar
</strong>                    <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed33c9fc71">
             
            <div class="c-tooltip__content">
                <time class="2024-11-21T01:29:16 c-date" data-uid="673ed33c9fc4a">Thu 21 Nov 2024</time>
            </div>
            <span class="c-tooltip__arrow"></span>
                    </div>
    </div>
</span>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                                <!-- typography.blade.php   original: p -->
<p class="c-typography c-comment__bubble--inner c-typography__variant--body" data-uid="673ed33c9fcf8">
    This is a reply comment text, it was written five hours ago.
</p>                
                    </div>

            </div>
</div>
    <div class="c-comment"  data-uid="673ed33c9fd2b">

    <div class="c-comment__col">
            <!-- avatar.blade.php -->
    <div class="c-avatar c-avatar--size-md" data-uid="673ed33c9fd5b">
        
        
                    <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 class="c-link c-comment__link" id="" target="_top" data-uid="673ed33c9fdb1">
        <!-- typography.blade.php   original: h6 -->
<h6 class="c-typography c-comment__author c-typography__variant--h6" data-uid="673ed33c9fd89">
    Peter Svensson
</h6>
        </span>
        
                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="673ed33c9fe7b">
    <span class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="673ed33c9fe1c" data-uid="673ed33c9fe1c">
    <div class="c-tooltip__wrapper" tabindex="1" aria-describedby="673ed33c9fe1c">
            <!-- typography.blade.php   original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="673ed33c9fe4a">
    1 år
</strong>                    <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="673ed33c9fe1c">
             
            <div class="c-tooltip__content">
                <time class="2023-11-21T06:29:16 c-date" data-uid="673ed33c9fde5">Tue 21 Nov 2023</time>
            </div>
            <span class="c-tooltip__arrow"></span>
                    </div>
    </div>
</span>
</span>                    </div>
    
        <div class="c-comment__bubble c-comment__bubble--color-dark">
                
                            <div class="c-comment__bubble--inner">
                    This comment <u>content</u> was sent through the slot.
                </div>
                    </div>

            </div>
</div>
<?php 
    $labels = [
        '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'
        ]
    ];
?>



@comment([
    'author' => 'Peter Svensson',
    'author_url' => '#',
    'text' => 'This is a comment text',
    'icon' => 'face',
    'date' => date("Y-m-d H:i:s", strtotime('-2 years -6 months -3days -5 hours -10 minutes -20 seconds')),
    'dateLabels' => $labels['dateLabels'],
    'dateLabelsPlural' => $labels['dateLabelsPlural']
])
    @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/id/338/70/70',
    'date' => date("Y-m-d H:i:s", strtotime('-1 year -1 month -5 days')),
    'is_reply' => true,
    'dateLabels' => $labels['dateLabels'],
    'dateLabelsPlural' => $labels['dateLabelsPlural']
])
@endcomment

@comment([
    'author' => 'Peter Olsson',
    'text' => 'This is a reply comment text, it was written now.',
    'icon' => 'face',
    'author_image' => 'https://picsum.photos/id/342/70/70',
    'date' => date("Y-m-d H:i:s"),
    'is_reply' => true,
    'dateLabels' => $labels['dateLabels'],
    'dateLabelsPlural' => $labels['dateLabelsPlural']
])
@endcomment

@comment([
    'author' => 'Peter Olsson',
    'text' => 'This is a reply comment text, it was written two minutes ago.',
    'icon' => 'face',
    'author_image' => 'https://picsum.photos/id/342/70/70',
    'date' => date("Y-m-d H:i:s", strtotime('-2 minutes')),
    'is_reply' => true,
    'dateLabels' => $labels['dateLabels'],
    'dateLabelsPlural' => $labels['dateLabelsPlural']
])
@endcomment

@comment([
    'author' => 'Peter Olsson',
    'text' => 'This is a reply comment text, it was written five hours ago.',
    'icon' => 'face',
    'author_image' => 'https://picsum.photos/id/64/70/70',
    'date' => date("Y-m-d H:i:s", strtotime('-5 hours')),
    'is_reply' => true,
    'dateLabels' => $labels['dateLabels'],
    'dateLabelsPlural' => $labels['dateLabelsPlural']
])
@endcomment

@comment([
    'author' => 'Peter Svensson',
    'date' => date("Y-m-d H:i:s", strtotime('-1 year')),
    'dateLabels' => $labels['dateLabels'],
    'dateLabelsPlural' => $labels['dateLabelsPlural']
])
    This comment <u>content</u> 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 ago 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: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Comment/comment.json