<div class="efl-comments-item">
<div class="efl-comments-item__user-detail">
<img alt="Tim Bamber" src="/assets/example-content/user-comment-1.jpg" loading="lazy">
<div class="efl-comments-item__user-detail--name">
<p>Tim Bamber</p>
<span data-posted-time="2023-07-11T11:10:20Z"></span>
</div>
</div>
<div class="efl-comments-item__message">
Oh my. God, you sound in the same Position as me. Firstly, massive well done for stepping upto the plate. I don't have this at matches but do at training. I started by posting things in our WhatsApp chat.. Like The respect code and bluntly putting that spectators do not know what the coach has Told the kids so to please only shout positive encouragement, then put it bluntly.. Anyone not respecting this will be asked to leave..
</div>
<div class="efl-comments-item__like-reply">
<a class="efl-comments-item__message--like">6</a>
<a class="efl-comments-item__message--reply">Reply</a>
</div>
<div class="efl-comments-item__reply-comment hidden"></div>
</div>
No notes defined.
{
"userImage": "/assets/example-content/user-comment-1.jpg",
"name": "Tim Bamber",
"time": "2023-07-11T11:10:20Z",
"comment": "Oh my. God, you sound in the same Position as me. Firstly, massive well done for stepping upto the plate. I don't have this at matches but do at training. I started by posting things in our WhatsApp chat.. Like The respect code and bluntly putting that spectators do not know what the coach has Told the kids so to please only shout positive encouragement, then put it bluntly.. Anyone not respecting this will be asked to leave..",
"like": "6"
}
.efl-comments-item {
padding-top: 3.2rem;
margin-top: 3.2rem;
border-top: 2px solid $grey-light;
&__user-detail {
display: flex;
margin-bottom: 1.6rem;
img {
width: 4.8rem;
height: 4.8rem;
border-radius: 50%;
object-fit: contain;
}
&--name {
margin-left: 1.6rem;
p {
@extend .efl-heading-6;
font-size: 2rem;
line-height: 1.6rem;
text-transform: uppercase;
color: $blue;
margin-bottom: 0.6rem;
}
span {
@extend .efl-p-small;
color: $color-interface-light;
}
}
}
&__message {
@extend .efl-p-large;
color: $color-interface-light;
margin-bottom: 1.6rem;
}
&__like-reply {
display: flex;
justify-content: space-between;
a {
@extend .efl-p-small;
display: flex;
font-weight: 700;
letter-spacing: -0.16px;
text-transform: uppercase;
align-items: center;
cursor: pointer;
&.efl-comments-item__message--like {
padding: 0.4rem 1.2rem;
padding-left: 0;
&::before {
content: '';
display: flex;
width: 2.6rem;
height: 2.5rem;
background-image: url('./assets/images/thumb_up.svg');
background-repeat: no-repeat;
margin-right: 1rem;
}
&.active {
background-color: $light-blue;
border-radius: 1.6rem;
padding: 0.4rem 1.2rem;
&::before {
background-repeat: no-repeat;
background-image: url('./assets/images/thumb_up_active.svg');
}
}
}
&.efl-comments-item__message--reply {
&::before {
content: '';
display: flex;
width: 2.6rem;
height: 2.5rem;
background-image: url('./assets/images/reply.svg');
margin-right: 1rem;
}
}
}
}
&__reply-comment {
margin-top: 3.2rem;
}
}
<div class="efl-comments-item">
<div class="efl-comments-item__user-detail">
<img alt="{{name}}" src="{{userImage}}" loading="lazy">
<div class="efl-comments-item__user-detail--name">
<p>{{name}}</p>
<span data-posted-time="{{time}}"></span>
</div>
</div>
<div class="efl-comments-item__message">
{{comment}}
</div>
<div class="efl-comments-item__like-reply">
<a class="efl-comments-item__message--like">{{like}}</a>
{{#unless replyHide}}
<a class="efl-comments-item__message--reply">Reply</a>
{{/unless}}
</div>
<div class="efl-comments-item__reply-comment hidden"></div>
</div>