Edit Alignment

Name

Also known as (comma separated)

Brief definition Positioning elements along common edges/axes.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "textAlign", "type": "select", "label": "text-align", "default": "left", "options": [ "left", "center", "right" ] }, { "id": "itemsAlign", "type": "select", "label": "align-items (chip row)", "default": "center", "options": [ "flex-start", "center", "flex-end" ] }, { "id": "gap", "type": "number", "label": "Gap", "default": 10, "min": 0, "max": 28, "step": 2 }, { "id": "accent", "type": "color", "label": "Chip colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"al-wrap\">\n <p class=\"al-text\" style=\"text-align:{{textAlign}};\">Aligned to the {{textAlign}} edge.</p>\n <div class=\"al-row\" style=\"align-items:{{itemsAlign}};gap:{{gap}}px;\">\n <span class=\"al-chip\" style=\"background:{{accent}};height:28px;\">A</span>\n <span class=\"al-chip\" style=\"background:{{accent}};height:44px;\">B</span>\n <span class=\"al-chip\" style=\"background:{{accent}};height:36px;\">C</span>\n </div>\n <p class=\"al-caption\">text-align: {{textAlign}} &middot; align-items: {{itemsAlign}} &middot; gap {{gap}}px</p>\n</div>\n<style>\n.al-wrap { font: 14px/1.5 system-ui, sans-serif; color: #241430; width: 300px; }\n.al-text { margin: 0 0 14px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; }\n.al-row { display: flex; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; padding: 10px; box-sizing: border-box; min-height: 60px; }\n.al-chip { width: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; }\n.al-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[300px]\">\n <p class=\"m-0 mb-3.5 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border\" style=\"text-align:{{textAlign}};\">Aligned to the {{textAlign}} edge.</p>\n <div class=\"flex bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg p-2.5 box-border min-h-[60px]\" style=\"align-items:{{itemsAlign}};gap:{{gap}}px;\">\n <span class=\"w-[34px] rounded-md flex items-center justify-center font-bold\" style=\"background:{{accent}};height:28px;\">A</span>\n <span class=\"w-[34px] rounded-md flex items-center justify-center font-bold\" style=\"background:{{accent}};height:44px;\">B</span>\n <span class=\"w-[34px] rounded-md flex items-center justify-center font-bold\" style=\"background:{{accent}};height:36px;\">C</span>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">text-align: {{textAlign}} &middot; align-items: {{itemsAlign}} &middot; gap {{gap}}px</p>\n</div>", "react": "export function Alignment({\n textAlign = \"{{textAlign}}\",\n itemsAlign = \"{{itemsAlign}}\",\n gap = {{gap}},\n accent = \"{{accent}}\",\n}) {\n const chip = { width: 34, background: accent, borderRadius: 6, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontWeight: 700 };\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", width: 300 }}>\n <p style={{ margin: \"0 0 14px\", textAlign, background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 10, boxSizing: \"border-box\" }}>\n Aligned to the {textAlign} edge.\n </p>\n <div style={{ display: \"flex\", alignItems: itemsAlign, gap, background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, padding: 10, boxSizing: \"border-box\", minHeight: 60 }}>\n <span style={{ ...chip, height: 28 }}>A</span>\n <span style={{ ...chip, height: 44 }}>B</span>\n <span style={{ ...chip, height: 36 }}>C</span>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>text-align: {textAlign} &middot; align-items: {itemsAlign} &middot; gap {gap}px</p>\n </div>\n );\n}" }