If you have any project questions, concerns, or contribution ideas, join our #pwa Slack channel. Find out how to create an account by visiting Community Resources

Title bar component

Description Pages used Reference image
Title bar Product Title bar
Title bar - Dresses Category Title bar - dresses

Visual specifications

For long titles, the content wraps and becomes two lines. If the title is longer than two lines, the content is clipped and appended with an ellipsis.

The price is vertically centered in the bar.

Page states

  • Refresh - loads a cached version

Interactions

  • Scroll up - Component disappears from the top on scroll and appended to the “Add to cart” bar.
  • Scroll down - Not visible until the user scrolls to the top of the page.
  • Page refresh - TBD