{
  "name": "app-product-listing-card",
  "kind": "block",
  "primary": "card-ui",
  "page": "/catalog/ui-patterns/app/product-card-buy/product-card-buy.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<card-ui>\n  <image-ui\n    src=\"https://picsum.photos/seed/product42/600/360\"\n    alt=\"Wireless noise-cancelling headphones in midnight black\"\n    height=\"220px\"\n    fit=\"cover\"\n    raw></image-ui>\n  <section>\n    <col-ui gap=\"3\">\n      <col-ui gap=\"1\">\n        <row-ui justify=\"space-between\" align=\"start\">\n          <text-ui weight=\"semibold\" size=\"lg\">Wireless Pro Headphones</text-ui>\n          <badge-ui text=\"In stock\" variant=\"success\" size=\"sm\"></badge-ui>\n        </row-ui>\n        <row-ui gap=\"2\" align=\"center\">\n          <text-ui size=\"xl\" weight=\"semibold\">$149.00</text-ui>\n          <text-ui size=\"sm\" color=\"subtle\" style=\"text-decoration:line-through\">$199.00</text-ui>\n          <badge-ui text=\"25% off\" variant=\"warning\" size=\"sm\"></badge-ui>\n        </row-ui>\n      </col-ui>\n      <text-ui size=\"sm\" color=\"subtle\">Active noise cancellation, 30-hour battery life, foldable design. USB-C charging. Compatible with iOS and Android.</text-ui>\n      <row-ui gap=\"1\">\n        <rating-ui value=\"4\" readonly size=\"sm\"></rating-ui>\n        <text-ui size=\"sm\" color=\"subtle\">(312 reviews)</text-ui>\n      </row-ui>\n    </col-ui>\n  </section>\n  <footer>\n    <row-ui gap=\"2\">\n      <button-ui text=\"Add to cart\" variant=\"primary\" icon=\"shopping-cart\" style=\"flex:1\"></button-ui>\n      <button-ui variant=\"ghost\" icon=\"heart\" aria-label=\"Save\"></button-ui>\n    </row-ui>\n  </footer>\n</card-ui>",
  "source": "catalog/ui-patterns/app/product-card-buy/product-card-buy.contents.html",
  "metadata": {
    "domain": "data",
    "description": "Product card with image, price, and buy button — card showing product photo, name, price, brief description, and add-to-cart + save actions. E-commerce product listing pattern.",
    "keywords": [
      "app",
      "store",
      "listing",
      "product-listing",
      "card",
      "app-store",
      "product",
      "card",
      "image",
      "price",
      "buy",
      "button",
      "add-to-cart",
      "e-commerce",
      "shopping",
      "card-ui",
      "image-ui",
      "buy",
      "purchase",
      "price"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "image",
      "component": "Image",
      "alt": "Wireless noise-cancelling headphones in midnight black",
      "fit": "cover",
      "height": "220px",
      "raw": true,
      "src": "https://picsum.photos/seed/product42/600/360"
    },
    {
      "id": "text",
      "component": "Text",
      "size": "lg",
      "weight": "semibold",
      "textContent": "Wireless Pro Headphones"
    },
    {
      "id": "badge",
      "component": "Badge",
      "size": "sm",
      "text": "In stock",
      "variant": "success"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "start",
      "justify": "space-between",
      "children": [
        "text",
        "badge"
      ]
    },
    {
      "id": "text-2",
      "component": "Text",
      "size": "xl",
      "weight": "semibold",
      "textContent": "$149.00"
    },
    {
      "id": "text-3",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "$199.00"
    },
    {
      "id": "badge-2",
      "component": "Badge",
      "size": "sm",
      "text": "25% off",
      "variant": "warning"
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "text-2",
        "text-3",
        "badge-2"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "gap": "1",
      "children": [
        "row",
        "row-2"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Active noise cancellation, 30-hour battery life, foldable design. USB-C charging. Compatible with iOS and Android."
    },
    {
      "id": "rating",
      "component": "Rating",
      "readonly": true,
      "size": "sm",
      "value": 4
    },
    {
      "id": "text-5",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "(312 reviews)"
    },
    {
      "id": "row-3",
      "component": "Row",
      "gap": "1",
      "children": [
        "rating",
        "text-5"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "3",
      "children": [
        "column-2",
        "text-4",
        "row-3"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "icon": "shopping-cart",
      "text": "Add to cart",
      "variant": "primary"
    },
    {
      "id": "save",
      "component": "Button",
      "aria-label": "Save",
      "icon": "heart",
      "variant": "ghost"
    },
    {
      "id": "row-4",
      "component": "Row",
      "gap": "2",
      "children": [
        "button",
        "save"
      ]
    },
    {
      "id": "footer",
      "component": "Footer",
      "children": [
        "row-4"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "children": [
        "image",
        "section"
      ]
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "section-2",
        "footer"
      ]
    }
  ]
}