Skip to main content

Ratings and reviews

The ratings and reviews module is used on store PDP to give customers a snapshot of the overall app rating, a chart of the rating distribution, and reviews of a store item.

Example

User rating: 3/ 5

9/9/2016

John Smith

Platform: PC

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.

Was this review helpful?

22 out of 51 people found this helpful.

Ratings and reviews expanded on a default theme

Best practices

Use ratings and reviews to visually represent the user ratings of a product, service, article, or other content. If the product has more than one versions or runs on multiple platforms, customers get the ability to filter and scope the contents down to a version, platform, or star rating. The customer can also rate the product, submit their review, or rate another review for helpfulness through this module if they are signed in.

Do

  • Consider the impact of the user's login state on this module. Users may not be able to rate, review, or rate someone else's review for helpfulness unless they're signed in.
  • Use only MWF recommended colors to theme this module.

Don’t

  • Use very long strings for headings. Since this module is made up of several functionally intertwined pieces, long strings may cause layout issues either upon translation or in smaller viewports.

Also known as

App ratings
Reviews

Related

Rating
Paragraph
Heading
Button
Metatext
Hyperlink
Divider
Pagination
Content toggle
Histogram

Development

  • Schema definition: The ratings-and-reviews schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Default

Most helpful favorable review

User rating: 2/5

9/9/2016

Jane Doe

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.

Developer comment Jerome Doe responded on 9/9/2016

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.

34 out of 57 people found this helpful.

Most helpful critical review

User rating: 2/5

9/9/2016

John Smith

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.

22 out of 51 people found this helpful.

User rating: 2/5

9/9/2016

John Smith

Platform: Xbox

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.

22 out of 51 people found this helpful.

User rating: 2/5

9/9/2016

John Smith

Platform: PC

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.

22 out of 51 people found this helpful.

User rating: 2/5

9/9/2016

John Smith

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.

22 out of 51 people found this helpful.

User rating: 2/5

9/9/2016

John Smith

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.

22 out of 51 people found this helpful.

User rating: 2/5

9/9/2016

John Smith

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.

22 out of 51 people found this helpful.

User rating: 2/5

9/9/2016

John Smith

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.

22 out of 51 people found this helpful.

