Edit RTL

Name

Also known as (comma separated)

Brief definition Right-to-left text direction (e.g. Arabic, Hebrew).

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "isRTL", "type": "toggle", "label": "Right-to-left direction", "default": true }, { "id": "title", "type": "text", "label": "Title", "default": "ملخص الطلب" }, { "id": "subtitle", "type": "text", "label": "Subtitle", "default": "3 عناصر" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"rtlc\" dir=\"{{#if isRTL}}rtl{{/if}}{{#unless isRTL}}ltr{{/unless}}\">\n <div class=\"rtlc__row\">\n <span class=\"rtlc__icon\" style=\"background:{{accent}};\" aria-hidden=\"true\">&#128230;</span>\n <div class=\"rtlc__text\"><strong>{{title}}</strong><small>{{subtitle}}</small></div>\n <span class=\"rtlc__chevron\" aria-hidden=\"true\">&rsaquo;</span>\n </div>\n <p class=\"rtlc__note\">dir=&quot;{{#if isRTL}}rtl{{/if}}{{#unless isRTL}}ltr{{/unless}}&quot; &mdash; the row, icon order and chevron all flip with real direction, not a mirrored image.</p>\n</div>\n<style>\n.rtlc { font: 15px/1.6 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.rtlc__row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: #ffffff; border: 1px solid #24143018; }\n.rtlc__icon { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }\n.rtlc__text { flex: 1; }\n.rtlc__text strong { display: block; }\n.rtlc__text small { color: #24143099; font-size: 12px; }\n.rtlc__chevron { font-size: 20px; color: #24143060; transform: scaleX(1); }\n[dir=\"rtl\"] .rtlc__chevron { transform: scaleX(-1); }\n.rtlc__note { margin: 10px 0 0; font-size: 10px; color: #24143099; }\n</style>", "tailwind": "<div class=\"rtlctw\" dir=\"{{#if isRTL}}rtl{{/if}}{{#unless isRTL}}ltr{{/unless}}\">\n <div class=\"flex items-center gap-3 p-3 rounded-lg bg-white border border-[#24143018]\">\n <span class=\"w-[34px] h-[34px] rounded-lg grid place-items-center shrink-0\" style=\"background:{{accent}};\" aria-hidden=\"true\">&#128230;</span>\n <div class=\"flex-1\"><strong class=\"block\">{{title}}</strong><small class=\"text-[#24143099] text-xs\">{{subtitle}}</small></div>\n <span class=\"rtlctw__chevron text-xl text-[#24143060]\" aria-hidden=\"true\">&rsaquo;</span>\n </div>\n <p class=\"mt-2.5 text-[10px] text-[#24143099]\">dir=&quot;{{#if isRTL}}rtl{{/if}}{{#unless isRTL}}ltr{{/unless}}&quot; &mdash; the row, icon order and chevron all flip with real direction, not a mirrored image.</p>\n</div>\n<style>\n.rtlctw { font: 15px/1.6 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n[dir=\"rtl\"] .rtlctw__chevron { transform: scaleX(-1); display: inline-block; }\n</style>", "react": "export function Rtl({\n isRTL = {{isRTL}},\n title = \"{{title}}\",\n subtitle = \"{{subtitle}}\",\n accent = \"{{accent}}\",\n}) {\n const dir = isRTL ? \"rtl\" : \"ltr\";\n return (\n <div dir={dir} style={{ font: \"15px/1.6 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 12, padding: 12, borderRadius: 8, background: \"#ffffff\", border: \"1px solid #24143018\" }}>\n <span aria-hidden=\"true\" style={{ width: 34, height: 34, borderRadius: 8, display: \"grid\", placeItems: \"center\", flexShrink: 0, background: accent }}>&#128230;</span>\n <div style={{ flex: 1 }}><strong style={{ display: \"block\" }}>{title}</strong><small style={{ color: \"#24143099\", fontSize: 12 }}>{subtitle}</small></div>\n <span aria-hidden=\"true\" style={{ fontSize: 20, color: \"#24143060\", display: \"inline-block\", transform: isRTL ? \"scaleX(-1)\" : \"scaleX(1)\" }}>&rsaquo;</span>\n </div>\n <p style={{ margin: \"10px 0 0\", fontSize: 10, color: \"#24143099\" }}>dir=\"{dir}\" &mdash; the row, icon order and chevron all flip with real direction, not a mirrored image.</p>\n </div>\n );\n}" }