{"id":"e7d70162-67da-44d1-83c7-2a30691e56f6","name":"Country Spotlight","slug":"country-spotlight","category":"email-charts","description":"A celebratory country card for launch and milestone emails: the country's real silhouette in your accent color beside its flag, name and one oversized stat. Pass an ISO code like de, fr, us or jp.","sample_params":{"country":"Germany","country_code":"de","eyebrow":"New milestone","flag":"🇩🇪","footnote":"media0 expansion report","hue":"245","stat":"1,240","stat_label":"new customers in the first month"},"spec":{"name":"country-spotlight","width":1200,"height":630,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003cstyle\u003e\n*{margin:0;padding:0;box-sizing:border-box}\nhtml,body{width:100%;height:100%}\nbody{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;overflow:hidden}\n.eyebrow{font-size:20px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}\n.chip{display:inline-block;font-size:22px;font-weight:700;padding:6px 18px;border-radius:999px;vertical-align:middle}\n.chip.up{color:#0a7d4f;background:#e2f5ea}\n.chip.down{color:#b3261e;background:#fde9e7}\n.chip.flat{color:#5b6472;background:#eef0f4}\n\nbody{background:radial-gradient(120% 150% at 85% 20%,hsl(var(--h) 80% 95%) 0%,#ffffff 55%);color:#12161f}\n.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;background:hsl(var(--h) 85% 72%)}\n#map{position:absolute;inset:0}\n.head{position:absolute;top:0;bottom:0;left:64px;width:520px;display:flex;flex-direction:column;justify-content:center;pointer-events:none}\n.eyebrow{color:hsl(var(--h) 65% 45%)}\n.country{display:flex;align-items:center;gap:18px;margin-top:18px}\n.flag{font-size:64px;line-height:1}\n.cname{font-size:56px;font-weight:800;letter-spacing:-0.02em}\n.stat{margin-top:34px;font-size:110px;font-weight:800;letter-spacing:-0.04em;font-variant-numeric:tabular-nums;line-height:1;color:hsl(var(--h) 70% 40%)}\n.statlabel{margin-top:14px;font-size:28px;color:#5b6472;max-width:460px;line-height:1.35}\n.foot{position:absolute;left:64px;right:64px;bottom:36px;display:flex;justify-content:space-between;font-size:18px;color:#98a0af;letter-spacing:.06em;text-transform:uppercase}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody style='--h: {{.hue}}'\u003e\n\u003cdiv class='blob' style='width:420px;height:420px;right:-80px;bottom:-140px'\u003e\u003c/div\u003e\n\u003cdiv id='map'\u003e\u003c/div\u003e\n\u003cdiv class='head'\u003e\n  \u003cp class='eyebrow'\u003e{{.eyebrow}}\u003c/p\u003e\n  \u003cdiv class='country'\u003e{{if .flag}}\u003cspan class='flag'\u003e{{.flag}}\u003c/span\u003e{{end}}\u003cspan class='cname'\u003e{{.country}}\u003c/span\u003e\u003c/div\u003e\n  \u003cdiv class='stat'\u003e{{.stat}}\u003c/div\u003e\n  \u003cp class='statlabel'\u003e{{.stat_label}}\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class='foot'\u003e\u003cspan\u003emedia0\u003c/span\u003e\u003cspan\u003e{{.footnote}}\u003c/span\u003e\u003c/div\u003e\n\u003cscript src='https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js'\u003e\u003c/script\u003e\n\u003cscript\u003e\nvar HUE=Number({{.hue}});\nvar CODE={{.country_code}}.trim().toLowerCase();\nvar chart=echarts.init(document.getElementById('map'));\nwindow.m0ready=fetch('https://cdn.jsdelivr.net/npm/@highcharts/map-collection@2.3.0/countries/'+encodeURIComponent(CODE)+'/'+encodeURIComponent(CODE)+'-all.geo.json')\n  .then(function(r){return r.json()})\n  .then(function(geo){\n    echarts.registerMap('spot',geo);\n    chart.setOption({\n      animation:false,\n      series:[{\n        type:'map',map:'spot',silent:true,roam:false,aspectScale:1,\n        layoutCenter:['74%','50%'],layoutSize:470,\n        itemStyle:{\n          areaColor:'hsl('+HUE+' 78% 56%)',borderColor:'#fff',borderWidth:1.6,\n          shadowBlur:60,shadowColor:'hsl('+HUE+' 80% 55% / .35)',shadowOffsetY:14\n        },\n        label:{show:false}\n      }]\n    });\n  });\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"country":{"type":"string","required":true,"maxLen":40,"description":"Country display name shown next to the flag."},"country_code":{"type":"string","required":true,"maxLen":12,"description":"ISO 3166-1 alpha-2 country code, lowercase, e.g. de, fr, us, gb, jp. Selects the map silhouette."},"eyebrow":{"type":"string","default":"New milestone","maxLen":40,"description":"Small uppercase kicker, e.g. New milestone."},"flag":{"type":"string","maxLen":12,"description":"Flag emoji shown before the country name."},"footnote":{"type":"string","maxLen":60,"description":"Small right-aligned footer note."},"hue":{"type":"number","default":"245","maxLen":5,"description":"Accent hue 0-360 for the country fill and stat."},"stat":{"type":"string","required":true,"maxLen":16,"description":"Oversized accent-colored number."},"stat_label":{"type":"string","required":true,"maxLen":90,"description":"Sentence under the stat, e.g. new customers in the first month."}}}}