Skip to main content

Additional information

Additional information is a module which succinctly puts together details about any item that can be purchased from the store. It is intended to help users to learn more about the item they’re about to purchase.

Example

  • Publisher
  • Microsoft Corporation
  • © Microsoft Corporation
  • Release date
  • 11/4/15
  • Approximate size
  • 155.2 MB
ESRB Badge Image for rating: Everyone

Everyone

All Ages

  • Digital Purchases
  • Shares Info
  • Users Interact

Permissions
Uses your location
Access your Internet connection
Access your Internet connection and act as a server.

  • Installation
  • You can use this product on as many devices as you like
  • Learn more
  • Mail and Calendar support
  • In-app purchases
  • None
  • Privacy and terms
  • Mail and Calendar privacy policy
  • Mail and Calendar license terms
  • Microsoft Services Agreement
  • Languages supported
  • English (United States)
Report this app to Microsoft
Additional information on a default theme

Best practices

Use the additional information module to serve the users miscellaneous information about a product in a compact and responsive layout. Consider including examples such as details about the publisher, file size, age rating, permissions, languages supported, and so on, based on the nature of the item.

The module displays in 4 columns across VP4-6 and stacks as the available screen width reduces. Each column can contain multiple separate fields which do not reflow into other columns. The first row of each field is strong / bold, which should be used to communicate the title.

Do

  • Make yourself aware of legal obligations that concern must-have information for that item or market. If you are unsure, consult your LCA contact.
  • Try and maintain a minimum of 4 fields within the module. This will allow the module to display one field per column in the largest viewports.
  • Apply content toggle with “show more” to list groups containing more than 4 rows of information. This will keep the module compact while giving the users an option to toggle the additional text should they want to read it.

Don’t

  • Use long passages of text to within the fields. The module should contain to-the-point information that’s broken down into list items which can be consumed efficiently.

Also known as

More information
Item details

Related

Content toggle
Hyperlink
List
Age rating

Development

Code and preview

Default additional information

  • Publisher
  • Electronic Arts
  • Copyright © 2016
  • Release date
  • 11/4/15
  • Approximate size
  • 00.00 GB
Placeholder with grey background

Teen

Suitable for 13+

  • Blood and gore
  • Adult themes

Permissions
Uses your location
Uses your webcam
Uses your microphone

  • Multiplayer
  • Online and local
  • Coop
  • Online and local
  • In-app purchases
  • $0.99-$9.99
  • Installation
  • This game can be installed on up to 10 Windows 10 devices
  • Languages supported
  • English (United States)
Report this app to Microsoft
<section class="m-additional-information">
    <div data-grid="col-12 stack-2">
        <div data-grid="col-6">
            <div data-grid="col-6">
                <ul class="c-list f-bare f-lean">
                    <li>
                        <strong>Publisher</strong>
                    </li>
                    <li>Electronic Arts</li>
                    <li>Copyright &copy; 2016</li>
                </ul>
                <ul class="c-list f-bare f-lean">
                    <li>
                        <strong>Release date</strong>
                    </li>
                    <li>11/4/15</li>
                </ul>
                <ul class="c-list f-bare f-lean">
                    <li>
                        <strong>Approximate size</strong>
                    </li>
                    <li>00.00 GB</li>
                </ul>
            </div>
            <div data-grid="col-6">
                <div class="c-age-rating">
                    <img class="c-image" src="http://placehold.it/56x56" alt="Placeholder with grey background">
                    <p class="c-label">Teen</p>
                    <p class="c-paragraph">Suitable for 13+</p>
                    <div class="c-content-toggle">
                        <ul class="c-list f-bare f-lean" id="learn-more" data-f-expanded="false">
                            <li>Blood and gore</li>
                            <li>Adult themes</li>
                        </ul>
                        <button data-f-more="More" data-f-less="Less" data-f-show="0" aria-hidden="true">More</button>
                    </div>
                </div>
                <div class="c-content-toggle">
                    <p id="content-toggle-target" data-f-expanded="false">
                        <strong>Permissions</strong>
                        <br>Uses your location
                        <br>Uses your webcam
                        <br>Uses your microphone
                        <br>
                    </p>
                    <button data-f-more="Show more" data-f-less="Show less" data-f-show="3" aria-hidden="true">Show more</button>
                </div>
            </div>
        </div>
        <div data-grid="col-6">
            <div data-grid="col-6">
                <ul class="c-list f-bare f-lean">
                    <li>
                        <strong>Multiplayer</strong>
                    </li>
                    <li>Online and local</li>
                </ul>
                <ul class="c-list f-bare f-lean">
                    <li>
                        <strong>Coop</strong>
                    </li>
                    <li>Online and local</li>
                </ul>
                <ul class="c-list f-bare f-lean">
                    <li>
                        <strong>In-app purchases</strong>
                    </li>
                    <li>$0.99-$9.99</li>
                </ul>
            </div>
            <div data-grid="col-6">
                <ul class="c-list f-bare f-lean">
                    <li>
                        <strong>Installation</strong>
                    </li>
                    <li>This game can be installed on up to 10 Windows 10 devices</li>
                </ul>
                <ul class="c-list f-bare f-lean">
                    <li>
                        <strong>Languages supported</strong>
                    </li>
                    <li>English (United States)</li>
                </ul>
                <ul class="c-list f-bare f-lean">
                    <li>
                        <strong>Additional terms</strong>
                    </li>
                    <li>
                        <a href="http://www.getmwf.com" class="c-hyperlink">Store terms of use</a>
                    </li>
                </ul>
                <a href="http://www.getmwf.com" class="c-hyperlink">Report this app to Microsoft</a>
            </div>
        </div>
    </div>
</section>