Fiche de travail simple

<div id="fiche-de-travail" class="fiche-de-travail" role="complementary">
  <header id="fiche-de-travail-titre" class="landmark-title">
    <h2>Fiche de travail</h2>
  </header>
  <div  id="fiche-de-travail-content">
    <ul class="treeview">
      <li>
        <h3>
          <button data-toggle="collapse" data-target="#bloc" aria-expanded="true" aria-controls="bloc">
            Titre accordéon
          </button>
        </h3>
        <div id="bloc" class="collapse in show">
          <p>
            <label>Clé&nbsp;:</label>
            <span class="valeur">Valeur</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</aside>

Zone post-it

La fiche de travail peut contenir une partie fixe pour conserver certaines informations visibles. Cette zone peut occuper 50% de la hauteur de la fiche de travail.

<div class="fiche-de-travail-block">
  <header id="fiche-de-travail-titre">
    <h2 class="titre">Fiche de travail</h2>
  </header>
</aside>
<aside class="fiche-de-travail-content-sticker" role="complementary" ></aside>
<aside id="fiche-de-travail-content" role="complementary" ></aside>

Fiche de Menu

La fiche de Menu est une fiche de travail contenant des listes de liens ou boutons.

<aside id="fiche-de-travail-content" role="complementary" >
  <ul class="list-link">
    <li><a href="" class="nav-item"><span>...</span></a></li>
    <li>
      <a href=""  class="nav-item has-icon">
        <span>...</span>
      </a>
    </li>
    <li>
      <a href=""  class="nav-item has-icon">
        <span class="icon-sm am-icon icon-star"></span>
        <span>...</span>
      </a>
    </li>
    ...
  </ul>
  <!-- Structure arborescente -->
  <ul class="list-link treeview">
    <li class="node"><h2>...</h2></li>
    <li class="node">...</li>
    <li class="node">
        <ul class="list-link treeview">
            <li class="node"><h3>...</h3></li>
            <li class="node">...</li>
        </ul>
    </li>
  </ul>
</aside>

Test

Test de la fiche de travail sur une largeur réduite

Test struture arborescence

Test de la strucure d'arborescence des menus

<aside id="fiche-de-travail-content" role="complementary" >
  <ul class="list-link treeview">
    <li class="node">
      ...
      <ul class="list-link treeview">
        <li class="node">
          ...
        </li>
      </ul>
    </li>
  </ul>
</aside>