The address preview component is a preview of the user's configured address. It is used for address preview on My Account and shipping and/or billing address selection on Checkout.

<aside> ℹ️ Usually, styling this element takes from-to: 4-6h

</aside>

Where this element can be seen?

An address preview can be found on the following elements:

• Account page
• Checkout page (for logged-in users)

How should this element be designed?

The address preview should be displayed in the following states:

• On my account page, the address preview has no state.
• In checkout, the address can be either selected or not selected.

Additionally, the design should provide this information:

• In the header of element near the address number is mentioned if address is default shipping and/or billing address.
• View for 320px screen sizes and tablet
• At least 3 address preview cards should be displayed to demonstrate placement and spacing
• Different text length should be used to demonstrate wrapping

Address preview on the checkout page

Address preview on the account page

Design example #1

Design example #2

How to develop styles for this element?

The MyAccountAddressTable component is responsible for the rendering of the address preview in the My Account. The CheckoutAddressTable component is responsible for the rendering of the address preview in the Checkout and this component extends MyAccountAddressTable.

This component is rendered in the corresponding Address Book components, MyAccountAddressBook and CheckoutAddressBook.

Address preview is HTML table which inherits styling from _table.scss and KeyValueTable.style.scss.

A radio button is falsy developed, it is simply SVG, which is changing color depending on selected/unselected state.

Implementation example #1