{"id":"b373eebc-a685-4c2f-8325-0d8762c24479","name":"Side By Side Product Duel","slug":"side-by-side-product-duel","category":"product-comparison-cards","description":"A polished two-column product comparison card that pits product A against product B across three feature rows — perfect for pricing pages, versus posts and social shares.","sample_params":{"f1_a":"$29/mo flat","f1_b":"$49/mo + usage","f1_label":"Pricing","f2_a":"99.99%","f2_b":"99.9%","f2_label":"Uptime SLA","f3_a":"24/7 live chat","f3_b":"Email only","f3_label":"Support","product_a":"Acme Cloud","product_b":"Nimbus Host","title":"Which hosting fits your stack?"},"spec":{"name":"product-duel","width":1200,"height":630,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003clink rel='stylesheet' href='/lib/og.css'\u003e\n\u003cstyle\u003e\n.duel-canvas{width:100vw;height:100vh;overflow:hidden;position:relative;display:flex;flex-direction:column;background:linear-gradient(135deg,#0b1220 0%,#111a30 55%,#1a1440 100%);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#e8ecf6;}\n.duel-content{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:44px 64px 36px;}\n.duel-kicker{font-size:17px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:#8b95d8;text-align:center;}\n.duel-title{margin:10px auto 0;max-width:980px;font-size:44px;line-height:1.12;font-weight:800;letter-spacing:-0.5px;text-align:center;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}\n.duel-grid{position:relative;display:flex;gap:96px;flex:1;margin-top:30px;min-height:0;}\n.duel-card{flex:1;display:flex;flex-direction:column;border-radius:22px;padding:28px 34px 22px;min-width:0;}\n.duel-card--a{background:linear-gradient(160deg,rgba(99,102,241,0.22),rgba(139,92,246,0.10));border:2px solid rgba(129,140,248,0.65);box-shadow:0 0 60px rgba(99,102,241,0.28),inset 0 1px 0 rgba(255,255,255,0.08);}\n.duel-card--b{background:rgba(255,255,255,0.045);border:2px solid rgba(255,255,255,0.14);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);}\n.duel-name{font-size:30px;font-weight:800;letter-spacing:-0.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.14);}\n.duel-card--a .duel-name{color:#c7d2fe;}\n.duel-rows{display:flex;flex-direction:column;justify-content:space-evenly;flex:1;min-height:0;}\n.duel-row{display:flex;flex-direction:column;gap:5px;}\n.duel-label{font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#7e88ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\n.duel-card--a .duel-label{color:#9aa5e8;}\n.duel-value{font-size:27px;font-weight:700;line-height:1.2;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}\n.duel-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;letter-spacing:1px;color:#0b1220;background:linear-gradient(145deg,#fbbf24,#f59e0b);box-shadow:0 8px 30px rgba(245,158,11,0.45),0 0 0 8px rgba(11,18,32,0.9);}\n.duel-footer{display:flex;align-items:center;gap:18px;margin-top:26px;font-size:16px;font-weight:600;letter-spacing:1.5px;color:#5c6690;text-transform:uppercase;}\n.duel-rule{flex:1;height:1px;border:0;margin:0;background:linear-gradient(90deg,rgba(255,255,255,0.18),transparent);}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class='duel-canvas og-bg-grid'\u003e\n  \u003cimg class='og-blob' src='/lib/blob.svg' alt='' style='width: 720px; top: -260px; right: -260px; opacity: 0.5;'\u003e\n  \u003cdiv class='duel-content'\u003e\n    \u003cdiv class='duel-kicker'\u003eHead to head\u003c/div\u003e\n    \u003ch1 class='duel-title'\u003e{{.title}}\u003c/h1\u003e\n    \u003cdiv class='duel-grid'\u003e\n      \u003cdiv class='duel-card duel-card--a'\u003e\n        \u003cdiv class='duel-name'\u003e{{.product_a}}\u003c/div\u003e\n        \u003cdiv class='duel-rows'\u003e\n          \u003cdiv class='duel-row'\u003e\u003cdiv class='duel-label'\u003e{{.f1_label}}\u003c/div\u003e\u003cdiv class='duel-value'\u003e{{.f1_a}}\u003c/div\u003e\u003c/div\u003e\n          \u003cdiv class='duel-row'\u003e\u003cdiv class='duel-label'\u003e{{.f2_label}}\u003c/div\u003e\u003cdiv class='duel-value'\u003e{{.f2_a}}\u003c/div\u003e\u003c/div\u003e\n          \u003cdiv class='duel-row'\u003e\u003cdiv class='duel-label'\u003e{{.f3_label}}\u003c/div\u003e\u003cdiv class='duel-value'\u003e{{.f3_a}}\u003c/div\u003e\u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class='duel-card duel-card--b'\u003e\n        \u003cdiv class='duel-name'\u003e{{.product_b}}\u003c/div\u003e\n        \u003cdiv class='duel-rows'\u003e\n          \u003cdiv class='duel-row'\u003e\u003cdiv class='duel-label'\u003e{{.f1_label}}\u003c/div\u003e\u003cdiv class='duel-value'\u003e{{.f1_b}}\u003c/div\u003e\u003c/div\u003e\n          \u003cdiv class='duel-row'\u003e\u003cdiv class='duel-label'\u003e{{.f2_label}}\u003c/div\u003e\u003cdiv class='duel-value'\u003e{{.f2_b}}\u003c/div\u003e\u003c/div\u003e\n          \u003cdiv class='duel-row'\u003e\u003cdiv class='duel-label'\u003e{{.f3_label}}\u003c/div\u003e\u003cdiv class='duel-value'\u003e{{.f3_b}}\u003c/div\u003e\u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class='duel-vs'\u003eVS\u003c/div\u003e\n    \u003c/div\u003e\n    \u003cdiv class='duel-footer'\u003e\n      \u003cspan\u003emedia0\u003c/span\u003e\n      \u003chr class='duel-rule'\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"f1_a":{"type":"string","required":true,"maxLen":60,"description":"Product A's value for the first feature row."},"f1_b":{"type":"string","required":true,"maxLen":60,"description":"Product B's value for the first feature row."},"f1_label":{"type":"string","required":true,"maxLen":30,"description":"Label of the first feature row, e.g. Pricing."},"f2_a":{"type":"string","required":true,"maxLen":60,"description":"Product A's value for the second feature row."},"f2_b":{"type":"string","required":true,"maxLen":60,"description":"Product B's value for the second feature row."},"f2_label":{"type":"string","required":true,"maxLen":30,"description":"Label of the second feature row, e.g. Uptime SLA."},"f3_a":{"type":"string","required":true,"maxLen":60,"description":"Product A's value for the third feature row."},"f3_b":{"type":"string","required":true,"maxLen":60,"description":"Product B's value for the third feature row."},"f3_label":{"type":"string","required":true,"maxLen":30,"description":"Label of the third feature row, e.g. Support."},"product_a":{"type":"string","required":true,"maxLen":40,"description":"Name of the first (highlighted) product."},"product_b":{"type":"string","required":true,"maxLen":40,"description":"Name of the second product."},"title":{"type":"string","required":true,"maxLen":90,"description":"Headline above the comparison, e.g. the question being answered."}}}}