Look and Feel UI Examples {#uc_ui_config_examples}
==================================================

These examples show the different preview screens for each look and feel customization feature:

Button List {#uc_ui_config_ex_button_list}
==========================================

This example shows the button list:

#### Figure:

Screen 1: Button List ![Image that shows the Unified Checkout Look and Feel UI button list.](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/unified-checkout/images/uc-ui-config-button-list-548x632.svg/jcr:content/renditions/original)

Contact Details {#uc_ui_config_ex_contact}
==========================================

This example shows the contact details that appear during checkout:

#### Figure:

Screen 2: Contact Details ![Image that shows the Unified Checkout Look and Feel UI contact details.](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/unified-checkout/images/uc-ui-config-contact-details-548x632.svg/jcr:content/renditions/original)

Saved Cards {#uc_ui_config_ex_saved_cards}
==========================================

This example shows the saved card payment details that appear during checkout:

#### Figure:

Screen 3: Saved Cards ![Image that shows the Unified Checkout Look and Feel UI saved card details.](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/unified-checkout/images/uc-ui-config-saved-cards-548x632.svg/jcr:content/renditions/original)

Card Entry {#uc_ui_config_ex_card_entry}
========================================

This example shows the card entry payment details that appear during checkout:

#### Figure:

Screen 4: Card Entry ![Image that shows the Unified Checkout Look and Feel UI card entry checkout details.](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/unified-checkout/images/uc-ui-config-card-entry-548x632.svg/jcr:content/renditions/original)

Review Details {#uc_ui_config_ex_review}
========================================

This example shows the review contact details that appear at the end of checkout:

#### Figure:

Screen 5: Review ![Image that shows the Unified Checkout Look and Feel UI review checkout details.](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/unified-checkout/images/uc-ui-config-review-details-548x632.svg/jcr:content/renditions/original)