Build Assets
Hero Pattern

Search Results Page

Full-page search with filters, result count, and sorted results.

Platform: webTags: search, results, filters, query, discovery

Layout

Left filter panel (240px, collapsible) + right results area. Query in persistent search bar at top. Result count + sort control below query. Results in list or grid. Pagination at bottom.

Content Slots

required

Search bar

Persistent at top with current query. Clear and re-search without losing filters.

required

Result count + sort

"124 results for 'design systems'" + Sort dropdown (Relevance, Date, etc.)

required

Filter panel

Left column. Faceted filters: checkboxes for categories, ranges for dates/numbers. Clear filters link at top.

required

Active filters

Filter chips above results showing applied filters — each removable individually.

required

Result cards

Title (link) + snippet with query terms highlighted + metadata (date, author, type).

required

Empty state

"No results for 'xyz'" + suggestions: check spelling, try different terms, remove filters.

Hierarchy Rules

  • Recognition over recall: show result metadata so users can identify the right item without clicking
  • Highlight query terms in snippets — makes relevance obvious at a glance
  • Filter counts: show how many results each filter will yield before clicking
  • Never show zero-result filters — hide filters that would produce empty results

Source Topic

ux psychology

Recognition vs. Recall

Why showing beats asking