Comment
Comment Thread Example
Comment is a standalone component
Peter Olsson
This is a reply comment text
Peter Olsson
This is a reply comment text, it was written now.
Peter Olsson
This is a reply comment text, it was written two minutes ago.
Peter Olsson
This is a reply comment text, it was written five hours ago.
Peter Svensson
This comment content was sent through the slot.
<div class="c-comment" data-uid="68b86c68ae884">
<div class="c-comment__col">
<!-- avatar.blade.php -->
<div class="c-avatar c-avatar--size-md" data-uid="68b86c68ae8f3">
<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" data-material-symbol="face" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="68b86c68ae930">
</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="68b86c68ae9f9">
<!-- typography.blade.php original: h6 -->
<h2 class="c-typography c-comment__author c-typography__variant--h2" data-uid="68b86c68ae99c">
Peter Svensson
</h2>
</a>
<!-- typography.blade.php original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="68b86c68aeb84">
<span class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="id_68b86c68aeb0d" data-uid="68b86c68aeb0d">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="68b86c68aeb0d">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="68b86c68aeb49">
2 år ago
</strong> <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="68b86c68aeb0d">
<div class="c-tooltip__content">
<time class=" c-date" data-date="2023-02-28T11:17:00" datetime="2023-02-28T11:17:00" data-tooltip="Tue 28 Feb 2023" data-uid="68b86c68aeab5">Tue 28 Feb 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="68b86c68aebb0">
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" href="#reply" target="_top" aria-label="Reply" data-uid="68b86c68ae602">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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" data-material-symbol="reply" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86c68ae74b">
</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" href="#like" target="_top" aria-label="Like" data-uid="68b86c68ae7ab">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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" data-material-symbol="thumb_up" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="68b86c68ae7e5">
</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="68b86c68aebf2">
<div class="c-comment__col">
<!-- avatar.blade.php -->
<div class="c-avatar c-avatar--size-md" data-uid="68b86c68aec21">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="Peter Olsson" data-uid="68b86c68aec82">
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/id/338/70/70"
alt="Peter Olsson"
/> </figure>
</div>
</div>
<div class="c-comment__col">
<div class="c-comment__top">
<div class="c-link c-comment__link" id="" data-uid="68b86c68aed2a">
<!-- typography.blade.php original: h6 -->
<h3 class="c-typography c-comment__author c-typography__variant--h3" data-uid="68b86c68aed04">
Peter Olsson
</h3>
</div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="68b86c68aedea">
<span class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="id_68b86c68aed91" data-uid="68b86c68aed91">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="68b86c68aed91">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="68b86c68aedbd">
1 år ago
</strong> <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="68b86c68aed91">
<div class="c-tooltip__content">
<time class=" c-date" data-date="2024-07-29T16:27:20" datetime="2024-07-29T16:27:20" data-tooltip="Mon 29 Jul 2024" data-uid="68b86c68aed6a">Mon 29 Jul 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="68b86c68aee10">
This is a reply comment text
</p>
</div>
</div>
</div>
<div class="c-comment c-comment__is-reply" data-uid="68b86c68aee3e">
<div class="c-comment__col">
<!-- avatar.blade.php -->
<div class="c-avatar c-avatar--size-md" data-uid="68b86c68aee66">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="Peter Olsson" data-uid="68b86c68aee8b">
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/id/342/70/70"
alt="Peter Olsson"
/> </figure>
</div>
</div>
<div class="c-comment__col">
<div class="c-comment__top">
<div class="c-link c-comment__link" id="" data-uid="68b86c68aef0a">
<!-- typography.blade.php original: h6 -->
<h4 class="c-typography c-comment__author c-typography__variant--h4" data-uid="68b86c68aeee7">
Peter Olsson
</h4>
</div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="68b86c68aefb3">
<span class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="id_68b86c68aef60" data-uid="68b86c68aef60">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="68b86c68aef60">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="68b86c68aef88">
just now
</strong> <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="68b86c68aef60">
<div class="c-tooltip__content">
<time class=" c-date" data-date="2025-09-03T16:27:20" datetime="2025-09-03T16:27:20" data-tooltip="Wed 03 Sep 2025" data-uid="68b86c68aef3b">Wed 03 Sep 2025</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="68b86c68aefd6">
This is a reply comment text, it was written now.
</p>
</div>
</div>
</div>
<div class="c-comment c-comment__is-reply" data-uid="68b86c68af005">
<div class="c-comment__col">
<!-- avatar.blade.php -->
<div class="c-avatar c-avatar--size-md" data-uid="68b86c68af02e">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="Peter Olsson" data-uid="68b86c68af053">
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/id/342/70/70"
alt="Peter Olsson"
/> </figure>
</div>
</div>
<div class="c-comment__col">
<div class="c-comment__top">
<div class="c-link c-comment__link" id="" data-uid="68b86c68af0cf">
<!-- typography.blade.php original: h6 -->
<h5 class="c-typography c-comment__author c-typography__variant--h5" data-uid="68b86c68af0ac">
Peter Olsson
</h5>
</div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="68b86c68af19b">
<span class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="id_68b86c68af125" data-uid="68b86c68af125">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="68b86c68af125">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="68b86c68af15c">
2 minuter ago
</strong> <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="68b86c68af125">
<div class="c-tooltip__content">
<time class=" c-date" data-date="2025-09-03T16:25:20" datetime="2025-09-03T16:25:20" data-tooltip="Wed 03 Sep 2025" data-uid="68b86c68af101">Wed 03 Sep 2025</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="68b86c68af1c4">
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="68b86c68af201">
<div class="c-comment__col">
<!-- avatar.blade.php -->
<div class="c-avatar c-avatar--size-md" data-uid="68b86c68af228">
<!-- image.blade.php -->
<figure class="c-image c-avatar__image c-image--cover" aria-label="Peter Olsson" data-uid="68b86c68af24c">
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/id/64/70/70"
alt="Peter Olsson"
/> </figure>
</div>
</div>
<div class="c-comment__col">
<div class="c-comment__top">
<div class="c-link c-comment__link" id="" data-uid="68b86c68af2e7">
<!-- typography.blade.php original: h6 -->
<h6 class="c-typography c-comment__author c-typography__variant--h6" data-uid="68b86c68af2c0">
Peter Olsson
</h6>
</div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="68b86c68af3a8">
<span class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="id_68b86c68af34a" data-uid="68b86c68af34a">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="68b86c68af34a">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="68b86c68af378">
5 timmar ago
</strong> <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="68b86c68af34a">
<div class="c-tooltip__content">
<time class=" c-date" data-date="2025-09-03T11:27:20" datetime="2025-09-03T11:27:20" data-tooltip="Wed 03 Sep 2025" data-uid="68b86c68af31f">Wed 03 Sep 2025</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="68b86c68af3d0">
This is a reply comment text, it was written five hours ago.
</p>
</div>
</div>
</div>
<div class="c-comment" data-uid="68b86c68af402">
<div class="c-comment__col">
<!-- avatar.blade.php -->
<div class="c-avatar c-avatar--size-md" data-uid="68b86c68af445">
<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">
<div class="c-link c-comment__link" id="" data-uid="68b86c68af490">
<!-- typography.blade.php original: h6 -->
<h6 class="c-typography c-comment__author c-typography__variant--h6" data-uid="68b86c68af46d">
Peter Svensson
</h6>
</div>
<!-- typography.blade.php original: span -->
<span class="c-typography c-comment__date c-typography__variant--meta" data-uid="68b86c68af53f">
<span class="c-tooltip c-tooltip--top c-tooltip--hidden" original-placement="c-tooltip--top" id="id_68b86c68af4e4" data-uid="68b86c68af4e4">
<div class="c-tooltip__wrapper" tabindex="1" aria-describedby="68b86c68af4e4">
<!-- typography.blade.php original: strong -->
<strong class="c-typography u-margin__right--1 c-typography__variant--strong" data-uid="68b86c68af50d">
1 år ago
</strong> <div class="c-tooltip__container" aria-hidden="true" role="tooltip" id="68b86c68af4e4">
<div class="c-tooltip__content">
<time class=" c-date" data-date="2024-09-03T16:27:20" datetime="2024-09-03T16:27:20" data-tooltip="Tue 03 Sep 2024" data-uid="68b86c68af4c1">Tue 03 Sep 2024</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.
@endcommentBlade 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. |
Peter Svensson
This is a comment text