<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&#x3D;" 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&#x3D;" 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&#x3D;" 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&#x3D;" 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&#x3D;" 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&#x3D;" 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"
    }
  ]
}
  • Content:
    $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;
                    }
                }
            }
        }
    }
    
  • URL: /components/raw/product-review/_product-review.scss
  • Filesystem Path: build/components/Organisms/product-review/_product-review.scss
  • Size: 1.9 KB

No notes defined.