# Organization chart

> A reporting line drawn top down, with each person as a card under their manager.

## Anatomy

A `<ul class="org-chart">` draws a reporting line top down, with each person as a card under their manager.

Write each person as an `<li>`. A person with reports holds a `<details open>`. Its `<summary class="org-chart-node">` is the card and its nested `<ul>` holds the reports, so selecting a card folds the team away. A person without reports holds a `<div class="org-chart-node">`.

A card stacks an optional `.org-chart-role` band first, then an `.avatar` and an `.org-chart-name`. The stylesheet draws the lines between cards. A chart wider than its container scrolls sideways inside the list. The org chart is CSS only.

-   CIOMarisol Okafor
    
    -   ManagerTobias Lindqvist
        
        -   SEPriya Raman
            
        
    -   DirectorDesmond Achebe
        
        -   PMLena Kowalczyk
            
            -   OperationsRafael Montoya
                
            -   DevelopmentHana Sato
                
            
        
    -   ManagerOliver Brennan
        
        -   SAAmara Nwosu
            
        -   SPFelix Duarte
            
        
    -   R&DIngrid Halvorsen
        
    

```
<ul class="org-chart" aria-label="Company staff">
  <li>
    <details open>
      <summary class="org-chart-node">
        <span class="org-chart-role">CIO</span>
        <img class="avatar large" src="marisol.jpg" alt="">
        <span class="org-chart-name">Marisol Okafor</span>
      </summary>
      <ul>
        <li>
          <div class="org-chart-node">
            <span class="org-chart-role">R&amp;D</span>
            <span class="avatar large" aria-hidden="true">IH</span>
            <span class="org-chart-name">Ingrid Halvorsen</span>
          </div>
        </li>
      </ul>
    </details>
  </li>
</ul>
```

## Linked profiles

To link a person without reports to their profile, write the card as `<a class="org-chart-node">`. Keep a manager's card a `<summary>`, because a link inside a summary competes with opening the team. Put a profile link for a manager elsewhere on the page.

```
<li>
  <a class="org-chart-node" href="/people/ingrid-halvorsen">
    <span class="org-chart-role">R&amp;D</span>
    <img class="avatar large" src="ingrid.jpg" alt="">
    <span class="org-chart-name">Ingrid Halvorsen</span>
  </a>
</li>
```

## Accessibility

Name the root list with `aria-label`. The nested lists carry the hierarchy, so a screen reader announces each list's size and level. The drawn lines stay silent. When the name follows the avatar, give an avatar image an empty `alt` and an initials avatar `aria-hidden="true"`. Otherwise the screen reader reads the name twice.

Each manager is a Tab stop, and Enter or Space opens or closes the team. The chart takes no `role="tree"`, for the same reason as the [tree](tree.html). That role promises arrow-key navigation that native disclosures do not provide.

## Tokens

Override these on the `.org-chart`.

| Token | Default |
| --- | --- |
| `--md-comp-org-chart-line-color` | `--md-sys-color-outline-variant` |
| `--md-comp-org-chart-line-length` | 24px |
| `--md-comp-org-chart-gap` | 16px |
| `--md-comp-org-chart-node-container-color` | `--md-sys-color-surface-container-high` |
| `--md-comp-org-chart-node-shape` | 12px |
| `--md-comp-org-chart-role-container-color` | `--md-sys-color-primary-container` |
| `--md-comp-org-chart-role-color` | `--md-sys-color-on-primary-container` |