---
title: Product Card
slug: docs/ugTl-product-card
docTags: 
createdAt: 2024-11-22T12:06:56.810Z
---

Component for rendering a card based on product details. Includes image and text block with title, subtitle and/or category, as well as optional action button and rating. Allows HTML and dynamic properties in texts. Can link to a screen via button or as a whole clickable component.

## Properties

General

- Product - product defined in Products tab
  Show Category - display or hide product's category
  Rating Position - if and where to display the rating
  Title Level - heading size used for product name
  Link - screen to link to on card body click. Use Button Actions/Link to link only from the button.
  Variant - layout variant
  Button Appearance
  Label - text to be displayed on the button
  Variant - visual variant
  Is quiet - less prominent visual variant. Doesn't apply to link variant. 
  Button Actions
  Link- screen to navigate to on click
  Event Type - name (type) of event to generate on click. Used to trigger Data Collection Tag Property Rules. Leave empty for no event.
  Webhook URL - URL to which a request should be sent on click. Leave empty for no request.
  Form Id - used to filter properties to include in webhook request payload.
  Custom Data - additional properties to add to dataLayer/request payload on click. 
  Alignment
  Alignment - horizontal alignment of whole component
  Text Alignment - text alignment within the component. Used to fine-tune component layout


Styles section