<div class="m-ratings-and-reviews" data-grid="col-12 stack-2">
    <div class="m-histogram">
        <div>
            <span>4</span>
            <div class="c-group">
                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                    <p class="x-screen-reader">Community rating:
                        <span itemprop="ratingValue">4</span>/
                        <span itemprop="bestRating">5</span>
                    </p>
                    <div></div>
                </div>
                <span>7,722,370</span>
            </div>
        </div>
        <ul>
            <li>
                <a href="#">5
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="91.3% of users" style="width:91.3%">
                            <span>4,564,568</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">4
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="15.7% of users" style="width:15.7%">
                            <span>783,652</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">3
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="0.1% of users" style="width:0.1%">
                            <span>4,564</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">2
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="0.5% of users" style="width:0.5%">
                            <span>24,352</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">1
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="46.9% of users" style="width:46.9%">
                            <span>2,345,234</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <button name="button" class="c-button" type="submit">Rate and review</button>
    <div data-grid="col-12">
        <h4 class="c-heading-4">Most helpful favorable review</h4>
    </div>
    <div data-grid="col-12 stack-2">
        <div data-grid="col-3">
            <div class="c-rating f-user-rated f-individual" data-value="2" data-max="5" itemscope itemtype="https://schema.org/Rating">
                <p class="x-screen-reader">User rating:
                    <span itemprop="ratingValue">2</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <p class="c-paragraph-3">9/9/2016</p>
            <p class="c-paragraph-3">Jane Doe</p>
        </div>
        <div data-grid="col-9">
            <h5 class="c-heading-6">Heading</h5>
            <div class="c-content-toggle">
                <p id="contentToggle10" data-f-expanded="false">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim
                    sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.</p>
                <button
                    data-f-more="More" data-f-less="Less" data-f-show="3" aria-hidden="true">More</button>
            </div>
            <div class="context-response">
                <div>
                    <span>Developer comment</span> Jerome Doe responded on 9/9/2016
                    <div class="c-content-toggle">
                        <p id="contentToggle11" data-f-expanded="false">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae
                            dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla
                            est hendrerit at.</p>
                        <button data-f-more="More" data-f-less="Less" data-f-show="3" aria-hidden="true">More</button>
                    </div>
                </div>
            </div>
            <div data-grid="col-12">
                <p class="c-meta-text">34 out of 57 people found this helpful.</p>
            </div>
        </div>
    </div>
    <div data-grid="col-12">
        <h4 class="c-heading-4">Most helpful critical review</h4>
    </div>
    <div data-grid="col-12 stack-2">
        <div data-grid="col-3">
            <div class="c-rating f-user-rated f-individual" data-value="2" data-max="5" itemscope itemtype="https://schema.org/Rating">
                <p class="x-screen-reader">User rating:
                    <span itemprop="ratingValue">2</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <p class="c-paragraph-3">9/9/2016</p>
            <p class="c-paragraph-3">John Smith</p>
        </div>
        <div data-grid="col-9">
            <h5 class="c-heading-6">Heading</h5>
            <div class="c-content-toggle">
                <p id="contentToggle1" data-f-expanded="false">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim
                    sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.</p>
                <button
                    data-f-more="More" data-f-less="Less" data-f-show="3" aria-hidden="true">More</button>
            </div>
            <div data-grid="col-12">
                <p class="c-meta-text">22 out of 51 people found this helpful.</p>
            </div>
        </div>
    </div>
    <div data-grid="col-12">
        <hr class="c-divider">
        <span>13-24 of 3,015 reviews</span>
        <span class="context-sort">Sort by:</span>
        <div class="c-select-menu">
            <a href="#" role="button" aria-expanded="false">Most helpful</a>
            <ul id="defaultSortBy" role="menu" class="c-menu" aria-hidden="true">
                <li class="c-menu-item" role="presentation">
                    <a aria-checked="false" role="menuitem" href="#">Sub Nav Link 1</a>
                </li>
                <li class="c-menu-item" role="presentation">
                    <a aria-checked="false" role="menuitem" href="#">Sub Nav Link 2</a>
                </li>
                <li class="c-menu-item" role="presentation">
                    <a aria-checked="false" role="menuitem" href="#">Sub Nav Link 3</a>
                </li>
                <li class="c-menu-item" role="presentation">
                    <a aria-checked="true" role="menuitem" href="#">Sub Nav Link 4</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-grid="col-12 stack-2">
        <div data-grid="col-3">
            <div class="c-rating f-user-rated f-individual" data-value="2" data-max="5" itemscope itemtype="https://schema.org/Rating">
                <p class="x-screen-reader">User rating:
                    <span itemprop="ratingValue">2</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <p class="c-paragraph-3">9/9/2016</p>
            <p class="c-paragraph-3">John Smith</p>
            <p class="c-meta-text">Platform: Xbox</p>
        </div>
        <div data-grid="col-9">
            <h5 class="c-heading-6">Heading</h5>
            <div class="c-content-toggle">
                <p id="contentToggle2" data-f-expanded="false">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim
                    sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.</p>
                <button
                    data-f-more="More" data-f-less="Less" data-f-show="3" aria-hidden="true">More</button>
            </div>
            <div data-grid="col-12">
                <p class="c-meta-text">22 out of 51 people found this helpful.</p>
            </div>
        </div>
    </div>
    <div data-grid="col-12 stack-2">
        <div data-grid="col-3">
            <div class="c-rating f-user-rated f-individual" data-value="2" data-max="5" itemscope itemtype="https://schema.org/Rating">
                <p class="x-screen-reader">User rating:
                    <span itemprop="ratingValue">2</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <p class="c-paragraph-3">9/9/2016</p>
            <p class="c-paragraph-3">John Smith</p>
            <p class="c-meta-text">Platform: PC</p>
        </div>
        <div data-grid="col-9">
            <h5 class="c-heading-6">Heading</h5>
            <div class="c-content-toggle">
                <p id="contentToggle3" data-f-expanded="false">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim
                    sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.</p>
                <button
                    data-f-more="More" data-f-less="Less" data-f-show="3" aria-hidden="true">More</button>
            </div>
            <div data-grid="col-12">
                <p class="c-meta-text">22 out of 51 people found this helpful.</p>
            </div>
        </div>
    </div>
    <div data-grid="col-12 stack-2">
        <div data-grid="col-3">
            <div class="c-rating f-user-rated f-individual" data-value="2" data-max="5" itemscope itemtype="https://schema.org/Rating">
                <p class="x-screen-reader">User rating:
                    <span itemprop="ratingValue">2</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <p class="c-paragraph-3">9/9/2016</p>
            <p class="c-paragraph-3">John Smith</p>
        </div>
        <div data-grid="col-9">
            <h5 class="c-heading-6">Heading</h5>
            <div class="c-content-toggle">
                <p id="contentToggle4" data-f-expanded="false">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim
                    sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.</p>
                <button
                    data-f-more="More" data-f-less="Less" data-f-show="3" aria-hidden="true">More</button>
            </div>
            <div data-grid="col-12">
                <p class="c-meta-text">22 out of 51 people found this helpful.</p>
            </div>
        </div>
    </div>
    <div data-grid="col-12 stack-2">
        <div data-grid="col-3">
            <div class="c-rating f-user-rated f-individual" data-value="2" data-max="5" itemscope itemtype="https://schema.org/Rating">
                <p class="x-screen-reader">User rating:
                    <span itemprop="ratingValue">2</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <p class="c-paragraph-3">9/9/2016</p>
            <p class="c-paragraph-3">John Smith</p>
        </div>
        <div data-grid="col-9">
            <h5 class="c-heading-6">Heading</h5>
            <div class="c-content-toggle">
                <p id="contentToggle5" data-f-expanded="false">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim
                    sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.</p>
                <button
                    data-f-more="More" data-f-less="Less" data-f-show="3" aria-hidden="true">More</button>
            </div>
            <div data-grid="col-12">
                <p class="c-meta-text">22 out of 51 people found this helpful.</p>
            </div>
        </div>
    </div>
    <div data-grid="col-12 stack-2">
        <div data-grid="col-3">
            <div class="c-rating f-user-rated f-individual" data-value="2" data-max="5" itemscope itemtype="https://schema.org/Rating">
                <p class="x-screen-reader">User rating:
                    <span itemprop="ratingValue">2</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <p class="c-paragraph-3">9/9/2016</p>
            <p class="c-paragraph-3">John Smith</p>
        </div>
        <div data-grid="col-9">
            <h5 class="c-heading-6">Heading</h5>
            <div class="c-content-toggle">
                <p id="contentToggle6" data-f-expanded="false">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim
                    sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.</p>
                <button
                    data-f-more="More" data-f-less="Less" data-f-show="3" aria-hidden="true">More</button>
            </div>
            <div data-grid="col-12">
                <p class="c-meta-text">22 out of 51 people found this helpful.</p>
            </div>
        </div>
    </div>
    <div data-grid="col-12 stack-2">
        <div data-grid="col-3">
            <div class="c-rating f-user-rated f-individual" data-value="2" data-max="5" itemscope itemtype="https://schema.org/Rating">
                <p class="x-screen-reader">User rating:
                    <span itemprop="ratingValue">2</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <p class="c-paragraph-3">9/9/2016</p>
            <p class="c-paragraph-3">John Smith</p>
        </div>
        <div data-grid="col-9">
            <h5 class="c-heading-6">Heading</h5>
            <div class="c-content-toggle">
                <p id="contentToggle7" data-f-expanded="false">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim
                    sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.</p>
                <button
                    data-f-more="More" data-f-less="Less" data-f-show="3" aria-hidden="true">More</button>
            </div>
            <div data-grid="col-12">
                <p class="c-meta-text">22 out of 51 people found this helpful.</p>
            </div>
        </div>
    </div>
    <div data-grid="col-12">
        <hr class="c-divider">
        <ul data-grid="col-12" class="m-pagination">
            <li>
                <a class="c-glyph" href="#" aria-label="Previous Page">
                    <span>Previous</span>
                </a>
            </li>
            <li class="f-active" data-label="Page 1">
                <span aria-label="Currently on page 1">1</span>
            </li>
            <li data-label="Currently on page 2">
                <a href="#" aria-label="Page 2">2</a>
            </li>
            <li data-label="Currently on page 3">
                <a href="#" aria-label="Page 3">3</a>
            </li>
            <li data-label="Currently on page 4">
                <a href="#" aria-label="Page 4">4</a>
            </li>
            <li data-label="Currently on page 5">
                <a href="#" aria-label="Page 5">5</a>
            </li>
            <li>
                <a class="c-glyph" href="#" aria-label="Next Page">
                    <span>Next</span>
                </a>
            </li>
        </ul>
    </div>
