---
title: "Product Card"
canonical: https://sky-ui.cf.sky.com/components/product-card
---

# Product Card

Product Card is used to display product information and present potential product-based actions.

## Purpose

Product Card is used to display product information and present potential product-based actions. It always has at least one action associated with it, and the option to show additional offers and pricing choices.

**Note:** Please note: Product Cards and [Deal Cards](/components/deal-card) have different uses. Deal Cards
  communicate products and direct users to other pages to find out more details. They are
  high-level, whereas Product Cards are about making final decisions and actions.

## Anatomy

Product Card can be broken down into the following elements:

### Product Details Anatomy

The product details area can be broken down into the following elements:

### Offer Details Anatomy

The offer details area can be broken down into the following elements:

## Variants & States

Product Cards themselves have no alternative variants or states, however each individual pricing option has a selected state variant.