Review

<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/08/2018
            </div>
        </div>

        <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>

        <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>
<div
    class="
        review
        {{ class }}
    "
    {{{ attributes }}}
>
    <div class="review__image">
        {{ render '@image' }}
    </div>

    <div class="review__details">
        <div class="review__wrapper">
            <div class="review__author-details">
                <h3 class="review__author-name">
                    {{ author }}
                </h3>
                <div class="review__author-description">
                    {{ authorDescription }}
                </div>
            </div>

            <div class="review__date">
                {{ date }}
            </div>
        </div>

        {{ render '@rating' rating }}

        <h4 class="review__title">
            {{ title }}
        </h4>

        <div class="review__description">
            <p>
                {{ content }}
            </p>
        </div>

        <div class="review__links">
            <div class="review__links-column">
                <a
                    href="#"
                    class="review__links-btn"
                >
                    {{ render '@icon' icons.share }}
                    <span>
                        {{ shareText }}
                    </span>
                </a>
            </div>

            <div class="review__links-column">
                <span class="review__links-legend">
                    {{ reviewText }}
                </span>

                <a
                    href="#"
                    class="review__links-btn"
                >
                    {{ render '@icon' icons.thumbUp }}
                    <span>1</span>
                </a>

                <a
                    href="#"
                    class="review__links-btn"
                >
                    {{ render '@icon' icons.thumbDown }}
                    <span>1</span>
                </a>
            </div>

        </div>
    </div>