</div>

Expanded

User rating: 2/5

9/9/2016

John Smith

Platform: PC

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.

Was this review helpful?

22 out of 51 people found this helpful.

<div class="m-ratings-and-reviews" data-grid="col-12 stack-2">
    <div class="m-histogram">
        <div>
            <span>4</span>
            <div class="c-group">
                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                    <p class="x-screen-reader">Community rating:
                        <span itemprop="ratingValue">4</span>/
                        <span itemprop="bestRating">5</span>
                    </p>
                    <div></div>
                </div>
                <span>7,722,370</span>
            </div>
        </div>
        <ul>
            <li>
                <a href="#">5
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="91.3% of users" style="width:91.3%">
                            <span>4,564,568</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">4
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="15.7% of users" style="width:15.7%">
                            <span>783,652</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">3
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="0.1% of users" style="width:0.1%">
                            <span>4,564</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">2
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="0.5% of users" style="width:0.5%">
                            <span>24,352</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">1
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="46.9% of users" style="width:46.9%">
                            <span>2,345,234</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <button name="button" class="c-button" type="submit">Rate and review</button>
    <div data-grid="col-12 stack-2">
        <div data-grid="col-3">
            <div class="c-rating f-user-rated f-individual" data-value="2" data-max="5" itemscope itemtype="https://schema.org/Rating">
                <p class="x-screen-reader">User rating:
                    <span itemprop="ratingValue">2</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <p class="c-paragraph-3">9/9/2016</p>
            <p class="c-paragraph-3">John Smith</p>
            <p class="c-meta-text">Platform: PC</p>
        </div>
        <div data-grid="col-9">
            <h5 class="c-heading-6">Heading</h5>
            <div class="c-content-toggle">
                <p id="contentToggle8" data-f-expanded="false">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim
                    sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.</p>
                <button
                    data-f-more="More" data-f-less="Less" data-f-show="3" aria-hidden="true">More</button>
            </div>
            <div class="context-helpful-select">
                <span class="c-meta-text">Was this review helpful?</span>
                <span class="c-group">
                    <button name="button" class="c-button">YES</button>
                    <button name="button" class="c-button">NO</button>
                    <button name="button" class="c-button">REPORT</button>
                </span>
            </div>
            <div data-grid="col-12">
                <p class="c-meta-text">22 out of 51 people found this helpful.</p>
            </div>
        </div>
    </div>
