# Product Card

The Product Card Component is designed to display a Revenium Product's details dynamically in MuleSoft's portal. **In general, we recommend use of the** [**Drop-In Storefront**](https://docs.revenium.io/ai-and-api-monetization/readme/salesforce/commerce-lightning-web-components/products-carousel), though this component may be used for specialized use-cases.

## 1. Component Properties

Look at the component blueprint in the Figure 1 to identify how the properties are displayed in the Product Card. Use the following properties to customize the component display:

1. **Organization.** The list of Products displayed in the in the **Product** combobox depends on the organization selected in this combobox.
2. **Product.** Lists the available Products, select one to display its details in the Product Card.
3. **Product Icon.** Use this property to select an icon uploaded to Salesforce CMS and display it in the designed space.
4. **Product Description Template.** Use this property to configure the Product Description shown in the designed space. You can access to the selected Product properties using the syntax `$propertyName`. For example, the string `$baseCost per $transactionType` will result in **$100.00 per subscription**.
5. **Product Description CMS Content.** You can use this property to display [News content](https://help.salesforce.com/s/articleView?id=sf.cms_customcontenttypes.htm\&type=5) created in Salesforce CMS, check the [official Salesforce docs](https://help.salesforce.com/s/articleView?id=sf.community_managed_content_creating_content-native.htm\&type=5) for more information.
6. **Show Buttons.** Check this property if you want to show the [Product Details Button](https://docs.revenium.io/ai-and-api-monetization/readme/salesforce/commerce-lightning-web-components/product-details).
7. **Card Margin.** Controls the space between the card border and the content.
8. **Card Height.** Controls the card height.
9. **Description Align.** Controls the Product Description text align.
10. **Description Text Size.** Controls the Product Description text size.
11. **Button Variant.** Controls the [Product Details Button](https://docs.revenium.io/ai-and-api-monetization/readme/salesforce/commerce-lightning-web-components/product-details) style, based on the [Lightning Design System directives](https://www.lightningdesignsystem.com/components/buttons/) (Only has effect if the **Show Buttons** property is checked).
12. **Button Label.** Label shown in the [Product Details Button](https://docs.revenium.io/ai-and-api-monetization/readme/salesforce/commerce-lightning-web-components/product-details) (Only has effect if the **Show Buttons** property is checked).
13. **Button Align.** Controls the [Product Details Button](https://github.com/hypercurrentio/hc-ui-web/blob/develop/docs/user-guide/integrations/mulesoft/anypoint-community-manager/commerce-lwc/product-details/README.md) alignment.

![Figure 1. Product Card Blueprint.](https://2470865788-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSUfCzMW8qWeXstipFXEh%2Fuploads%2Fgit-blob-ada165d45071583b7a89f57b135d8da203ede08d%2Fblueprint.png?alt=media\&token=9e80c555-389c-4920-9d86-5c6cb8236d1b)