<section class="product-review">
<div class="product-review__summary">
<div class="review review--summary ">
<div class="review__summary-handle">
<div class="review__summary-rating">
<div class="rating " aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
</div>
<div class="review__summary-content">
<div class="review__summary-amount">
<span class="review__amount-qty"> 3,9/5 sterren (32 reviews) </span>
</div>
<div class="review__summary-add-review">
<button class="button modal-trigger review__summary-add" data-modal-trigger="addReview" type="button">
Review plaatsen
<svg class="icon button__icon review__summary-add--icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="product-review__reviews">
<ul class="list">
<li class="list__item">
<div class="review ">
<div class="review__details">
<div class="rating review__rating" aria-label="Average rating 80%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 80%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
</div>
<div class="review__details">
<div class="review__heading">
<span class="review__title">
Klaas Akkerman
</span>
<span class="review__date">
11/06/2020
</span>
</div>
<div class="review__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper.
</div>
</div>
</div>
</li>
<li class="list__item">
<div class="review ">
<div class="review__details">
<div class="rating review__rating" aria-label="Average rating 50%" title="2,5/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 50%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
2,5/5 sterren
</div>
</div>
<div class="review__details">
<div class="review__heading">
<span class="review__title">
Nick van Bruggen
</span>
<span class="review__date">
10/06/2020
</span>
</div>
<div class="review__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper.
</div>
</div>
</div>
</li>
<li class="list__item">
<div class="review ">
<div class="review__details">
<div class="rating review__rating" aria-label="Average rating 92%" title="4,8/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 92%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4,8/5 sterren
</div>
</div>
<div class="review__details">
<div class="review__heading">
<span class="review__title">
Henk Valk
</span>
<span class="review__date">
07/06/2020
</span>
</div>
<div class="review__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper.
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
<section class="product-review">
<div class="product-review__summary">
{{ render '@review--summary' summary merge=true }}
</div>
<div class="product-review__reviews">
<ul class="list">
{{#each reviews }}
<li class="list__item">
{{ render '@review--default' this }}
</li>
{{/each}}
</ul>
</div>
{{!-- {{ render '@review--add' }} --}}
</section>
{
"title": "Customer reviews",
"summary": {
"amountLink": true,
"reviewsQty": "32"
},
"reviews": [
{
"rating": {
"ariaLabel": "Average rating 80%",
"title": "4/5 sterren",
"star": {
"attributes": "style=\"width: 80%\""
},
"class": "review__rating"
},
"author": "Klaas Akkerman",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper. ",
"date": "11/06/2020"
},
{
"rating": {
"ariaLabel": "Average rating 50%",
"title": "2,5/5 sterren",
"star": {
"attributes": "style=\"width: 50%\""
},
"class": "review__rating"
},
"author": "Nick van Bruggen",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper. ",
"date": "10/06/2020"
},
{
"rating": {
"ariaLabel": "Average rating 92%",
"title": "4,8/5 sterren",
"star": {
"attributes": "style=\"width: 92%\""
},
"class": "review__rating"
},
"author": "Henk Valk",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus odio, rutrum a augue nec, varius vehicula odio. Praesent at nibh vehicula libero pellentesque vulputate. Ut malesuada dolor eget purus condimentum, eget porttitor est luctus. Donec tristique, tortor a iaculis mollis, ex erat gravida nunc, quis viverra tortor neque quis eros. Pellentesque lorem sapien, consequat non vestibulum ac, pellentesque vitae risus. Nunc eleifend magna id fringilla semper. ",
"date": "07/06/2020"
}
]
}
$product-review__borders: 1px solid $gray-light;
.product-review {
&__title {
margin-bottom: $spacer--large;
text-transform: uppercase;
font-size: $font-size-large;
font-weight: $font-weight-base;
letter-spacing: 2px;
}
&__reviews {
padding: 10px;
@include mq($screen-m) {
padding: 0;
}
.review {
border-bottom: $product-review__borders;
}
.list__item {
margin: 0;
padding: 0;
}
}
.review--summary {
background: rgba(236, 245, 244, 0.65);
border-radius: 5px;
padding: $spacer--075;
border: 2px solid rgba(222, 249, 246, 0.95);
.rating {
display: flex;
flex-basis: 20%;
@include mq($screen-m) {
padding: 0;
margin-right: $spacer--extra-large;
}
}
.rating__title {
display: none;
}
& a {
border-radius: $border-radius--small;
padding: $spacer--1;
color: $gray;
font-family: $font-family-saira;
@include mq($screen-m) {
background: $white;
}
}
}
.list__item:last-child {
.review {
margin-bottom: 0;
}
}
.toolbar {
margin-bottom: $spacer--extra-large;
}
}
There are no notes for this item.