Edit Localisation (l10n)

Name

Also known as (comma separated)

Brief definition Adapting content and formats for a specific language/region.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "region", "type": "select", "label": "Region", "default": "uk", "options": [ "us", "uk", "jp" ] }, { "id": "showUnits", "type": "toggle", "label": "Show measurement units", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "productName", "type": "text", "label": "Product name", "default": "Trail backpack" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"l10n l10n--{{region}}\">\n <p class=\"l10n__title\">{{productName}}</p>\n <p class=\"l10n__price l10n__price--us\" style=\"color:{{accent}};\">$64.00</p>\n <p class=\"l10n__price l10n__price--uk\" style=\"color:{{accent}};\">&pound;51.00</p>\n <p class=\"l10n__price l10n__price--jp\" style=\"color:{{accent}};\">&yen;9,600</p>\n <p class=\"l10n__date l10n__date--us\">Ships 3/14/2026</p>\n <p class=\"l10n__date l10n__date--uk\">Ships 14/03/2026</p>\n <p class=\"l10n__date l10n__date--jp\">Ships 2026&#24180;3&#26376;14&#26085;</p>\n {{#if showUnits}}\n <p class=\"l10n__unit l10n__unit--us\">Capacity: 1.5 gal &middot; 22 in tall</p>\n <p class=\"l10n__unit l10n__unit--uk\">Capacity: 6.8 L &middot; 56 cm tall</p>\n <p class=\"l10n__unit l10n__unit--jp\">Capacity: 6.8 L &middot; 56 cm tall</p>\n {{/if}}\n</div>\n<style>\n.l10n { font: 13px/1.6 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.l10n__title { margin: 0 0 8px; font-weight: 700; }\n.l10n__price { display: none; margin: 0 0 4px; font-size: 22px; font-weight: 800; }\n.l10n__date, .l10n__unit { display: none; margin: 0 0 4px; font-size: 11px; color: #24143099; }\n.l10n--us .l10n__price--us, .l10n--uk .l10n__price--uk, .l10n--jp .l10n__price--jp { display: block; }\n.l10n--us .l10n__date--us, .l10n--uk .l10n__date--uk, .l10n--jp .l10n__date--jp { display: block; }\n.l10n--us .l10n__unit--us, .l10n--uk .l10n__unit--uk, .l10n--jp .l10n__unit--jp { display: block; }\n</style>", "tailwind": "<div class=\"l10ntw l10ntw--{{region}} font-sans text-[13px] leading-6 text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border\">\n <p class=\"m-0 mb-2 font-bold\">{{productName}}</p>\n <p class=\"l10ntw__price l10ntw__price--us hidden m-0 mb-1 text-2xl font-extrabold\" style=\"color:{{accent}};\">$64.00</p>\n <p class=\"l10ntw__price l10ntw__price--uk hidden m-0 mb-1 text-2xl font-extrabold\" style=\"color:{{accent}};\">&pound;51.00</p>\n <p class=\"l10ntw__price l10ntw__price--jp hidden m-0 mb-1 text-2xl font-extrabold\" style=\"color:{{accent}};\">&yen;9,600</p>\n <p class=\"l10ntw__date l10ntw__date--us hidden m-0 mb-1 text-[11px] text-[#24143099]\">Ships 3/14/2026</p>\n <p class=\"l10ntw__date l10ntw__date--uk hidden m-0 mb-1 text-[11px] text-[#24143099]\">Ships 14/03/2026</p>\n <p class=\"l10ntw__date l10ntw__date--jp hidden m-0 mb-1 text-[11px] text-[#24143099]\">Ships 2026&#24180;3&#26376;14&#26085;</p>\n {{#if showUnits}}\n <p class=\"l10ntw__unit l10ntw__unit--us hidden m-0 mb-1 text-[11px] text-[#24143099]\">Capacity: 1.5 gal &middot; 22 in tall</p>\n <p class=\"l10ntw__unit l10ntw__unit--uk hidden m-0 mb-1 text-[11px] text-[#24143099]\">Capacity: 6.8 L &middot; 56 cm tall</p>\n <p class=\"l10ntw__unit l10ntw__unit--jp hidden m-0 mb-1 text-[11px] text-[#24143099]\">Capacity: 6.8 L &middot; 56 cm tall</p>\n {{/if}}\n</div>\n<style>\n.l10ntw--us .l10ntw__price--us, .l10ntw--uk .l10ntw__price--uk, .l10ntw--jp .l10ntw__price--jp { display: block; }\n.l10ntw--us .l10ntw__date--us, .l10ntw--uk .l10ntw__date--uk, .l10ntw--jp .l10ntw__date--jp { display: block; }\n.l10ntw--us .l10ntw__unit--us, .l10ntw--uk .l10ntw__unit--uk, .l10ntw--jp .l10ntw__unit--jp { display: block; }\n</style>", "react": "export function LocalisationL10n({\n region = \"{{region}}\",\n showUnits = {{showUnits}},\n accent = \"{{accent}}\",\n productName = \"{{productName}}\",\n}) {\n const data = {\n us: { price: \"$64.00\", date: \"Ships 3/14/2026\", unit: \"Capacity: 1.5 gal \\u00B7 22 in tall\" },\n uk: { price: \"\\u00A351.00\", date: \"Ships 14/03/2026\", unit: \"Capacity: 6.8 L \\u00B7 56 cm tall\" },\n jp: { price: \"\\u00A59,600\", date: \"Ships 2026\\u5E743\\u670814\\u65E5\", unit: \"Capacity: 6.8 L \\u00B7 56 cm tall\" },\n }[region];\n return (\n <div style={{ font: \"13px/1.6 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 280, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 8px\", fontWeight: 700 }}>{productName}</p>\n <p style={{ margin: \"0 0 4px\", fontSize: 22, fontWeight: 800, color: accent }}>{data.price}</p>\n <p style={{ margin: \"0 0 4px\", fontSize: 11, color: \"#24143099\" }}>{data.date}</p>\n {showUnits && <p style={{ margin: \"0 0 4px\", fontSize: 11, color: \"#24143099\" }}>{data.unit}</p>}\n </div>\n );\n}" }