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
- With search field pre-filled
- main
- groups
- Grouped by entity (Products / Posts / Help)
States
- default
- Results found
- empty
- No results
- loading
- Live search
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.