Skip to main content

Search results

Search results are a group of results related to a search query. The results have a consistent pattern and hierarchy for grouping information and give users a quick summary of what to expect with each result.

Example

Best practices

Search results should appear in the user flow at a point where they are expecting results from a query. For instance, after entering a keyword in a search component and hitting Enter or clicking on the search glyph. The results should be placed in close proximity to the search component to associate the interaction pattern between results and search box.

Do

  • Show up to 10 search results per page.
  • Use pagination for more than 10 search results.

Don’t

  • Show more than 10 search results per page.

Related

Hyperlink
Image
Metatext
Pagination
Paragraph
Price
Product placement
Scroll
Search

Development

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

Code and preview

Default

<div class="m-search-results" data-grid="col-12">
    <div data-grid="col-12">
        <div data-grid="col-10" class="f-result-item">
            <h3 class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook1/" class="c-hyperlink">Facebook &ndash; Windows Apps on Microsoft Store</a>
            </h3>
            <span class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook2/" class="c-hyperlink">http://www.microsoft.com/en-us/store/apps/facebook/</a>
            </span>
            <p class="c-paragraph-3">Paragraph text. Lorem ipsum sit amet dolor.</p>
        </div>
        <div data-grid="col-10" class="f-result-item">
            <h3 class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook3/" class="c-hyperlink">Skype
                    <strong>Facebook</strong> &ndash; Chat
                    <strong>Facebook</strong> Friends on Skype</a>
            </h3>
            <span class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook4/" class="c-hyperlink">http://www.microsoft.com/en-us/store/apps/facebook/</a>
            </span>
            <p class="c-paragraph-3">Paragraph text. Lorem ipsum sit amet dolor.</p>
        </div>
        <div data-grid="col-10" class="f-result-item">
            <h3 class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook5/" class="c-hyperlink">
                    <strong>Facebook</strong>?? - Microsoft Community on Microsoft Store</a>
            </h3>
            <span class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook6/" class="c-hyperlink">http://www.microsoft.com/en-us/store/apps/facebook/</a>
            </span>
            <p class="c-paragraph-3">Paragraph text. Lorem ipsum sit amet dolor.</p>
        </div>
        <div data-grid="col-10" class="f-result-item">
            <h3 class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook7/" class="c-hyperlink">Connect to
                    <strong>Facebook</strong> (Power Query) - Excel</a>
            </h3>
            <span class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook8/" class="c-hyperlink">http://www.microsoft.com/en-us/store/apps/facebook/</a>
            </span>
            <p class="c-paragraph-3">Paragraph text. Lorem ipsum sit amet dolor.</p>
        </div>
        <div data-grid="col-10" class="f-result-item">
            <h3 class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook9/" class="c-hyperlink">
                    <strong>Facebook</strong> - social.msdn.microsoft.com</a>
            </h3>
            <span class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook10/" class="c-hyperlink">http://www.microsoft.com/en-us/store/apps/facebook/</a>
            </span>
            <p class="c-paragraph-3">Paragraph text. Lorem ipsum sit amet dolor.</p>
        </div>
    </div>
    <div data-grid="col-12">
        <a href="http://www.getmwf.com" class="c-hyperlink">Show all</a>
    </div>
</div>

Default with price

<div class="m-search-results" data-grid="col-12">
    <div data-grid="col-12">
        <div data-grid="col-10" class="f-result-item">
            <h3 class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook11/" class="c-hyperlink">Facebook--Windows Apps on Microsoft Store</a>
            </h3>
            <span class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook12/" class="c-hyperlink">http://www.microsoft.com/en-us/store/apps/facebook/</a>
            </span>
            <p class="c-paragraph-3">Paragraph text. Lorem ipsum sit amet dolor.</p>
        </div>
        <div data-grid="col-2" class="f-result-item-details">
            <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="USD">
                <span>$</span>
                <span itemprop="price">1,000</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>1/1/2016</div>
        <div data-grid="col-10" class="f-result-item">
            <h3 class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook13/" class="c-hyperlink">Skype
                    <strong>Facebook</strong>--Chat
                    <strong>Facebook</strong> Friends on Skype</a>
            </h3>
            <span class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook14/" class="c-hyperlink">http://www.microsoft.com/en-us/store/apps/facebook/</a>
            </span>
            <p class="c-paragraph-3">Paragraph text. Lorem ipsum sit amet dolor.</p>
        </div>
        <div data-grid="col-2" class="f-result-item-details">
            <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="USD">
                <span>$</span>
                <span itemprop="price">1,000</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>1/1/2016</div>
        <div data-grid="col-10" class="f-result-item">
            <h3 class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook15/" class="c-hyperlink">
                    <strong>Facebook</strong>?? - Microsoft Community</a>
            </h3>
            <span class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook16/" class="c-hyperlink">http://www.microsoft.com/en-us/store/apps/facebook/</a>
            </span>
            <p class="c-paragraph-3">Paragraph text. Lorem ipsum sit amet dolor.</p>
        </div>
        <div data-grid="col-2" class="f-result-item-details">
            <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="USD">
                <span>$</span>
                <span itemprop="price">1,000</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>1/1/2016</div>
        <div data-grid="col-10" class="f-result-item">
            <h3 class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook17/" class="c-hyperlink">Connect to
                    <strong>Facebook</strong> (Power Query) - Excel</a>
            </h3>
            <span class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook18/" class="c-hyperlink">http://www.microsoft.com/en-us/store/apps/facebook/</a>
            </span>
            <p class="c-paragraph-3">Paragraph text. Lorem ipsum sit amet dolor.</p>
        </div>
        <div data-grid="col-2" class="f-result-item-details">
            <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="USD">
                <span>$</span>
                <span itemprop="price">1,000</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>1/1/2016</div>
        <div data-grid="col-10" class="f-result-item">
            <h3 class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook19/" class="c-hyperlink">
                    <strong>Facebook</strong> - social.msdn.microsoft.com</a>
            </h3>
            <span class="f-hyperlink">
                <a href="http://www.microsoft.com/en-us/store/apps/facebook20/" class="c-hyperlink">http://www.microsoft.com/en-us/store/apps/facebook/</a>
            </span>
            <p class="c-paragraph-3">Paragraph text. Lorem ipsum sit amet dolor.</p>
        </div>
        <div data-grid="col-2" class="f-result-item-details">
            <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="USD">
                <span>$</span>
                <span itemprop="price">1,000</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>1/1/2016</div>
    </div>
    <div data-grid="col-12">
        <a href="http://www.getmwf.com" class="c-hyperlink">Show all</a>
    </div>
</div>