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.