{ "name": "QuoteCard", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/QuoteCard.tsx", "chapterTag": "26 Embed Extras", "chapter": "26-embed-extras.html", "sectionId": "pos-quote-grid", "elName": "PosQuoteGrid", "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-quote-grid", "hasLiveDemo": false, "description": "", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "QuoteCard", "isPrincipal": true, "isType": false }, { "name": "QuoteCardProps", "isPrincipal": false, "isType": true }, { "name": "QuoteCardRow", "isPrincipal": false, "isType": false }, { "name": "QuoteCardSurface", "isPrincipal": false, "isType": false } ], "importStatement": "import { QuoteCard } from \"@magicblocksai/ui\";", "props": [ { "name": "surface", "optional": true, "type": "QuoteCardSurface", "doc": "" }, { "name": "term", "optional": false, "type": "ReactNode", "doc": "\"30-yr fixed\"." }, { "name": "rate", "optional": false, "type": "ReactNode", "doc": "\"5.84%\"." }, { "name": "apr", "optional": false, "type": "ReactNode", "doc": "\"5.91%\"." }, { "name": "points", "optional": false, "type": "ReactNode", "doc": "\"0 points\"." }, { "name": "badge", "optional": true, "type": "ReactNode", "doc": "Optional pill beside the term — \"Lowest payment\"." }, { "name": "highlighted", "optional": true, "type": "boolean", "doc": "Accent the top edge — the highlighted quote." }, { "name": "rows", "optional": true, "type": "QuoteCardRow[]", "doc": "Comparison rows beneath the rate." }, { "name": "cta", "optional": true, "type": "ReactNode", "doc": "Button label. Widget default \"Take this one\"; POS default \"Choose this\"." }, { "name": "onSelect", "optional": true, "type": "() => void", "doc": "" } ], "classesUsed": [ "pos", "quote-card", "quote-card-badge", "quote-card-cta", "quote-card-head", "quote-card-meta", "quote-card-rate", "quote-card-rate-row", "quote-card-rate-unit", "quote-card-row", "quote-card-row-label", "quote-card-row-value", "quote-card-rows", "quote-card-term" ], "examples": { "react": null, "html": "
Pricing engine · 14 lenders · updated just now
30-yr fixedLowest payment
5.84%rate
5.91% APR · 0 points
Monthly$2,830
Cash to close$14,120
LenderCardinal
20-yr fixed
5.61%rate
5.72% APR · 0.5 points
Monthly$3,340
Cash to close$16,480
LenderPennymac
7/6 ARMCheapest now
5.12%rate
5.88% APR · 0 points
Monthly$2,610
Cash to close$13,950
LenderUWM
", "css": ".pos { height: 100dvh; background: var(--p-page); color: var(--p-fg); font-family: var(--p-font); display: flex; flex-direction: column; overflow: hidden; }\n\n.quote-card {\n display: flex; flex-direction: column; box-sizing: border-box;\n background: var(--q-card); color: var(--q-fg); font-family: var(--q-font);\n border: 1px solid var(--q-hair); border-top: 2px solid var(--q-hair); border-radius: var(--q-r);\n}\n\n.quote-card-badge { font: 400 9px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; border-radius: var(--r-pill); background: var(--q-accent-soft); color: var(--q-accent-text); }\n\n.quote-card-cta {\n margin-top: 2px; width: 100%; padding: 10px; min-height: var(--q-tap); box-sizing: border-box;\n border-radius: var(--r-pill); border: 1px solid var(--q-hair); background: var(--q-field); color: var(--q-fg);\n font: 600 13.5px/1.2 var(--q-font); cursor: pointer; transition: all var(--dur-2) var(--ease);\n}\n\n.quote-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }\n\n.quote-card-meta { font: 400 10.5px/1.4 var(--f-mono); color: var(--q-dim); margin-top: 4px; }\n\n.quote-card-rate { font: 700 30px/1 var(--f-display); letter-spacing: -.025em; }\n\n.quote-card-rate-row { display: flex; align-items: baseline; gap: 5px; }\n\n.quote-card-rate-unit { font: 400 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--q-dim); }\n\n.quote-card-row { display: flex; justify-content: space-between; font-size: 12.5px; line-height: 1.4; }\n\n.quote-card-row-label { color: var(--q-dim); }\n\n.quote-card-row-value { font-weight: 600; }\n\n.quote-card-rows { display: flex; flex-direction: column; gap: 5px; padding-top: 9px; border-top: 1px solid var(--q-hair-soft); }\n\n.quote-card-term { font: 600 14.5px/1.3 var(--f-display); }" } }