Search Results Highlights
A search results list with matched query terms highlighted in every title and snippet, entity type tabs with counts, and per result meta lines.
A search results list with matched query terms highlighted in every title and snippet, entity type tabs with counts, and per result meta lines.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Search Results Highlights is the results page for a workspace wide query: the search term onboarding checklist is marked inside every title and snippet, entity tabs (All, Docs, Tasks, People) carry live counts and filter the list, and each hit ends with a meta line naming its type, location, and freshness, like Document in Docs / People Ops, updated Jun 28.
A small Highlighted component splits each string on the query pattern and wraps the odd segments in a mark, so the highlighting stays in sync with the term without dangerous HTML. Tab counts come from filtering the same results array, and the active tab narrows the list in one pass.
Reach for this block as the results surface behind a global search, wired to your search index and its per-type counts. Highlighting matched terms lets users judge relevance at a glance instead of opening each hit to see why it surfaced.
A natural flow around it on an Application Pro page:
Before
After
One strong use is workspace search across docs, tasks, and people. Other highlighted result lists:
Tip: highlight in the snippet, not just the title; a marked term inside the surrounding sentence is what tells users the match is relevant.