# Component

Search allows users to quickly find products on our sites.

This can include previous searches, saved searches, products suggestions, and trending products.

Search states

# Rules

Do

  • Make the default text useful. E.g. "Search for dresses"
  • Provide relevant suggestions

Don't

  • Don't clutter suggestions, it could annoy the user if what they expect to find isn't there.

# Structure

Search structure

# Typography

Font size Line height Font weight
16pt 24pt Regular

# Functionality

As the user starts typing, the search input reduces in size and as that happens, the search button moves into the viewport.

Suggestions should be displayed above the input. The search input itself sits above the keyboard, making it reachable for the user.

Search motion

Last Updated: 10/19/2020, 10:26:39 AM