<section class="product-review">
<div class="product-review__action">
<div class="
review
review--summary
">
<div class="review__summary-handle">
<div class="rating review__rating" aria-label="Average rating 72%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<a href="#" class="review__summary-add">
32 Reviews
</a>
</div>
</div>
<button class="button button--secondary-light product-review__write-btn" type="button" aria-label="button">
Write a review
</button>
</div>
<div class="
review
review--add
">
<h3 class="review__title">
Write a review
</h3>
<fieldset class="fieldset" aria-labelledby="rating-field-label">
<legend id="rating-field-label" class="rating-rate-legend review__rating-legend">
Score
</legend>
<div class="
rating
rating--rate
" role="listbox" aria-required="true" aria-labelledby="rating-field-label" tabindex="0">
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_1" class="
rating__star
rating__star--rate
" aria-label="Rate option, 1 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[1]" id="Rating_1" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_2" class="
rating__star
rating__star--rate
" aria-label="Rate option, 2 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[2]" id="Rating_2" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_3" class="
rating__star
rating__star--rate
" aria-label="Rate option, 3 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[3]" id="Rating_3" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_4" class="
rating__star
rating__star--rate
" aria-label="Rate option, 4 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[4]" id="Rating_4" value="16" class="radio__field">
</div>
<div class="rating__rate-item " role="option" aria-selected="false">
<label for="Rating_5" class="
rating__star
rating__star--rate
" aria-label="Rate option, 5 of 5. Click to vote">
<span class="
rating__indicator
"></span>
</label>
<input type="radio" name="ratings[5]" id="Rating_5" value="16" class="radio__field">
</div>
</div>
</fieldset>
<script src="/components/raw/rating/rating-rate.js"></script>
<fieldset class="fieldset review__fieldset">
<div class="input review__field">
<label class="
label
input__label
" for="review-nickname">
Nickname *
</label>
<input class="input__field " id="review-nickname" name="review-nickname" type="text" placeholder="" autocomplete="name">
</div>
<div class="input review__field">
<label class="
label
input__label
" for="review-summary">
Summary *
</label>
<input class="input__field " id="review-summary" name="review-summary" type="text" placeholder="" autocomplete="off">
</div>
<div class="input review__field">
<label class="
label
input__label
" for="review-text">
Review *
</label>
<textarea class="input__field input__field--textarea " id="review-text" name="review-text" placeholder="" autocomplete="off"></textarea>
</div>
<button class="button review__submit-btn" type="button" aria-label="button">
Post
</button>
<p class="review__required-info">
* Required fields
</p>
</fieldset>
</div>
<div class="product-review__reviews">
<ul class="list">
<li class="list__item">
<div class="
review
">
<div class="review__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</div>
<div class="review__details">
<div class="review__wrapper">
<div class="review__author-details">
<h3 class="review__author-name">
anna Maria
</h3>
<div class="review__author-description">
Verified Buyer
</div>
</div>
<div class="review__date">
17/08/2018
</div>
</div>
<div class="rating rating--secondary review__rating" aria-label="Average rating 72%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h4 class="review__title">
Review title
</h4>
<div class="review__description">
<p>
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.
</p>
</div>
<div class="review__links">
<div class="review__links-column">
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span>
Share
</span>
</a>
</div>
<div class="review__links-column">
<span class="review__links-legend">
Was This Review Helpful?
</span>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span>1</span>
</a>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span>1</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="list__item">
<div class="
review
">
<div class="review__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</div>
<div class="review__details">
<div class="review__wrapper">
<div class="review__author-details">
<h3 class="review__author-name">
John Smith
</h3>
<div class="review__author-description">
Verified Buyer
</div>
</div>
<div class="review__date">
07/08/2018
</div>
</div>
<div class="rating rating--secondary review__rating" aria-label="Average rating 62%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 62%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h4 class="review__title">
Good product
</h4>
<div class="review__description">
<p>
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.
</p>
</div>
<div class="review__links">
<div class="review__links-column">
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span>
Share
</span>
</a>
</div>
<div class="review__links-column">
<span class="review__links-legend">
Was This Review Helpful?
</span>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span>1</span>
</a>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span>1</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="list__item">
<div class="
review
">
<div class="review__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</div>
<div class="review__details">
<div class="review__wrapper">
<div class="review__author-details">
<h3 class="review__author-name">
Janusz Janusz
</h3>
<div class="review__author-description">
Verified Buyer
</div>
</div>
<div class="review__date">
07/09/2018
</div>
</div>
<div class="rating rating--secondary review__rating" aria-label="Average rating 92%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 92%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h4 class="review__title">
Lovie this product
</h4>
<div class="review__description">
<p>
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.
</p>
</div>
<div class="review__links">
<div class="review__links-column">
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span>
Share
</span>
</a>
</div>
<div class="review__links-column">
<span class="review__links-legend">
Was This Review Helpful?
</span>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span>1</span>
</a>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span>1</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="list__item">
<div class="
review
">
<div class="review__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</div>
<div class="review__details">
<div class="review__wrapper">
<div class="review__author-details">
<h3 class="review__author-name">
Grazyna Grazyna
</h3>
<div class="review__author-description">
Verified Buyer
</div>
</div>
<div class="review__date">
02/08/2018
</div>
</div>
<div class="rating rating--secondary review__rating" aria-label="Average rating 42%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 42%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h4 class="review__title">
Good but not enought
</h4>
<div class="review__description">
<p>
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.
</p>
</div>
<div class="review__links">
<div class="review__links-column">
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span>
Share
</span>
</a>
</div>
<div class="review__links-column">
<span class="review__links-legend">
Was This Review Helpful?
</span>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span>1</span>
</a>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span>1</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="list__item">
<div class="
review
">
<div class="review__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</div>
<div class="review__details">
<div class="review__wrapper">
<div class="review__author-details">
<h3 class="review__author-name">
Jan Kowalski
</h3>
<div class="review__author-description">
Verified Buyer
</div>
</div>
<div class="review__date">
03/07/2018
</div>
</div>
<div class="rating rating--secondary review__rating" aria-label="Average rating 77%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 77%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h4 class="review__title">
Recommended
</h4>
<div class="review__description">
<p>
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.
</p>
</div>
<div class="review__links">
<div class="review__links-column">
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span>
Share
</span>
</a>
</div>
<div class="review__links-column">
<span class="review__links-legend">
Was This Review Helpful?
</span>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span>1</span>
</a>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span>1</span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="list__item">
<div class="
review
">
<div class="review__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</div>
<div class="review__details">
<div class="review__wrapper">
<div class="review__author-details">
<h3 class="review__author-name">
anna Maria
</h3>
<div class="review__author-description">
Verified Buyer
</div>
</div>
<div class="review__date">
07/06/2018
</div>
</div>
<div class="rating rating--secondary review__rating" aria-label="Average rating 10%" title="" tabindex="0">
<div class="rating__star " role="presentation" style="width: 10%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h4 class="review__title">
Not recomennded
</h4>
<div class="review__description">
<p>
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.
</p>
</div>
<div class="review__links">
<div class="review__links-column">
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span>
Share
</span>
</a>
</div>
<div class="review__links-column">
<span class="review__links-legend">
Was This Review Helpful?
</span>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span>1</span>
</a>
<a href="#" class="review__links-btn">
<svg class="icon " role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span>1</span>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
<section class="product-review">
<div class="product-review__action">
{{ render '@review--summary' summary merge=true }}
{{ render '@button--secondary-light' reviewBtn }}
</div>
{{ render '@review--add' }}
<div class="product-review__reviews">
<ul class="list">
{{#each reviews }}
<li class="list__item">
{{ render '@review--default' this merge=true }}
</li>
{{/each}}
</ul>
</div>
</section>
{
"reviewBtn": {
"tag": "button",
"attributes": "type=\"button\" aria-label=\"button\"",
"text": "Write a review",
"class": "button--secondary-light product-review__write-btn"
},
"summary": {
"amountLink": false,
"reviewsQty": "32 Reviews"
},
"reviews": [
{
"rating": {
"ariaLabel": "Average rating 72%",
"star": {
"attributes": "style=\"width: 72%\""
},
"class": "rating--secondary review__rating"
},
"author": "anna Maria",
"title": "Review title",
"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": "17/08/2018"
},
{
"rating": {
"ariaLabel": "Average rating 62%",
"star": {
"attributes": "style=\"width: 62%\""
},
"class": "rating--secondary review__rating"
},
"author": "John Smith",
"title": "Good product",
"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/08/2018"
},
{
"rating": {
"ariaLabel": "Average rating 92%",
"star": {
"attributes": "style=\"width: 92%\""
},
"class": "rating--secondary review__rating"
},
"author": "Janusz Janusz",
"title": "Lovie this product",
"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/09/2018"
},
{
"rating": {
"ariaLabel": "Average rating 42%",
"star": {
"attributes": "style=\"width: 42%\""
},
"class": "rating--secondary review__rating"
},
"author": "Grazyna Grazyna",
"title": "Good but not enought",
"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": "02/08/2018"
},
{
"rating": {
"ariaLabel": "Average rating 77%",
"star": {
"attributes": "style=\"width: 77%\""
},
"class": "rating--secondary review__rating"
},
"author": "Jan Kowalski",
"title": "Recommended",
"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": "03/07/2018"
},
{
"rating": {
"ariaLabel": "Average rating 10%",
"star": {
"attributes": "style=\"width: 10%\""
},
"class": "rating--secondary review__rating"
},
"author": "anna Maria",
"title": "Not recomennded",
"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/2018"
}
]
}
$product-review__action-border-bottom : $border-base !default;
$product-review__action-padding : 0 0 $spacer--extra-large 0 !default;
$product-review__reviews : $spacer--large 0 !default;
$product-review__reviews-review-margin : 0 0 $spacer--large;
$product-review__reviews-review-border : $border-base;
$product-review__reviews-review-border-width: 0 0 $border-width-base 0;
.product-review {
&__action {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: $product-review__action-border-bottom;
padding: $product-review__action-padding;
.review {
&__summary-handle {
flex-wrap: wrap;
@include mq($screen-m) {
flex-wrap: nowrap;
justify-content: flex-start;
width: 100%;
max-width: none;
}
.review__rating {
margin-bottom: 0;
}
}
&__summary-add {
text-align: left;
flex-grow: 0;
@include mq($screen-m) {
flex-basis: auto;
}
&:focus {
@include focus-inline();
}
}
}
}
&__write-btn {
white-space: nowrap;
}
&__reviews {
padding: $product-review__reviews;
.review {
margin: $product-review__reviews-review-margin;
border: $product-review__reviews-review-border;
border-width: $product-review__reviews-review-border-width;
}
}
.list {
&__item {
&:last-child {
.review {
margin-bottom: 0;
}
}
}
}
}
No notes defined.