Styleguide

Tag

Ajouté à la version :

Changelog:

  • 0.1.0: Ajout du composant

Composant de base

Blacklists obligatoires
<div class="tag">
  Blacklists obligatoires
  <button class="tag-button">
    <span class="icon icon--close"></span>
    Fermer
  </button>
</div>

Composant désactivé

Ajouter la classe d'état.tag--disabled à l'élément ayant la classe .tag afin de modifier son style.

Desabo_20160723
<div class="tag tag--disabled">
  Desabo_20160723
  <button class="tag-button">
    <span class="icon icon--close"></span>
    Fermer
  </button>
</div>

Liste de tag

  • Blacklists obligatoires
  • Lorem ipsum
  • Desabo_20160720
  • Desabo_20160721
  • Desabo_20160722
  • Desabo_20160723
  • Desabo_20160724
  • Desabo_20160725
  • Desabo_20160726
<ul class="tagList">
  <li>
    <div class="tag tag--disabled">
      Blacklists obligatoires
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
  <li>
    <div class="tag">
      Lorem ipsum
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
  <li>
    <div class="tag">
      Desabo_20160720
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
  <li>
    <div class="tag">
      Desabo_20160721
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
  <li>
    <div class="tag">
      Desabo_20160722
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
  <li>
    <div class="tag">
      Desabo_20160723
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
  <li>
    <div class="tag">
      Desabo_20160724
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
    <div class="tag">
      Desabo_20160725
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
  <li>
    <div class="tag">
      Desabo_20160726
      <button class="tag-button">
        <span class="icon icon--close"></span>
        Fermer
      </button>
    </div>
  </li>
</ul>