</div>

Sign in

Sign in to rate and review

User rating: 2/5

9/9/2016

John Smith

Platform: PC

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.

Was this review helpful?

22 out of 51 people found this helpful.

<div class="m-ratings-and-reviews" data-grid="col-12 stack-2">
    <div class="m-histogram">
        <div>
            <span>4</span>
            <div class="c-group">
                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                    <p class="x-screen-reader">Community rating:
                        <span itemprop="ratingValue">4</span>/
                        <span itemprop="bestRating">5</span>
                    </p>
                    <div></div>
                </div>
                <span>7,722,370</span>
            </div>
        </div>
        <ul>
            <li>
                <a href="#">5
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="91.3% of users" style="width:91.3%">
                            <span>4,564,568</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">4
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="15.7% of users" style="width:15.7%">
                            <span>783,652</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">3
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="0.1% of users" style="width:0.1%">
                            <span>4,564</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">2
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="0.5% of users" style="width:0.5%">
                            <span>24,352</span>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">1
                    <span class="c-glyph"></span>
                    <span class="x-screen-reader">Stars</span>
                    <div>
                        <div aria-label="46.9% of users" style="width:46.9%">
                            <span>2,345,234</span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <p class="c-meta-text">Sign in to rate and review</p>
    <button name="button" class="c-button" type="submit">Sign in</button>
    <div data-grid="col-12 stack-2">
        <div data-grid="col-3">
            <div class="c-rating f-user-rated f-individual" data-value="2" data-max="5" itemscope itemtype="https://schema.org/Rating">
                <p class="x-screen-reader">User rating:
                    <span itemprop="ratingValue">2</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <p class="c-paragraph-3">9/9/2016</p>
            <p class="c-paragraph-3">John Smith</p>
            <p class="c-meta-text">Platform: PC</p>
        </div>
        <div data-grid="col-9">
            <h5 class="c-heading-6">Heading</h5>
            <div class="c-content-toggle">
                <p id="contentToggle9" data-f-expanded="false">Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed mattis tellus. Fusce ut nunc varius, porta sem cursus, pretium augue. In hac habitasse platea dictumst. Proin gravida nisl neque. Etiam vitae dignissim
                    sapien, ac pulvinar ante. Vivamus libero odio, rhoncus tristique velit a, efficitur consequat lacus. Praesent lorem dui, feugiat non ligula in, maximus venenatis tellus. Praesent tempor pharetra nisi, sed fringilla est hendrerit at.</p>
                <button
                    data-f-more="More" data-f-less="Less" data-f-show="3" aria-hidden="true">More</button>
            </div>
            <div class="context-helpful-select">
                <span class="c-meta-text">Was this review helpful?</span>
                <span class="c-group">
                    <button name="button" class="c-button">YES</button>
                    <button name="button" class="c-button">NO</button>
                    <button name="button" class="c-button">REPORT</button>
                </span>
            </div>
            <div data-grid="col-12">
                <p class="c-meta-text">22 out of 51 people found this helpful.</p>
            </div>
        </div>
    </div>
</div>