Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
SearchTop

Displays the most searched terms by customers.

This section displays the most searched terms by customers. This component is part of the Search feature.
Example
Code

Usage

Import the component


_10
import { SearchTop, SearchTopTerm } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:

_10
@import "@faststore/ui/src/components/molecules/SearchTop/styles.scss";


Design tokens

Local tokenDefault value/Global token linked
--fs-search-top-padding-topvar(--fs-spacing-2)
--fs-search-top-padding-rightvar(--fs-spacing-3)
--fs-search-top-padding-bottomvar(--fs-search-top-padding-top)
--fs-search-top-padding-leftvar(--fs-search-top-padding-right)
--fs-search-top-transition-propertyvar(--fs-transition-property)
--fs-search-top-transition-functionvar(--fs-transition-function)
--fs-search-top-transition-timingvar(--fs-transition-timing)

Nested Elements

Header

Local tokenDefault value/Global token linked
--fs-search-top-header-padding-topvar(--fs-spacing-1)
--fs-search-top-header-padding-bottomvar(--fs-search-top-header-padding-top)

Title

Local tokenDefault value/Global token linked
--fs-search-top-title-sizevar(--fs-text-size-lead)
--fs-search-top-title-line-height1.5

Item

Local tokenDefault value/Global token linked
--fs-search-top-item-column-gapvar(--fs-spacing-1)
--fs-search-top-item-text-sizevar(--fs-text-size-2)
--fs-search-top-item-line-height1.25
--fs-search-top-item-bkg-color-hover
var(--fs-color-tertiary-bkg-hover)

Data attributes

You can target and override SearchTop styles using the following data attributes:
data-fs-search-top
data-fs-search-top-header
data-fs-search-top-title
data-fs-search-top-item
data-fs-search-top-item-link
data-fs-search-top-item-badge

Props

SearchTop

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-top-search
titlestringTitle attribute for the <section> tag rendered by this component.Top Search

SearchTopTerm

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-top-search-term
value*stringSearch term to be shown.
linkPropsPartial<LinkProps<LinkElementType>>Props for the `<Link>` rendered by this component.
index*numberCurrent term's position in a list of search terms.
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
On this page