The "Learn more" icon or text link is an interactive element that opens a modal providing more information about Buy with Prime. This feature is beneficial for shoppers encountering Buy with Prime for the first time. It allows shoppers to access more details without leaving the current page.

Learn more modal details

Ingress: The information icon, or “Learn more” link positioned at the end of the delivery estimate opens the learn more modal. Call-to-action: The main action on this page is the “Learn more” button that leads to additional details on the Buy with Prime landing page on Amazon.com. Interaction: Expanding the FAQ questions at the bottom of the page opens a view with more details.

Placement

Ingress

	Positioned at the end of the delivery estimate: The "Learn more" information icon should be placed directly after the delivery estimate.
	Positioned in the delivery estimate card: The “Learn more” link should be placed directly after the delivery estimate.

Modal

Displayed as a bottom sheet: The "Learn more" modal appears as a bottom sheet, allowing users to access additional information easily while staying in context, maintaining consistency with mobile design patterns.

Sign-in card

Displayed from the sign-in card: This "Learn more" modal appears when selecting the "Learn More" option on the sign-in card. For details, see Sign-in Card

Dos and don'ts

Design guidelines

Responsiveness

Widget width ranges from 300-740px.