Trees

Expandable tree structure

Expandable and Expanded

Directory 1
Directory 2
Directory 3
- File 1
- File 2
- File 3
- File 4
Directory 4
Directory 5

(empty)

<ul class="c-tree">
  <li class="c-tree__item c-tree__item--expandable"><span class="c-link">Directory 1</span></li>
  <li class="c-tree__item c-tree__item--expandable"><span class="c-link">Directory 2</span></li>
  <li class="c-tree__item c-tree__item--expanded"><span class="c-link">Directory 3</span>
    <ul class="c-tree">
      <li class="c-tree__item">File 1</li>
      <li class="c-tree__item">File 2</li>
      <li class="c-tree__item">File 3</li>
      <li class="c-tree__item">File 4</li>
    </ul>
  </li>
  </li>
  <li class="c-tree__item c-tree__item--expandable"><span class="c-link">Directory 4</span></li>
  <li class="c-tree__item c-tree__item--expanded"><span class="c-link">Directory 5</span></li>
  <ul class="c-tree">
    <li class="c-tree__item c-text--quiet">(empty)</li>
  </ul>
  </li>
</ul>

Animation

Directory 1
Directory 2
Directory 3
- File 1
- File 2
- File 3
- File 4
Directory 4
Directory 5

(empty)

.a-tree

Apply the .a-tree class to enable animation on the tree and all tree nodes.

--slow, --fast

Every animation comes with slow and fast modifiers.