ecommerce pattern

Search results

Results page for site-wide search query.

When to use it

User submits a search query from header search.

  • Top result is the obvious answer
  • Suggest spelling corrections
  • Group by entity type

Layout regions

  • header
  • main
  • groups

States

  • default
  • empty
  • loading

Example

<Container><h1>Results for "{q}"</h1><Stack size="6"><GroupSection title="Products" results={products} /><GroupSection title="Articles" results={articles} /></Stack></Container>

The full Search results pattern specifies 2 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.

Build the Search results pattern in your project.