</div>
{
  "rating": {
    "ariaLabel": "Average rating 72%",
    "star": {
      "attributes": "style=\"width: 72%\""
    },
    "class": "review__rating"
  },
  "author": "Anna Maria",
  "authorDescription": "Verified Buyer",
  "shareText": "Share",
  "reviewText": "Was This Review Helpful?",
  "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": "07/08/2018",
  "icons": {
    "thumbUp": {
      "id": "thumb-up",
      "title": "Thumb up"
    },
    "thumbDown": {
      "id": "thumb-down",
      "title": "Thumb down"
    },
    "share": {
      "id": "share"
    }
  }
}
  • Content:
    $review__width                          : 100% !default;
    
    $review__wrapper-height                 : $spacer--extra-large !default;
    $review__wrapper-margin                 : $spacer--medium 0 !default;
    $review-width--summary                  : auto !default;
    
    $review__title-font-weight              : $font-weight-bold !default;
    $review__title-text-transform           : capitalize !default;
    $review__title-font-family              : $font-family-base !default;
    $review__title-product-margin           : $spacer 0 !default;
    $review__title-text-transform           : none !default;
    
    $review__author-text-transform          : capitalize !default;
    $review__author-font-family             : $font-family-base !default;
    $review__author-margin                  : 0 !default;
    $review__author-description-color       : $gray-dark !default;
    $review__author-description-font-size   : $font-size-small !default;
    $review__author-font-weight             : $font-weight-bold !default;
    
    $review__date-color                     : $color-secondary !default;
    $review__date-font-size                 : $font-size-small !default;
    
    $review__submit-btn-width               : 100% !default;
    $review__submit-btn-width\@medium       : auto !default;
    
    $review__required-info-margin           : $spacer--large 0 0 !default;
    $review__required-info-font-size        : $font-size-small !default;
    
    $review__summary-handle-display         : flex !default;
    $review__summary-handle-flex-flow       : row wrap !default;
    $review__summary-handle-align-items     : center !default;
    $review__summary-handle-justify-content : flex-start !default;
    $review__summary-handle-width           : auto !default;
    
    $review__amount-text-decoration         : none !default;
    $review__amount-letter-spacing          : 2px !default;
    $review__amount-margin                  : 0 $spacer 0 0 !default;
    $review__amount-margin\@medium          : 0 $spacer 0 0 !default;
    $review__amount-padding                 : 0 !default;
    $review__amount-color                   : $gray-dark !default;
    
    $review__summary-add-width              : 100% !default;
    $review__summary-add-padding            : 0 !default;
    $review__summary-add-text-decoration    : underline !default;
    $review__summary-add-text-align         : left !default;
    $review__summary-add-color              : $gray-dark !default;
    
    $review__details-max-width              : calc(100% - #{$spacer--extra-large}) !default;
    $review__details-flex-basis             : calc(100% - #{$spacer--extra-large}) !default;
    $review__details-padding                : 0 0 0 $spacer--medium !default;
    
    $review__image-max-width                : $spacer--extra-large !default;
    $review__image-width                    : $spacer--extra-large !default;
    $review__image-flex-basis               : $spacer--extra-large !default;
    $review__image-border-radius            : 50% !default;
    $review__image-height                   : auto !default;
    
    $review__rating-legend-color            : $gray-dark !default;
    
    $review__fieldset-padding               : 0 0 $spacer--extra-large * 2 0 !default;
    $review__fieldset-margin                : 0 auto !default;
    $review__fieldset-max-width             : 650px !default;
    $review__field-margin                   : $spacer--semi-medium 0 !default;
    
    $review__rating-margin                  : 0 0 $spacer--medium !default;
    $review__description-margin             : 0 0 $spacer--medium !default;
    $review__description-paragraph-font-size: $font-size-base !default;
    $review__description-paragraph-color    : $gray-dark !default;
    
    $review__links-column-margin-first-child: $spacer--large 0 !default;
    $review__links-margin                   : 0 0 $spacer--large !default;
    $review__links-btn-color                : $gray-dark !default;
    $review__links-btn-text-decoration      : none !default;
    $review__links-btn-padding              : 0 $spacer--medium 0 0 !default;
    $review__links-btn-icon-fill            : $gray-dark !default;
    $review__links-btn-icon-margin          : 0 $spacer 0 0 !default;
    $review__links-legend-color             : $gray-dark !default;
    $review__links-legend-margin            : 0 $spacer--medium 0 0 !default;
    
    // add variant
    $review__padding--add                   : $spacer--semi-large 0 0 !default;
    $review__margin--add                    : 0 0 $spacer--medium !default;
    $review__border--add                    : $border-base !default;
    $review__border-width--add              : 0 0 1px 0 !default;
    
    // summary variant
    $review__rating-margin--summary         : 0 $spacer 0 0 !default;
    $review__rating-padding--summary        : 0 !default;
    
  • URL: /components/raw/review/_review-variables.scss
  • Filesystem Path: build/components/Organisms/review/_review-variables.scss
  • Size: 4.6 KB
  • Content:
    @import 'review-variables';
    
    .review {
        width: $review__width;
    
        @include mq($screen-m) {
            display: flex;
            flex-flow: row nowrap;
        }
    
        &--add {
            padding: $review__padding--add;
            margin: $review__margin--add;
            border: $review__border--add;
            border-width: $review__border-width--add;
    
            @include mq($screen-m) {
                display: block;
            }
        }
    
        &--summary {
            width: $review-width--summary;
    
            .rating {
                margin: $review__rating-margin--summary;
                padding: $review__rating-padding--summary;
            }
        }
    
        &__details {
            max-width: $review__details-max-width;
            flex-basis: $review__details-flex-basis;
            padding: $review__details-padding;
        }
    
        &__image {
            max-width: $review__image-max-width;
            flex-basis: $review__image-flex-basis;
    
            .image {
                max-width: $review__image-max-width;
                width: $review__image-width;
                height: $review__image-height;
                border-radius: $review__image-border-radius;
            }
        }
    
        &__rating-legend {
            color: $review__rating-legend-color;
        }
    
        &__wrapper {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            height: $review__wrapper-height;
            margin: $review__wrapper-margin;
        }
    
        &__title {
            font-weight: $review__title-font-weight;
            text-transform: $review__title-text-transform;
            font-family: $review__title-font-family;
        }
    
        &__title-product {
            display: block;
            margin: $review__title-product-margin;
            text-transform: $review__title-text-transform;
        }
    
        &__author-name {
            font-weight: $review__author-font-weight;
            text-transform: $review__author-text-transform;
            font-family: $review__author-font-family;
            margin: $review__author-margin;
        }
    
        &__author-description {
            color: $review__author-description-color;
            font-size: $review__author-description-font-size;
        }
    
        &__date {
            display: block;
            color: $review__date-color;
            font-size: $review__date-font-size;
        }
    
        &__fieldset {
            max-width: $review__fieldset-max-width;
            margin: $review__fieldset-margin;
            padding: $review__fieldset-padding;
        }
    
        &__field {
            margin: $review__field-margin;
        }
    
        &__submit-btn {
            width: $review__submit-btn-width;
    
            @include mq($screen-m) {
                width: $review__submit-btn-width\@medium;
            }
        }
    
        &__required-info {
            margin: $review__required-info-margin;
            font-size: $review__required-info-font-size;
        }
    
        &__summary-handle {
            display: $review__summary-handle-display;
            flex-flow: $review__summary-handle-flex-flow;
            align-items: $review__summary-handle-align-items;
            justify-content: $review__summary-handle-justify-content;
            width: $review__summary-handle-width;
        }
    
        &__amount {
            margin: $review__amount-margin;
            padding: $review__amount-padding;
            letter-spacing: $review__amount-letter-spacing;
            text-decoration: $review__amount-text-decoration;
            color: $review__amount-color;
            white-space: nowrap;
    
            @include mq($screen-m) {
                margin: $review__amount-margin\@medium;
            }
    
            &.focus-visible {
                @include focus-inline();
            }
        }
    
        &__summary-add {
            width: $review__summary-add-width;
            padding: $review__summary-add-padding;
            text-decoration: $review__summary-add-text-decoration;
            text-align: $review__summary-add-text-align;
            color: $review__summary-add-color;
    
            &.focus-visible {
                @include focus-inline();
            }
            .review-customer-view & {
                display: none;
            }
        }
    
        &__rating {
            margin: $review__rating-margin;
        }
    
        &__description {
            margin: $review__description-margin;
    
            p {
                font-size: $review__description-paragraph-font-size;
                color: $review__description-paragraph-color;
            }
        }
    
        &__links {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin: $review__links-margin;
    
            .button {
                padding: 0;
            }
        }
    
        &__links-column {
            display: flex;
            align-items: center;
    
            &:first-child {
                margin: $review__links-column-margin-first-child;
            }
        }
    
        &__links-btn {
            display: flex;
            align-items: center;
            background: transparent;
            border: none;
            cursor: pointer;
            border-radius: 0;
            color: $review__links-btn-color;
            text-decoration: $review__links-btn-text-decoration;
            padding: $review__links-btn-padding;
    
            &:last-child {
                padding-right: 0;
            }
    
            .icon {
                fill: $review__links-btn-icon-fill;
                margin: $review__links-btn-icon-margin;
            }
        }
    
        &__links-legend {
            color: $review__links-legend-color;
            margin: $review__links-legend-margin;
        }
    }
    
  • URL: /components/raw/review/_review.scss
  • Filesystem Path: build/components/Organisms/review/_review.scss
  • Size: 5.2 KB

No notes defined.