Skip to content
← Information Architecture
Edit Information Architecture
Name
Also known as (comma separated)
Brief definition
Organisation of content, navigation and functionality.
Notes
Tier
Core
Useful
Reference
Deleted
Controls schema (JSON array)
[ { "id": "highlightLevel", "type": "select", "label": "Highlighted level", "default": "category", "options": [ "home", "category", "item" ] }, { "id": "showLines", "type": "toggle", "label": "Show structure lines", "default": true }, { "id": "accent", "type": "color", "label": "Colour", "default": "#BFD9F2", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]
Templates (JSON object keyed by format)
{ "html": "<div class=\"uif-ia-stage\" data-highlight=\"{{highlightLevel}}\">\n <svg viewBox=\"0 0 300 120\" width=\"100%\" height=\"120\" aria-hidden=\"true\" class=\"uif-ia-svg{{#if showLines}} uif-ia-svg--lines{{/if}}\">\n <line x1=\"40\" y1=\"20\" x2=\"40\" y2=\"55\" stroke=\"#24143044\" stroke-width=\"1.5\"/>\n <line x1=\"40\" y1=\"55\" x2=\"110\" y2=\"55\" stroke=\"#24143044\" stroke-width=\"1.5\"/>\n <line x1=\"40\" y1=\"55\" x2=\"190\" y2=\"55\" stroke=\"#24143044\" stroke-width=\"1.5\"/>\n <line x1=\"110\" y1=\"55\" x2=\"110\" y2=\"90\" stroke=\"#24143044\" stroke-width=\"1.5\"/>\n <line x1=\"110\" y1=\"90\" x2=\"70\" y2=\"90\" stroke=\"#24143044\" stroke-width=\"1.5\"/>\n <line x1=\"110\" y1=\"90\" x2=\"150\" y2=\"90\" stroke=\"#24143044\" stroke-width=\"1.5\"/>\n <rect class=\"uif-ia-node uif-ia-node--home\" x=\"8\" y=\"6\" width=\"64\" height=\"26\" rx=\"6\"/>\n <text x=\"40\" y=\"23\" text-anchor=\"middle\" font-size=\"10\" font-family=\"system-ui\">Home</text>\n <rect class=\"uif-ia-node uif-ia-node--category\" x=\"78\" y=\"42\" width=\"64\" height=\"26\" rx=\"6\"/>\n <text x=\"110\" y=\"59\" text-anchor=\"middle\" font-size=\"10\" font-family=\"system-ui\">Category</text>\n <rect x=\"158\" y=\"42\" width=\"64\" height=\"26\" rx=\"6\" fill=\"#fff\" stroke=\"#24143022\"/>\n <text x=\"190\" y=\"59\" text-anchor=\"middle\" font-size=\"10\" font-family=\"system-ui\">Category</text>\n <rect class=\"uif-ia-node uif-ia-node--item\" x=\"38\" y=\"77\" width=\"64\" height=\"26\" rx=\"6\"/>\n <text x=\"70\" y=\"94\" text-anchor=\"middle\" font-size=\"10\" font-family=\"system-ui\">Item</text>\n <rect x=\"118\" y=\"77\" width=\"64\" height=\"26\" rx=\"6\" fill=\"#fff\" stroke=\"#24143022\"/>\n <text x=\"150\" y=\"94\" text-anchor=\"middle\" font-size=\"10\" font-family=\"system-ui\">Item</text>\n </svg>\n <p class=\"uif-ia-caption\">Content, navigation and functionality organised into a structure — {{highlightLevel}} level highlighted</p>\n</div>\n<style>\n.uif-ia-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430aa; }\n.uif-ia-svg { display: block; }\n.uif-ia-svg:not(.uif-ia-svg--lines) line { display: none; }\n.uif-ia-node { fill: #fff; stroke: #24143022; }\n[data-highlight=\"home\"] .uif-ia-node--home,\n[data-highlight=\"category\"] .uif-ia-node--category,\n[data-highlight=\"item\"] .uif-ia-node--item { fill: {{accent}}; stroke: #241430; }\n.uif-ia-caption { margin: 8px 0 0; }\n</style>", "tailwind": "<div class=\"w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]/70\" data-highlight=\"{{highlightLevel}}\">\n <svg viewBox=\"0 0 300 120\" width=\"100%\" height=\"120\" aria-hidden=\"true\" class=\"tw-ia-svg{{#if showLines}} tw-ia-lines{{/if}} block\">\n <line x1=\"40\" y1=\"20\" x2=\"40\" y2=\"55\" stroke=\"#24143044\" stroke-width=\"1.5\"/>\n <line x1=\"40\" y1=\"55\" x2=\"110\" y2=\"55\" stroke=\"#24143044\" stroke-width=\"1.5\"/>\n <line x1=\"40\" y1=\"55\" x2=\"190\" y2=\"55\" stroke=\"#24143044\" stroke-width=\"1.5\"/>\n <line x1=\"110\" y1=\"55\" x2=\"110\" y2=\"90\" stroke=\"#24143044\" stroke-width=\"1.5\"/>\n <line x1=\"110\" y1=\"90\" x2=\"70\" y2=\"90\" stroke=\"#24143044\" stroke-width=\"1.5\"/>\n <line x1=\"110\" y1=\"90\" x2=\"150\" y2=\"90\" stroke=\"#24143044\" stroke-width=\"1.5\"/>\n <rect class=\"tw-ia-home\" x=\"8\" y=\"6\" width=\"64\" height=\"26\" rx=\"6\" fill=\"#fff\" stroke=\"#24143022\"/>\n <text x=\"40\" y=\"23\" text-anchor=\"middle\" font-size=\"10\" font-family=\"system-ui\">Home</text>\n <rect class=\"tw-ia-category\" x=\"78\" y=\"42\" width=\"64\" height=\"26\" rx=\"6\" fill=\"#fff\" stroke=\"#24143022\"/>\n <text x=\"110\" y=\"59\" text-anchor=\"middle\" font-size=\"10\" font-family=\"system-ui\">Category</text>\n <rect x=\"158\" y=\"42\" width=\"64\" height=\"26\" rx=\"6\" fill=\"#fff\" stroke=\"#24143022\"/>\n <text x=\"190\" y=\"59\" text-anchor=\"middle\" font-size=\"10\" font-family=\"system-ui\">Category</text>\n <rect class=\"tw-ia-item\" x=\"38\" y=\"77\" width=\"64\" height=\"26\" rx=\"6\" fill=\"#fff\" stroke=\"#24143022\"/>\n <text x=\"70\" y=\"94\" text-anchor=\"middle\" font-size=\"10\" font-family=\"system-ui\">Item</text>\n <rect x=\"118\" y=\"77\" width=\"64\" height=\"26\" rx=\"6\" fill=\"#fff\" stroke=\"#24143022\"/>\n <text x=\"150\" y=\"94\" text-anchor=\"middle\" font-size=\"10\" font-family=\"system-ui\">Item</text>\n </svg>\n <p class=\"mt-2\">Content, navigation and functionality organised into a structure — {{highlightLevel}} level highlighted</p>\n</div>\n<style>\n.tw-ia-svg:not(.tw-ia-lines) line { display: none; }\n[data-highlight=\"home\"] .tw-ia-home,\n[data-highlight=\"category\"] .tw-ia-category,\n[data-highlight=\"item\"] .tw-ia-item { fill: {{accent}}; stroke: #241430; }\n</style>", "react": "export function InformationArchitecture({\n highlightLevel = \"{{highlightLevel}}\",\n showLines = {{showLines}},\n accent = \"{{accent}}\",\n}) {\n const fill = (key) => (highlightLevel === key ? accent : \"#fff\");\n const stroke = (key) => (highlightLevel === key ? \"#241430\" : \"#24143022\");\n return (\n <div style={{ width: \"100%\", maxWidth: 320, padding: 16, background: \"#FAF7F2\", border: \"1px solid #24143022\", borderRadius: 12, fontFamily: \"system-ui, sans-serif\", fontSize: 12, color: \"#241430aa\" }}>\n <svg viewBox=\"0 0 300 120\" width=\"100%\" height=\"120\" aria-hidden=\"true\" style={{ display: \"block\" }}>\n {showLines && (<>\n <line x1=\"40\" y1=\"20\" x2=\"40\" y2=\"55\" stroke=\"#24143044\" strokeWidth=\"1.5\" />\n <line x1=\"40\" y1=\"55\" x2=\"110\" y2=\"55\" stroke=\"#24143044\" strokeWidth=\"1.5\" />\n <line x1=\"40\" y1=\"55\" x2=\"190\" y2=\"55\" stroke=\"#24143044\" strokeWidth=\"1.5\" />\n <line x1=\"110\" y1=\"55\" x2=\"110\" y2=\"90\" stroke=\"#24143044\" strokeWidth=\"1.5\" />\n <line x1=\"110\" y1=\"90\" x2=\"70\" y2=\"90\" stroke=\"#24143044\" strokeWidth=\"1.5\" />\n <line x1=\"110\" y1=\"90\" x2=\"150\" y2=\"90\" stroke=\"#24143044\" strokeWidth=\"1.5\" />\n </>)}\n <rect x=\"8\" y=\"6\" width=\"64\" height=\"26\" rx=\"6\" fill={fill(\"home\")} stroke={stroke(\"home\")} />\n <text x=\"40\" y=\"23\" textAnchor=\"middle\" fontSize=\"10\" fontFamily=\"system-ui\">Home</text>\n <rect x=\"78\" y=\"42\" width=\"64\" height=\"26\" rx=\"6\" fill={fill(\"category\")} stroke={stroke(\"category\")} />\n <text x=\"110\" y=\"59\" textAnchor=\"middle\" fontSize=\"10\" fontFamily=\"system-ui\">Category</text>\n <rect x=\"158\" y=\"42\" width=\"64\" height=\"26\" rx=\"6\" fill=\"#fff\" stroke=\"#24143022\" />\n <text x=\"190\" y=\"59\" textAnchor=\"middle\" fontSize=\"10\" fontFamily=\"system-ui\">Category</text>\n <rect x=\"38\" y=\"77\" width=\"64\" height=\"26\" rx=\"6\" fill={fill(\"item\")} stroke={stroke(\"item\")} />\n <text x=\"70\" y=\"94\" textAnchor=\"middle\" fontSize=\"10\" fontFamily=\"system-ui\">Item</text>\n <rect x=\"118\" y=\"77\" width=\"64\" height=\"26\" rx=\"6\" fill=\"#fff\" stroke=\"#24143022\" />\n <text x=\"150\" y=\"94\" textAnchor=\"middle\" fontSize=\"10\" fontFamily=\"system-ui\">Item</text>\n </svg>\n <p style={{ margin: \"8px 0 0\" }}>Content, navigation and functionality organised into a structure — {highlightLevel} level highlighted</p>\n </div>\n );\n}" }
Save
History