Open demo

CSS code

HTML 
<div><span class="lbl">Company chart with collapsible branches</span>
<figure class="oc-fig" aria-label="Fernwood Studio organisation chart">
<ul class="oc oc-company">
  <li><details open><summary class="oc-card d-ex"><span class="oc-av av-ex" aria-hidden="true">MO</span><span class="oc-txt"><span class="oc-name">Maya Okafor</span><span class="oc-role">Chief Executive</span></span><span class="oc-n">3 reports<svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
    <ul>
      <li><details open><summary class="oc-card d-eng"><span class="oc-av av-eng" aria-hidden="true">DR</span><span class="oc-txt"><span class="oc-name">Daniel Reyes</span><span class="oc-role">Chief Technology Officer</span></span><span class="oc-n">3 reports<svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul>
          <li><div class="oc-card d-eng"><span class="oc-av av-eng" aria-hidden="true">PN</span><span class="oc-txt"><span class="oc-name">Priya Nair</span><span class="oc-role">Engineering Manager</span></span></div></li>
          <li><div class="oc-card d-eng"><span class="oc-av av-eng" aria-hidden="true">TB</span><span class="oc-txt"><span class="oc-name">Tom Becker</span><span class="oc-role">Platform Lead</span></span></div></li>
          <li><div class="oc-card d-eng"><span class="oc-av av-eng" aria-hidden="true">LF</span><span class="oc-txt"><span class="oc-name">Lena Fischer</span><span class="oc-role">QA Lead</span></span></div></li>
        </ul>
      </details></li>
      <li><details open><summary class="oc-card d-ops"><span class="oc-av av-ops" aria-hidden="true">SM</span><span class="oc-txt"><span class="oc-name">Sofia Marin</span><span class="oc-role">Chief Operating Officer</span></span><span class="oc-n">2 reports<svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul>
          <li><div class="oc-card d-ops"><span class="oc-av av-ops" aria-hidden="true">AH</span><span class="oc-txt"><span class="oc-name">Ahmed Haddad</span><span class="oc-role">Customer Success</span></span></div></li>
          <li><div class="oc-card d-ops"><span class="oc-av av-ops" aria-hidden="true">JN</span><span class="oc-txt"><span class="oc-name">Julia Novak</span><span class="oc-role">Operations Lead</span></span></div></li>
        </ul>
      </details></li>
      <li><details><summary class="oc-card d-fin"><span class="oc-av av-fin" aria-hidden="true">OP</span><span class="oc-txt"><span class="oc-name">Owen Price</span><span class="oc-role">Chief Financial Officer</span></span><span class="oc-n">2 reports<svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul>
          <li><div class="oc-card d-fin"><span class="oc-av av-fin" aria-hidden="true">HS</span><span class="oc-txt"><span class="oc-name">Hana Sato</span><span class="oc-role">Financial Controller</span></span></div></li>
          <li><div class="oc-card d-fin"><span class="oc-av av-fin" aria-hidden="true">MB</span><span class="oc-txt"><span class="oc-name">Marco Bellini</span><span class="oc-role">FP&A Analyst</span></span></div></li>
        </ul>
      </details></li>
    </ul>
  </details></li>
</ul>
</figure>
</div>
<div><span class="lbl">Team chart with department colours</span>
<figure class="oc-fig" aria-label="Design team chart">
<ul class="oc oc-team">
  <li><details open><summary class="oc-card d-ex"><span class="oc-av av-ex" aria-hidden="true">ID</span><span class="oc-txt"><span class="oc-name">Ines Duarte</span><span class="oc-role">Head of Design</span></span><span class="oc-n">3<span class="sr-only"> reports</span><svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
    <ul>
      <li><details open><summary class="oc-card d-eng"><span class="oc-av av-eng" aria-hidden="true">KA</span><span class="oc-txt"><span class="oc-name">Kai Andersen</span><span class="oc-role">Product Design Lead</span></span><span class="oc-n">2<span class="sr-only"> reports</span><svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul>
          <li><div class="oc-card d-eng"><span class="oc-av av-eng" aria-hidden="true">RL</span><span class="oc-txt"><span class="oc-name">Rosa Lima</span><span class="oc-role">Product Designer</span></span></div></li>
          <li><div class="oc-card d-eng"><span class="oc-av av-eng" aria-hidden="true">BC</span><span class="oc-txt"><span class="oc-name">Ben Carter</span><span class="oc-role">Product Designer</span></span></div></li>
        </ul>
      </details></li>
      <li><details open><summary class="oc-card d-fin"><span class="oc-av av-fin" aria-hidden="true">NA</span><span class="oc-txt"><span class="oc-name">Noor Aziz</span><span class="oc-role">Brand Lead</span></span><span class="oc-n">1<span class="sr-only"> report</span><svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul>
          <li><div class="oc-card d-fin"><span class="oc-av av-fin" aria-hidden="true">EM</span><span class="oc-txt"><span class="oc-name">Eli Moreau</span><span class="oc-role">Illustrator</span></span></div></li>
        </ul>
      </details></li>
      <li><div class="oc-card d-ops"><span class="oc-av av-ops" aria-hidden="true">GL</span><span class="oc-txt"><span class="oc-name">Grace Liu</span><span class="oc-role">UX Researcher</span></span></div></li>
    </ul>
  </details></li>
