Skip to main content

# Liens et icônes

# Liens

Lien Lien avec icône Lien avec icône taille standard Lien avec icône gtande taille

    <a class="nav-link" href="#">
      <span>...</span>
    </a>
    <a class="nav-link" href="#">
      <span class="am-icon icon-arrow-right icon-sm"></span>
      <span>...</span>
    </a>
    <a class="nav-link" href="#">
      <span class="am-icon icon-arrow-right icon-lg"></span>
      <span>...</span>
    </a>

# Liste de liens

- Lien simple
- Lien bold
- Lien avec pictogramme par défaut
- Lien avec pictogramme personnalisé
- Libellé de lien avec un pictogramme de taille md
- Encore un autre libellé très long avec un pictogramme de taille lg
- Lien avec actions

    <li>
      <a class="nav-item"><span>...</span></a>
    </li>
    <li>
      <a class="nav-item strong"><span>...</span></a>
    </li>
    <li>
      <a class="nav-item has-icon"><span>...</span></a>
    </li>
    <li>
      <a class="nav-item">
        <span class="icon-sm am-icon icon-star" aria-hidden="true"></span>
        <span>...</span>
      </a>
    </li>
    <li>
      <a class="nav-item">
        <span class="am-icon icon-apps" aria-hidden="true"></span>
        <span>...</span>
      </a>
    </li>
    <li>
      <a class="nav-item">
        <span class="icon-lg am-icon icon-calculator" aria-hidden="true"></span>
        <span>...</span>
      </a>
    </li>
    <li class="nav-item" role="menuitem">
      <a class="nav-link" href="#">
        <span class="am-icon icon-arrow-right icon-sm"></span>
        <span>...</span></a>
        <a class="btn btn-icon" href="#"><span class="am-icon icon-pencil"></span></a>
        <a class="btn btn-icon" href="#"><span class="am-icon icon-trash"></span></a>
    </li>

# liste de liens à taille fixe

IL est possible de tronquer les liens sur une seule ligne en ajoutant la classe `.list-link-nowrap` à la liste

- Ce libellé tronqué de l'application est trés long si long qu'il devrait être tronqué
- Ce libellé tronqué de l'application est trés long si long qu'il devrait être tronqué

    <ul class="list-link list-link-nowrap">
      <li>
        <a class="nav-item has-icon">
          <span>...</span>
        </a>
      </li>
    </ul>

Si la liste de lien "nowrap" est incluse dans une grille de mise en page ou tout élement flex qui ne possède pas de taille explicitement définie, il faut ajouter la classe `.flex-has-nowrap-items` pour éviter que les éléments débordants ne déforme la mise en page.

- Ce libellé tronqué de l'application est trés long si long qu'il devrait être tronqué
- Ce libellé tronqué de l'application est trés long si long qu'il devrait être tronqué

- Ce libellé tronqué de l'application est trés long si long qu'il devrait être tronqué
- Ce libellé tronqué de l'application est trés long si long qu'il devrait être tronqué

    <ul class="list-link list-link-nowrap">
      <li>
        <a class="nav-item has-icon">
          <span>...</span>
        </a>
      </li>
    </ul>