Skip to main content

System requirements

The system requirements section shows the customer the minimum and recommended settings for an app or game PDP.

Example

Minimum
OS Windows 10 version 10586
Architecture x64
Input Integrated keyboard, Integrated mouse
Notes Not specified
Recommended
OS Windows 10 version 10586 or higher
Architecture x64
Input Keyboard, mouse, game controller, HoloLens
Notes OS: 64-bit Windows 10
Processor: Intel Core i5 @ 3.5GHz+ or AMD FX 6-core
Memory: 8GB RAM, 4GB VRAM
System requirements on a default theme

Best practices

Use the system requirements module to spell out the requisite hardware and software requirements corresponding to an app, game, or store item. It helps customers determine the compatibility of a product before they purchase or download it from the store.

Do

  • Mention the recommended specifications in addition to the minimum requirements.
  • Use the select menu to enlist various canvases that the app or game may be compatible with, such as PC, phone, or Xbox.

Don’t

  • Leave the module blank. Consider removing the section altogether if no information is available.

Also known as

Minimum requirements
Hardware requirements

Related

Table

Development

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

Code and preview

Default

Minimum
Item BravoDescription paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi.
Item charlieDescription sentence.
Item DeltaDescription paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Item EchoDescription sentence.
Recommended
Item BravoDescription paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi.
Item charlieDescription sentence.
Item DeltaDescription paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Item EchoDescription sentence.
<div data-grid="col-12 pad-12x stack-2" class="m-system-requirements">
    <div data-grid="col-6">
        <div class="c-table f-divided">
            <table>
                <caption>Minimum</caption>
                <tbody>
                    <tr>
                        <th scope="row">Item Bravo</th>
                        <td>Description paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi.</td>
                    </tr>
                    <tr>
                        <th scope="row">Item charlie</th>
                        <td>Description sentence.</td>
                    </tr>
                    <tr>
                        <th scope="row">Item Delta</th>
                        <td>Description paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    </tr>
                    <tr>
                        <th scope="row">Item Echo</th>
                        <td>Description sentence.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div data-grid="col-6">
        <div class="c-table f-divided">
            <table>
                <caption>Recommended</caption>
                <tbody>
                    <tr>
                        <th scope="row">Item Bravo</th>
                        <td>Description paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi.</td>
                    </tr>
                    <tr>
                        <th scope="row">Item charlie</th>
                        <td>Description sentence.</td>
                    </tr>
                    <tr>
                        <th scope="row">Item Delta</th>
                        <td>Description paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                    </tr>
                    <tr>
                        <th scope="row">Item Echo</th>
                        <td>Description sentence.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Single column

Minimum
Item BravoDescription paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi.
Item charlieDescription sentence.
Item DeltaDescription paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Item GammaDescription sentence.
<div data-grid="col-12 pad-12x stack-2" class="m-system-requirements f-single-column">
    <div data-grid="col-12" class="c-table f-divided">
        <table>
            <caption>Minimum</caption>
            <tbody>
                <tr>
                    <th scope="row">Item Bravo</th>
                    <td>Description paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi.</td>
                </tr>
                <tr>
                    <th scope="row">Item charlie</th>
                    <td>Description sentence.</td>
                </tr>
                <tr>
                    <th scope="row">Item Delta</th>
                    <td>Description paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                </tr>
                <tr>
                    <th scope="row">Item Gamma</th>
                    <td>Description sentence.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>