Information Architecture

Organisation of content, navigation and functionality.

html

<div class="uif-ia-stage" data-highlight="category">
  <svg viewBox="0 0 300 120" width="100%" height="120" aria-hidden="true" class="uif-ia-svg uif-ia-svg--lines">
    <line x1="40" y1="20" x2="40" y2="55" stroke="#24143044" stroke-width="1.5"/>
    <line x1="40" y1="55" x2="110" y2="55" stroke="#24143044" stroke-width="1.5"/>
    <line x1="40" y1="55" x2="190" y2="55" stroke="#24143044" stroke-width="1.5"/>
    <line x1="110" y1="55" x2="110" y2="90" stroke="#24143044" stroke-width="1.5"/>
    <line x1="110" y1="90" x2="70" y2="90" stroke="#24143044" stroke-width="1.5"/>
    <line x1="110" y1="90" x2="150" y2="90" stroke="#24143044" stroke-width="1.5"/>
    <rect class="uif-ia-node uif-ia-node--home" x="8" y="6" width="64" height="26" rx="6"/>
    <text x="40" y="23" text-anchor="middle" font-size="10" font-family="system-ui">Home</text>
    <rect class="uif-ia-node uif-ia-node--category" x="78" y="42" width="64" height="26" rx="6"/>
    <text x="110" y="59" text-anchor="middle" font-size="10" font-family="system-ui">Category</text>
    <rect x="158" y="42" width="64" height="26" rx="6" fill="#fff" stroke="#24143022"/>
    <text x="190" y="59" text-anchor="middle" font-size="10" font-family="system-ui">Category</text>
    <rect class="uif-ia-node uif-ia-node--item" x="38" y="77" width="64" height="26" rx="6"/>
    <text x="70" y="94" text-anchor="middle" font-size="10" font-family="system-ui">Item</text>
    <rect x="118" y="77" width="64" height="26" rx="6" fill="#fff" stroke="#24143022"/>
    <text x="150" y="94" text-anchor="middle" font-size="10" font-family="system-ui">Item</text>
  </svg>
  <p class="uif-ia-caption">Content, navigation and functionality organised into a structure &mdash; category level highlighted</p>
</div>
<style>
.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; }
.uif-ia-svg { display: block; }
.uif-ia-svg:not(.uif-ia-svg--lines) line { display: none; }
.uif-ia-node { fill: #fff; stroke: #24143022; }
[data-highlight="home"] .uif-ia-node--home,
[data-highlight="category"] .uif-ia-node--category,
[data-highlight="item"] .uif-ia-node--item { fill: #BFD9F2; stroke: #241430; }
.uif-ia-caption { margin: 8px 0 0; }
</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="category">
  <svg viewBox="0 0 300 120" width="100%" height="120" aria-hidden="true" class="tw-ia-svg tw-ia-lines block">
    <line x1="40" y1="20" x2="40" y2="55" stroke="#24143044" stroke-width="1.5"/>
    <line x1="40" y1="55" x2="110" y2="55" stroke="#24143044" stroke-width="1.5"/>
    <line x1="40" y1="55" x2="190" y2="55" stroke="#24143044" stroke-width="1.5"/>
    <line x1="110" y1="55" x2="110" y2="90" stroke="#24143044" stroke-width="1.5"/>
    <line x1="110" y1="90" x2="70" y2="90" stroke="#24143044" stroke-width="1.5"/>
    <line x1="110" y1="90" x2="150" y2="90" stroke="#24143044" stroke-width="1.5"/>
    <rect class="tw-ia-home" x="8" y="6" width="64" height="26" rx="6" fill="#fff" stroke="#24143022"/>
    <text x="40" y="23" text-anchor="middle" font-size="10" font-family="system-ui">Home</text>
    <rect class="tw-ia-category" x="78" y="42" width="64" height="26" rx="6" fill="#fff" stroke="#24143022"/>
    <text x="110" y="59" text-anchor="middle" font-size="10" font-family="system-ui">Category</text>
    <rect x="158" y="42" width="64" height="26" rx="6" fill="#fff" stroke="#24143022"/>
    <text x="190" y="59" text-anchor="middle" font-size="10" font-family="system-ui">Category</text>
    <rect class="tw-ia-item" x="38" y="77" width="64" height="26" rx="6" fill="#fff" stroke="#24143022"/>
    <text x="70" y="94" text-anchor="middle" font-size="10" font-family="system-ui">Item</text>
    <rect x="118" y="77" width="64" height="26" rx="6" fill="#fff" stroke="#24143022"/>
    <text x="150" y="94" text-anchor="middle" font-size="10" font-family="system-ui">Item</text>
  </svg>
  <p class="mt-2">Content, navigation and functionality organised into a structure &mdash; category level highlighted</p>
</div>
<style>
.tw-ia-svg:not(.tw-ia-lines) line { display: none; }
[data-highlight="home"] .tw-ia-home,
[data-highlight="category"] .tw-ia-category,
[data-highlight="item"] .tw-ia-item { fill: #BFD9F2; stroke: #241430; }
</style>

react

export function InformationArchitecture({
  highlightLevel = "category",
  showLines = true,
  accent = "#BFD9F2",
}) {
  const fill = (key) => (highlightLevel === key ? accent : "#fff");
  const stroke = (key) => (highlightLevel === key ? "#241430" : "#24143022");
  return (
    <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" }}>
      <svg viewBox="0 0 300 120" width="100%" height="120" aria-hidden="true" style={{ display: "block" }}>
        {showLines && (<>
          <line x1="40" y1="20" x2="40" y2="55" stroke="#24143044" strokeWidth="1.5" />
          <line x1="40" y1="55" x2="110" y2="55" stroke="#24143044" strokeWidth="1.5" />
          <line x1="40" y1="55" x2="190" y2="55" stroke="#24143044" strokeWidth="1.5" />
          <line x1="110" y1="55" x2="110" y2="90" stroke="#24143044" strokeWidth="1.5" />
          <line x1="110" y1="90" x2="70" y2="90" stroke="#24143044" strokeWidth="1.5" />
          <line x1="110" y1="90" x2="150" y2="90" stroke="#24143044" strokeWidth="1.5" />
        </>)}
        <rect x="8" y="6" width="64" height="26" rx="6" fill={fill("home")} stroke={stroke("home")} />
        <text x="40" y="23" textAnchor="middle" fontSize="10" fontFamily="system-ui">Home</text>
        <rect x="78" y="42" width="64" height="26" rx="6" fill={fill("category")} stroke={stroke("category")} />
        <text x="110" y="59" textAnchor="middle" fontSize="10" fontFamily="system-ui">Category</text>
        <rect x="158" y="42" width="64" height="26" rx="6" fill="#fff" stroke="#24143022" />
        <text x="190" y="59" textAnchor="middle" fontSize="10" fontFamily="system-ui">Category</text>
        <rect x="38" y="77" width="64" height="26" rx="6" fill={fill("item")} stroke={stroke("item")} />
        <text x="70" y="94" textAnchor="middle" fontSize="10" fontFamily="system-ui">Item</text>
        <rect x="118" y="77" width="64" height="26" rx="6" fill="#fff" stroke="#24143022" />
        <text x="150" y="94" textAnchor="middle" fontSize="10" fontFamily="system-ui">Item</text>
      </svg>
      <p style={{ margin: "8px 0 0" }}>Content, navigation and functionality organised into a structure &mdash; {highlightLevel} level highlighted</p>
    </div>
  );
}