</ul>
</figure>
</div>
CSS 
/* Org chart: nested lists, <details> on every manager so a branch folds away. Below 1100px it is an
   indented list with elbow connectors; from 1100px the same markup lays out top-down with CSS connectors. */
.oc{--oc-line:#a9b2bf;--oc-accent:#c2410c;--oc-gap:20px}
.oc details>summary{list-style:none}
.oc details>summary::-webkit-details-marker{display:none}
.oc li{position:relative}
@media (max-width:1099.98px){
  .oc ul{margin-left:17px}
  .oc ul>li{padding:10px 0 0 22px}
  .oc ul>li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1.5px solid var(--oc-line)}
  .oc ul>li::after{content:"";position:absolute;left:0;top:0;width:22px;height:38px;border:0 solid var(--oc-line);
    border-left-width:1.5px;border-bottom-width:1.5px;border-bottom-left-radius:10px}
  .oc ul>li:last-child::before{display:none}
}
@media (min-width:1100px){
  .oc{display:flex;justify-content:center}
  .oc ul{display:flex;justify-content:center;position:relative;padding-top:var(--oc-gap)}
  .oc ul::before{content:"";position:absolute;top:0;left:50%;height:var(--oc-gap);border-left:1.5px solid var(--oc-line)}
  .oc ul>li{padding:var(--oc-gap) 6px 0}
  .oc ul>li::before,.oc ul>li::after{content:"";position:absolute;top:0;width:50%;height:var(--oc-gap);border:0 solid var(--oc-line);border-top-width:1.5px}
  .oc ul>li::before{right:50%}
  .oc ul>li::after{left:50%;border-left-width:1.5px}
  .oc ul>li:first-child::before{border:0}
  .oc ul>li:first-child::after{border-top-left-radius:10px}
  .oc ul>li:last-child::after{border:0}
  .oc ul>li:last-child::before{border-right-width:1.5px;border-top-right-radius:10px;width:calc(50% + 1.5px)}
  .oc ul>li:only-child::before{display:none}
  .oc ul>li:only-child::after{border-top:0;border-radius:0}
  .oc li>details>summary,.oc li>div{margin:0 auto}
}
.oc-chev{width:12px;height:12px;transition:transform .15s ease}
.oc details[open]>summary .oc-chev{transform:rotate(180deg)}
.oc summary.oc-card{cursor:pointer}
.oc summary.oc-card:hover{border-color:var(--oc-accent)}
.oc summary.oc-card:focus-visible{outline:2px solid var(--oc-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.oc-chev{transition:none}}
.oc,.oc ul{margin-top:0;margin-bottom:0;padding-left:0;list-style:none}
.oc-fig{margin:0}
.oc-card{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border:1px solid #dfe3ea;border-radius:12px;
  box-shadow:0 6px 18px -12px rgba(15,23,42,.35);text-align:left}
.oc-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;font-size:.8rem;font-weight:700}
.av-ex{background:#e2e8f0;color:#1e293b}.av-eng{background:#dbeafe;color:#1e3a8a}.av-ops{background:#dcfce7;color:#14532d}.av-fin{background:#fef3c7;color:#78350f}
.oc-team .d-ex{border-left-color:#64748b}.oc-team .d-eng{border-left-color:#2563eb}.oc-team .d-ops{border-left-color:#16a34a}.oc-team .d-fin{border-left-color:#d97706}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.oc-txt{display:flex;flex-direction:column;min-width:0}
.oc-name{font-size:.86rem;line-height:1.25;font-weight:600;color:#111827}
.oc-role{font-size:.76rem;line-height:1.3;color:#525c6b}
.oc-n{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:2px 8px;border-radius:99px;background:#fff1e8;color:#9a3412;font-size:.72rem;font-weight:600;white-space:nowrap;flex:none}
.oc-team .oc-card{border-left-width:4px}
@media (min-width:1100px){
  .oc-company .oc-card{flex-direction:column;gap:6px;width:152px;padding:14px 10px 12px;text-align:center}
  .oc-company .oc-av{width:44px;height:44px;font-size:.9rem}
  .oc-company .oc-n{margin:4px 0 0}
  .oc-team .oc-card{width:230px}
}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Company chart with collapsible branches</span>
<figure class="oc-fig" aria-label="Fernwood Studio organisation chart">
<ul class="oc oc-company list-unstyled mb-0">
  <li><details open><summary class="oc-card bg-white border rounded-3 d-ex"><span class="oc-av av-ex rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">MO</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Maya Okafor</span><span class="oc-role text-body-secondary">Chief Executive</span></span><span class="oc-n badge rounded-pill d-inline-flex align-items-center gap-1">3 reports<svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
    <ul class="list-unstyled mb-0">
      <li><details open><summary class="oc-card bg-white border rounded-3 d-eng"><span class="oc-av av-eng rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">DR</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Daniel Reyes</span><span class="oc-role text-body-secondary">Chief Technology Officer</span></span><span class="oc-n badge rounded-pill d-inline-flex align-items-center gap-1">3 reports<svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul class="list-unstyled mb-0">
          <li><div class="oc-card bg-white border rounded-3 d-eng"><span class="oc-av av-eng rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">PN</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Priya Nair</span><span class="oc-role text-body-secondary">Engineering Manager</span></span></div></li>
          <li><div class="oc-card bg-white border rounded-3 d-eng"><span class="oc-av av-eng rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">TB</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Tom Becker</span><span class="oc-role text-body-secondary">Platform Lead</span></span></div></li>
          <li><div class="oc-card bg-white border rounded-3 d-eng"><span class="oc-av av-eng rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">LF</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Lena Fischer</span><span class="oc-role text-body-secondary">QA Lead</span></span></div></li>
        </ul>
      </details></li>
      <li><details open><summary class="oc-card bg-white border rounded-3 d-ops"><span class="oc-av av-ops rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">SM</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Sofia Marin</span><span class="oc-role text-body-secondary">Chief Operating Officer</span></span><span class="oc-n badge rounded-pill d-inline-flex align-items-center gap-1">2 reports<svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul class="list-unstyled mb-0">
          <li><div class="oc-card bg-white border rounded-3 d-ops"><span class="oc-av av-ops rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">AH</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Ahmed Haddad</span><span class="oc-role text-body-secondary">Customer Success</span></span></div></li>
          <li><div class="oc-card bg-white border rounded-3 d-ops"><span class="oc-av av-ops rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">JN</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Julia Novak</span><span class="oc-role text-body-secondary">Operations Lead</span></span></div></li>
        </ul>
      </details></li>
      <li><details><summary class="oc-card bg-white border rounded-3 d-fin"><span class="oc-av av-fin rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">OP</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Owen Price</span><span class="oc-role text-body-secondary">Chief Financial Officer</span></span><span class="oc-n badge rounded-pill d-inline-flex align-items-center gap-1">2 reports<svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul class="list-unstyled mb-0">
          <li><div class="oc-card bg-white border rounded-3 d-fin"><span class="oc-av av-fin rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">HS</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Hana Sato</span><span class="oc-role text-body-secondary">Financial Controller</span></span></div></li>
          <li><div class="oc-card bg-white border rounded-3 d-fin"><span class="oc-av av-fin rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">MB</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Marco Bellini</span><span class="oc-role text-body-secondary">FP&A Analyst</span></span></div></li>
        </ul>
      </details></li>
    </ul>
  </details></li>
</ul>
</figure>
</div>
<div><span class="lbl">Team chart with department colours</span>
<figure class="oc-fig" aria-label="Design team chart">
<ul class="oc oc-team list-unstyled mb-0">
  <li><details open><summary class="oc-card bg-white border rounded-3 d-ex"><span class="oc-av av-ex rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">ID</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Ines Duarte</span><span class="oc-role text-body-secondary">Head of Design</span></span><span class="oc-n badge rounded-pill d-inline-flex align-items-center gap-1">3<span class="visually-hidden"> reports</span><svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
    <ul class="list-unstyled mb-0">
      <li><details open><summary class="oc-card bg-white border rounded-3 d-eng"><span class="oc-av av-eng rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">KA</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Kai Andersen</span><span class="oc-role text-body-secondary">Product Design Lead</span></span><span class="oc-n badge rounded-pill d-inline-flex align-items-center gap-1">2<span class="visually-hidden"> reports</span><svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul class="list-unstyled mb-0">
          <li><div class="oc-card bg-white border rounded-3 d-eng"><span class="oc-av av-eng rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">RL</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Rosa Lima</span><span class="oc-role text-body-secondary">Product Designer</span></span></div></li>
          <li><div class="oc-card bg-white border rounded-3 d-eng"><span class="oc-av av-eng rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">BC</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Ben Carter</span><span class="oc-role text-body-secondary">Product Designer</span></span></div></li>
        </ul>
      </details></li>
      <li><details open><summary class="oc-card bg-white border rounded-3 d-fin"><span class="oc-av av-fin rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">NA</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Noor Aziz</span><span class="oc-role text-body-secondary">Brand Lead</span></span><span class="oc-n badge rounded-pill d-inline-flex align-items-center gap-1">1<span class="visually-hidden"> report</span><svg class="oc-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul class="list-unstyled mb-0">
          <li><div class="oc-card bg-white border rounded-3 d-fin"><span class="oc-av av-fin rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">EM</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Eli Moreau</span><span class="oc-role text-body-secondary">Illustrator</span></span></div></li>
        </ul>
      </details></li>
      <li><div class="oc-card bg-white border rounded-3 d-ops"><span class="oc-av av-ops rounded-circle d-inline-flex align-items-center justify-content-center fw-bold" aria-hidden="true">GL</span><span class="oc-txt d-flex flex-column"><span class="oc-name fw-semibold">Grace Liu</span><span class="oc-role text-body-secondary">UX Researcher</span></span></div></li>
    </ul>
  </details></li>
</ul>
</figure>
</div>
CSS 
/* Org chart: nested lists, <details> on every manager so a branch folds away. Below 1100px it is an
   indented list with elbow connectors; from 1100px the same markup lays out top-down with CSS connectors. */
.oc{--oc-line:#a9b2bf;--oc-accent:#c2410c;--oc-gap:20px}
.oc details>summary{list-style:none}
.oc details>summary::-webkit-details-marker{display:none}
.oc li{position:relative}
@media (max-width:1099.98px){
  .oc ul{margin-left:17px}
  .oc ul>li{padding:10px 0 0 22px}
  .oc ul>li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1.5px solid var(--oc-line)}
  .oc ul>li::after{content:"";position:absolute;left:0;top:0;width:22px;height:38px;border:0 solid var(--oc-line);
    border-left-width:1.5px;border-bottom-width:1.5px;border-bottom-left-radius:10px}
  .oc ul>li:last-child::before{display:none}
}
@media (min-width:1100px){
  .oc{display:flex;justify-content:center}
  .oc ul{display:flex;justify-content:center;position:relative;padding-top:var(--oc-gap)}
  .oc ul::before{content:"";position:absolute;top:0;left:50%;height:var(--oc-gap);border-left:1.5px solid var(--oc-line)}
  .oc ul>li{padding:var(--oc-gap) 6px 0}
  .oc ul>li::before,.oc ul>li::after{content:"";position:absolute;top:0;width:50%;height:var(--oc-gap);border:0 solid var(--oc-line);border-top-width:1.5px}
  .oc ul>li::before{right:50%}
  .oc ul>li::after{left:50%;border-left-width:1.5px}
  .oc ul>li:first-child::before{border:0}
  .oc ul>li:first-child::after{border-top-left-radius:10px}
  .oc ul>li:last-child::after{border:0}
  .oc ul>li:last-child::before{border-right-width:1.5px;border-top-right-radius:10px;width:calc(50% + 1.5px)}
  .oc ul>li:only-child::before{display:none}
  .oc ul>li:only-child::after{border-top:0;border-radius:0}
  .oc li>details>summary,.oc li>div{margin:0 auto}
}
.oc-chev{width:12px;height:12px;transition:transform .15s ease}
.oc details[open]>summary .oc-chev{transform:rotate(180deg)}
.oc summary.oc-card{cursor:pointer}
.oc summary.oc-card:hover{border-color:var(--oc-accent)}
.oc summary.oc-card:focus-visible{outline:2px solid var(--oc-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.oc-chev{transition:none}}
.oc-fig{margin:0}
.oc-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border-color:#dfe3ea!important;box-shadow:0 6px 18px -12px rgba(15,23,42,.35);text-align:left}
.oc-av{flex:none;width:36px;height:36px;font-size:.8rem}
.av-ex{background:#e2e8f0;color:#1e293b}.av-eng{background:#dbeafe;color:#1e3a8a}.av-ops{background:#dcfce7;color:#14532d}.av-fin{background:#fef3c7;color:#78350f}
.oc-team .d-ex{border-left-color:#64748b!important}.oc-team .d-eng{border-left-color:#2563eb!important}.oc-team .d-ops{border-left-color:#16a34a!important}.oc-team .d-fin{border-left-color:#d97706!important}
.oc-txt{min-width:0}
.oc-name{font-size:.86rem;line-height:1.25;color:#111827}
.oc-role{font-size:.76rem;line-height:1.3;color:#525c6b!important}
.oc-n{--bs-badge-padding-x:8px;--bs-badge-padding-y:3px;--bs-badge-font-size:.72rem;--bs-badge-font-weight:600;--bs-badge-color:#9a3412;margin-left:auto;flex:none;background:#fff1e8}
.oc-team .oc-card{border-left-width:4px!important}
@media (min-width:1100px){
  .oc-company .oc-card{flex-direction:column;gap:6px;width:152px;padding:14px 10px 12px;text-align:center}
  .oc-company .oc-av{width:44px;height:44px;font-size:.9rem}
  .oc-company .oc-n{margin:4px 0 0}
  .oc-team .oc-card{width:230px}
}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6577] uppercase">Company chart with collapsible branches</span>
<figure class="m-0" aria-label="Fernwood Studio organisation chart">
<ul class="oc m-0 list-none p-0 oc-company">
  <li><details open><summary class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[152px] min-[1100px]:flex-col min-[1100px]:gap-1.5 min-[1100px]:px-2.5 min-[1100px]:pt-3.5 min-[1100px]:pb-3 min-[1100px]:text-center cursor-pointer list-none hover:border-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] [&::-webkit-details-marker]:hidden"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#e2e8f0] text-[#1e293b] size-9 text-[.8rem] min-[1100px]:size-11 min-[1100px]:text-[.9rem]" aria-hidden="true">MO</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Maya Okafor</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Chief Executive</span></span><span class="inline-flex flex-none items-center gap-1 whitespace-nowrap rounded-full bg-[#fff1e8] px-2 py-0.5 text-[.72rem] font-semibold text-[#9a3412] ml-auto min-[1100px]:mt-1 min-[1100px]:ml-0">3 reports<svg class="size-3 transition-transform duration-150 motion-reduce:transition-none [details[open]>summary_&]:rotate-180" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
    <ul class="m-0 list-none p-0">
      <li><details open><summary class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[152px] min-[1100px]:flex-col min-[1100px]:gap-1.5 min-[1100px]:px-2.5 min-[1100px]:pt-3.5 min-[1100px]:pb-3 min-[1100px]:text-center cursor-pointer list-none hover:border-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] [&::-webkit-details-marker]:hidden"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#dbeafe] text-[#1e3a8a] size-9 text-[.8rem] min-[1100px]:size-11 min-[1100px]:text-[.9rem]" aria-hidden="true">DR</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Daniel Reyes</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Chief Technology Officer</span></span><span class="inline-flex flex-none items-center gap-1 whitespace-nowrap rounded-full bg-[#fff1e8] px-2 py-0.5 text-[.72rem] font-semibold text-[#9a3412] ml-auto min-[1100px]:mt-1 min-[1100px]:ml-0">3 reports<svg class="size-3 transition-transform duration-150 motion-reduce:transition-none [details[open]>summary_&]:rotate-180" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul class="m-0 list-none p-0">
          <li><div class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[152px] min-[1100px]:flex-col min-[1100px]:gap-1.5 min-[1100px]:px-2.5 min-[1100px]:pt-3.5 min-[1100px]:pb-3 min-[1100px]:text-center"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#dbeafe] text-[#1e3a8a] size-9 text-[.8rem] min-[1100px]:size-11 min-[1100px]:text-[.9rem]" aria-hidden="true">PN</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Priya Nair</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Engineering Manager</span></span></div></li>
          <li><div class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[152px] min-[1100px]:flex-col min-[1100px]:gap-1.5 min-[1100px]:px-2.5 min-[1100px]:pt-3.5 min-[1100px]:pb-3 min-[1100px]:text-center"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#dbeafe] text-[#1e3a8a] size-9 text-[.8rem] min-[1100px]:size-11 min-[1100px]:text-[.9rem]" aria-hidden="true">TB</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Tom Becker</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Platform Lead</span></span></div></li>
          <li><div class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[152px] min-[1100px]:flex-col min-[1100px]:gap-1.5 min-[1100px]:px-2.5 min-[1100px]:pt-3.5 min-[1100px]:pb-3 min-[1100px]:text-center"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#dbeafe] text-[#1e3a8a] size-9 text-[.8rem] min-[1100px]:size-11 min-[1100px]:text-[.9rem]" aria-hidden="true">LF</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Lena Fischer</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">QA Lead</span></span></div></li>
        </ul>
      </details></li>
      <li><details open><summary class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[152px] min-[1100px]:flex-col min-[1100px]:gap-1.5 min-[1100px]:px-2.5 min-[1100px]:pt-3.5 min-[1100px]:pb-3 min-[1100px]:text-center cursor-pointer list-none hover:border-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] [&::-webkit-details-marker]:hidden"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#dcfce7] text-[#14532d] size-9 text-[.8rem] min-[1100px]:size-11 min-[1100px]:text-[.9rem]" aria-hidden="true">SM</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Sofia Marin</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Chief Operating Officer</span></span><span class="inline-flex flex-none items-center gap-1 whitespace-nowrap rounded-full bg-[#fff1e8] px-2 py-0.5 text-[.72rem] font-semibold text-[#9a3412] ml-auto min-[1100px]:mt-1 min-[1100px]:ml-0">2 reports<svg class="size-3 transition-transform duration-150 motion-reduce:transition-none [details[open]>summary_&]:rotate-180" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul class="m-0 list-none p-0">
          <li><div class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[152px] min-[1100px]:flex-col min-[1100px]:gap-1.5 min-[1100px]:px-2.5 min-[1100px]:pt-3.5 min-[1100px]:pb-3 min-[1100px]:text-center"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#dcfce7] text-[#14532d] size-9 text-[.8rem] min-[1100px]:size-11 min-[1100px]:text-[.9rem]" aria-hidden="true">AH</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Ahmed Haddad</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Customer Success</span></span></div></li>
          <li><div class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[152px] min-[1100px]:flex-col min-[1100px]:gap-1.5 min-[1100px]:px-2.5 min-[1100px]:pt-3.5 min-[1100px]:pb-3 min-[1100px]:text-center"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#dcfce7] text-[#14532d] size-9 text-[.8rem] min-[1100px]:size-11 min-[1100px]:text-[.9rem]" aria-hidden="true">JN</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Julia Novak</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Operations Lead</span></span></div></li>
        </ul>
      </details></li>
      <li><details><summary class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[152px] min-[1100px]:flex-col min-[1100px]:gap-1.5 min-[1100px]:px-2.5 min-[1100px]:pt-3.5 min-[1100px]:pb-3 min-[1100px]:text-center cursor-pointer list-none hover:border-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] [&::-webkit-details-marker]:hidden"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#fef3c7] text-[#78350f] size-9 text-[.8rem] min-[1100px]:size-11 min-[1100px]:text-[.9rem]" aria-hidden="true">OP</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Owen Price</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Chief Financial Officer</span></span><span class="inline-flex flex-none items-center gap-1 whitespace-nowrap rounded-full bg-[#fff1e8] px-2 py-0.5 text-[.72rem] font-semibold text-[#9a3412] ml-auto min-[1100px]:mt-1 min-[1100px]:ml-0">2 reports<svg class="size-3 transition-transform duration-150 motion-reduce:transition-none [details[open]>summary_&]:rotate-180" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul class="m-0 list-none p-0">
          <li><div class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[152px] min-[1100px]:flex-col min-[1100px]:gap-1.5 min-[1100px]:px-2.5 min-[1100px]:pt-3.5 min-[1100px]:pb-3 min-[1100px]:text-center"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#fef3c7] text-[#78350f] size-9 text-[.8rem] min-[1100px]:size-11 min-[1100px]:text-[.9rem]" aria-hidden="true">HS</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Hana Sato</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Financial Controller</span></span></div></li>
          <li><div class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[152px] min-[1100px]:flex-col min-[1100px]:gap-1.5 min-[1100px]:px-2.5 min-[1100px]:pt-3.5 min-[1100px]:pb-3 min-[1100px]:text-center"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#fef3c7] text-[#78350f] size-9 text-[.8rem] min-[1100px]:size-11 min-[1100px]:text-[.9rem]" aria-hidden="true">MB</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Marco Bellini</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">FP&A Analyst</span></span></div></li>
        </ul>
      </details></li>
    </ul>
  </details></li>
</ul>
</figure>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6577] uppercase">Team chart with department colours</span>
<figure class="m-0" aria-label="Design team chart">
<ul class="oc m-0 list-none p-0 oc-team">
  <li><details open><summary class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[230px] border-l-4 border-l-[#64748b] cursor-pointer list-none hover:border-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] [&::-webkit-details-marker]:hidden"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#e2e8f0] text-[#1e293b] size-9 text-[.8rem]" aria-hidden="true">ID</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Ines Duarte</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Head of Design</span></span><span class="inline-flex flex-none items-center gap-1 whitespace-nowrap rounded-full bg-[#fff1e8] px-2 py-0.5 text-[.72rem] font-semibold text-[#9a3412] ml-auto">3<span class="sr-only"> reports</span><svg class="size-3 transition-transform duration-150 motion-reduce:transition-none [details[open]>summary_&]:rotate-180" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
    <ul class="m-0 list-none p-0">
      <li><details open><summary class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[230px] border-l-4 border-l-[#2563eb] cursor-pointer list-none hover:border-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] [&::-webkit-details-marker]:hidden"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#dbeafe] text-[#1e3a8a] size-9 text-[.8rem]" aria-hidden="true">KA</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Kai Andersen</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Product Design Lead</span></span><span class="inline-flex flex-none items-center gap-1 whitespace-nowrap rounded-full bg-[#fff1e8] px-2 py-0.5 text-[.72rem] font-semibold text-[#9a3412] ml-auto">2<span class="sr-only"> reports</span><svg class="size-3 transition-transform duration-150 motion-reduce:transition-none [details[open]>summary_&]:rotate-180" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul class="m-0 list-none p-0">
          <li><div class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[230px] border-l-4 border-l-[#2563eb]"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#dbeafe] text-[#1e3a8a] size-9 text-[.8rem]" aria-hidden="true">RL</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Rosa Lima</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Product Designer</span></span></div></li>
          <li><div class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[230px] border-l-4 border-l-[#2563eb]"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#dbeafe] text-[#1e3a8a] size-9 text-[.8rem]" aria-hidden="true">BC</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Ben Carter</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Product Designer</span></span></div></li>
        </ul>
      </details></li>
      <li><details open><summary class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[230px] border-l-4 border-l-[#d97706] cursor-pointer list-none hover:border-[#c2410c] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#c2410c] [&::-webkit-details-marker]:hidden"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#fef3c7] text-[#78350f] size-9 text-[.8rem]" aria-hidden="true">NA</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Noor Aziz</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Brand Lead</span></span><span class="inline-flex flex-none items-center gap-1 whitespace-nowrap rounded-full bg-[#fff1e8] px-2 py-0.5 text-[.72rem] font-semibold text-[#9a3412] ml-auto">1<span class="sr-only"> report</span><svg class="size-3 transition-transform duration-150 motion-reduce:transition-none [details[open]>summary_&]:rotate-180" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></summary>
        <ul class="m-0 list-none p-0">
          <li><div class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[230px] border-l-4 border-l-[#d97706]"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#fef3c7] text-[#78350f] size-9 text-[.8rem]" aria-hidden="true">EM</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Eli Moreau</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">Illustrator</span></span></div></li>
        </ul>
      </details></li>
      <li><div class="oc-card flex items-center gap-3 rounded-xl border border-[#dfe3ea] bg-white px-3 py-2.5 text-left shadow-[0_6px_18px_-12px_rgba(15,23,42,.35)] min-[1100px]:w-[230px] border-l-4 border-l-[#16a34a]"><span class="inline-flex flex-none items-center justify-center rounded-full font-bold bg-[#dcfce7] text-[#14532d] size-9 text-[.8rem]" aria-hidden="true">GL</span><span class="flex min-w-0 flex-col"><span class="text-[.86rem] leading-[1.25] font-semibold text-[#111827]">Grace Liu</span><span class="text-[.76rem] leading-[1.3] text-[#525c6b]">UX Researcher</span></span></div></li>
    </ul>
  </details></li>
</ul>
</figure>
</div>
CSS 
/* Connector lines are pseudo-elements on every nested <li>, so they live here; the cards are utilities. */
/* Org chart: nested lists, <details> on every manager so a branch folds away. Below 1100px it is an
   indented list with elbow connectors; from 1100px the same markup lays out top-down with CSS connectors. */
.oc{--oc-line:#a9b2bf;--oc-accent:#c2410c;--oc-gap:20px}
.oc details>summary{list-style:none}
.oc details>summary::-webkit-details-marker{display:none}
.oc li{position:relative}
@media (max-width:1099.98px){
  .oc ul{margin-left:17px}
  .oc ul>li{padding:10px 0 0 22px}
  .oc ul>li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1.5px solid var(--oc-line)}
  .oc ul>li::after{content:"";position:absolute;left:0;top:0;width:22px;height:38px;border:0 solid var(--oc-line);
    border-left-width:1.5px;border-bottom-width:1.5px;border-bottom-left-radius:10px}
  .oc ul>li:last-child::before{display:none}
}
@media (min-width:1100px){
  .oc{display:flex;justify-content:center}
  .oc ul{display:flex;justify-content:center;position:relative;padding-top:var(--oc-gap)}
  .oc ul::before{content:"";position:absolute;top:0;left:50%;height:var(--oc-gap);border-left:1.5px solid var(--oc-line)}
  .oc ul>li{padding:var(--oc-gap) 6px 0}
  .oc ul>li::before,.oc ul>li::after{content:"";position:absolute;top:0;width:50%;height:var(--oc-gap);border:0 solid var(--oc-line);border-top-width:1.5px}
  .oc ul>li::before{right:50%}
  .oc ul>li::after{left:50%;border-left-width:1.5px}
  .oc ul>li:first-child::before{border:0}
  .oc ul>li:first-child::after{border-top-left-radius:10px}
  .oc ul>li:last-child::after{border:0}
  .oc ul>li:last-child::before{border-right-width:1.5px;border-top-right-radius:10px;width:calc(50% + 1.5px)}
  .oc ul>li:only-child::before{display:none}
  .oc ul>li:only-child::after{border-top:0;border-radius:0}
  .oc li>details>summary,.oc li>div{margin:0 auto}
}

About this set

Two organisation charts drawn from nested lists. Company chart with collapsible branches shows a studio’s chief executive, three chiefs and their reports as cards with initials avatars, and the finance branch starts folded. Team chart with department colours is a design team with wider cards, a coloured left edge for each discipline and a compact report count. On screens 1100px and wider the chart lays out top-down: each list becomes a centred flex row and every list item draws half of the horizontal bar with ::before and ::after, so the bar always runs from the first child to the last, with rounded corners at the ends and a drop line from the manager. Below 1100px the same markup becomes an indented list with elbow connectors, so a phone never has to scroll sideways. Every manager is a details element whose summary is the card, so a branch can be folded with a click or the keyboard and the connectors disappear with it. Use it for team pages, about pages and internal directories.

What’s included

  • Top-down chart on wide screens, indented list on phones, same markup
  • Connector bars from ::before and ::after with rounded corners
  • Collapsible branches using details and summary, no JavaScript
  • Report counts on manager cards, department colours in the team chart
  • Plain CSS, Bootstrap 5 and Tailwind CSS 4 versions

Accessibility

The chart is a figure with an aria-label and stays a nested list, so screen readers hear the hierarchy as list levels. Each manager card is a summary, announced as expandable with its name, title and number of reports. Cards show a 2px orange outline on keyboard focus, the initials are hidden from assistive technology because the name follows, and the chevron stops rotating under prefers-reduced-motion.

Customise it

Change --oc-line, --oc-accent and --oc-gap on .oc for connector colour, hover and focus colour and the vertical gap, and the .av-* classes for avatar colours. Card widths for the top-down layout are set in the min-width 1100px block.