atomic-query-summary

This is for:

Developer

The atomic-query-summary component displays information about the current range of results and the request duration (e.g., "Results 1-10 of 123 in 0.47 seconds").

Introduction

This component provides feedback about the size of results in a query submission, helping the user maintain the context of the search, helping to make more informed query reformulations. Enabling an optional duration property to display the duration of query execution can be helpful when benchmarking and optimizing a search page.

User Experience and Best Practices

Usage Notes

  • The Query Summary provides feedback to the user about their query submission, helping make informed decisions about reformulating their query.

  • The query summary is usually displayed on the left side of a search page, below the search box, and above the results.

  • Displaying duration doesn’t offer much value to a user, but can be a useful tool for developers and site admins.

Shadow Parts

Part Description

container

The container for the whole summary.

duration

The container for the duration.

highlight

The summary highlights.

placeholder

The query summary placeholder used while the search interface is initializing.

query

The summary highlighted query.

results

The container for the results.