{
  "name": "WidgetQuoteCards",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WidgetQuoteCards.tsx",
  "chapterTag": "25 Chat Widget",
  "chapter": "25-widget.html",
  "sectionId": "quote-cards",
  "elName": "WidgetQuoteCards",
  "demoUrl": "https://brand.magicblocks.ai/components/25-widget#quote-cards",
  "hasLiveDemo": false,
  "description": "",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "WidgetQuoteCards",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WidgetQuoteCardsProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WidgetQuote",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { WidgetQuoteCards } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "quotes",
      "optional": false,
      "type": "WidgetQuote[]",
      "doc": ""
    },
    {
      "name": "stamp",
      "optional": true,
      "type": "ReactNode",
      "doc": "\"updated 10:42\"."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Header eyebrow."
    },
    {
      "name": "hint",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "cta",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "onSelect",
      "optional": true,
      "type": "(quote: WidgetQuote, index: number) => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "title",
    "widget-quotes",
    "widget-quotes-head",
    "widget-quotes-hint",
    "widget-quotes-rail",
    "widget-quotes-stamp"
  ],
  "examples": {
    "react": null,
    "html": "<div dir=\"ltr\" class=\"widget-theme-scope\"><div class=\"widget-quotes\"><div class=\"widget-quotes-head\"><span class=\"widget-quotes-stamp\">Pricing engine · updated 10:42</span><span class=\"widget-quotes-hint\">Swipe →</span></div><div class=\"widget-quotes-rail\"><div class=\"quote-card is-widget is-edge-accent\"><div class=\"quote-card-head\"><span class=\"quote-card-term\">30-yr fixed</span><span class=\"quote-card-badge\">Lowest payment</span></div><div><div class=\"quote-card-rate-row\"><span class=\"quote-card-rate\">5.84%</span><span class=\"quote-card-rate-unit\">rate</span></div><div class=\"quote-card-meta\">5.91% APR · 0 points</div></div><div class=\"quote-card-rows\"><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Monthly</span><span class=\"quote-card-row-value\">$2,830</span></div><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Closing</span><span class=\"quote-card-row-value\">$4,120</span></div><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">vs today</span><span class=\"quote-card-row-value is-positive\">−$180/mo</span></div></div><button type=\"button\" class=\"quote-card-cta\">Take this one</button></div><div class=\"quote-card is-widget\"><div class=\"quote-card-head\"><span class=\"quote-card-term\">20-yr fixed</span></div><div><div class=\"quote-card-rate-row\"><span class=\"quote-card-rate\">5.61%</span><span class=\"quote-card-rate-unit\">rate</span></div><div class=\"quote-card-meta\">5.72% APR · 0.5 points</div></div><div class=\"quote-card-rows\"><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Monthly</span><span class=\"quote-card-row-value\">$3,340</span></div><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Closing</span><span class=\"quote-card-row-value\">$6,480</span></div><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">vs today</span><span class=\"quote-card-row-value is-positive\">−$41k interest</span></div></div><button type=\"button\" class=\"quote-card-cta\">Take this one</button></div><div class=\"quote-card is-widget\"><div class=\"quote-card-head\"><span class=\"quote-card-term\">7/6 ARM</span><span class=\"quote-card-badge\">Cheapest now</span></div><div><div class=\"quote-card-rate-row\"><span class=\"quote-card-rate\">5.12%</span><span class=\"quote-card-rate-unit\">rate</span></div><div class=\"quote-card-meta\">5.88% APR · 0 points</div></div><div class=\"quote-card-rows\"><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Monthly</span><span class=\"quote-card-row-value\">$2,610</span></div><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Closing</span><span class=\"quote-card-row-value\">$3,950</span></div><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">vs today</span><span class=\"quote-card-row-value is-positive\">−$400/mo</span></div></div><button type=\"button\" class=\"quote-card-cta\">Take this one</button></div></div></div></div>",
    "css": ".title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }\n\n.widget-quotes { align-self: stretch; animation: widget-in 380ms var(--ease) both; }\n\n.widget-quotes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding-left: 2px; }\n\n.widget-quotes-hint { font: 400 9.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }\n.widget-quotes-hint { color: var(--fg-faint); }\n\n.widget-quotes-rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 0 18px 4px; scrollbar-width: none; }\n\n.widget-quotes-stamp { font: 400 9.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }\n.widget-quotes-stamp { color: var(--fg-dim); }"
  }
}