Skip to main content

Age rating

An age rating provides concise and objective information about the age appropriateness of content in video games, apps, and media which helps consumers make informed choices. Age rating is also sometimes referred to as ESRB rating or content rating.

Example

ESRB badge for Mature rating

Mature

Generally suitable for ages 17 and up

May contain intense violence, blood and gore, sexual content and/or strong language.

Default age rating

Best practices

Use age rating on product detail pages of apps, games, and media to draw attention to the age appropriateness of the items which the user will potentially purchase, download, or consume.

Do

  • Place age rating at a predictable spot on the page. This helps consumers get acquainted to looking at a standard location when they want to know what kind of content to expect.
  • Acquaint yourself with the various standardized rating systems, such as the ESRB (Entertainment Software Rating Board) ratings guide.
  • Stick to using unaltered and standardized image assets as defined by the ratings system in use.

Don’t

  • Don’t deviate from the predefined rating categories.
  • Don't use custom text or images within the ratings component. If at all the standard descriptors need tweaking, consult your content publisher.

Also known as

Age indicator
ESRB rating
Content rating
Game rating

Related

Content toggle
Image

Options

The age rating always consists of a badge image, a single-line title, and one line of description in its collapsed state with a content toggle which can be used to show or hide rating description details.

Development

  • Schema definition: The age-rating schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Paragraph Age rating

Placeholder with grey background and dimension watermark without any imagery

Heading

Age rating text

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada odio. Nullam blandit imperdiet ligula, at feugiat lacus elementum sit amet.

<div class="c-age-rating">
    <img class="c-image" src="http://placehold.it/56x56" alt="Placeholder with grey background and dimension watermark without any imagery">
    <p class="c-label">Heading</p>
    <p class="c-paragraph">Age rating text</p>
    <div class="c-content-toggle">
        <p id="foo-learn-more" data-f-expanded="false">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet ligula nec urna dictum tempus. Mauris ac feugiat diam. Aenean eget euismod lacus, nec viverra dolor. Phasellus a lacinia dui, id iaculis ipsum. In vel malesuada
            odio. Nullam blandit imperdiet ligula, at feugiat lacus elementum sit amet.</p>
        <button data-f-more="More" data-f-less="Less" data-f-show="0" aria-hidden="true">More</button>
    </div>
</div>

List Age rating

Placeholder with grey background and dimension watermark without any imagery

Heading

Age rating text

  • Item 1
  • Item 2
  • Item 3
<div class="c-age-rating">
    <img class="c-image" src="http://placehold.it/56x56" alt="Placeholder with grey background and dimension watermark without any imagery">
    <p class="c-label">Heading</p>
    <p class="c-paragraph">Age rating text</p>
    <div class="c-content-toggle">
        <ul class="c-list f-bare f-lean" id="foo-content-toggle-unordered" data-f-expanded="false">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
        <button data-f-more="More" data-f-less="Less" data-f-show="0" aria-hidden="true">More</button>
    </div>
</div>

Age rating without toggle

Placeholder with grey background and dimension watermark without any imagery

Heading

Age rating text

<div class="c-age-rating">
    <img class="c-image" src="http://placehold.it/56x56" alt="Placeholder with grey background and dimension watermark without any imagery">
    <p class="c-label">Heading</p>
    <p class="c-paragraph">Age rating text</p>
</div>