Styleguide

Tag

Ajouté à la version :

• 0.1.0(actuelle)

---

Changelog:

• 0.1.0: Ajout du composant

---

Composant de base

<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.

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

Liste de tag

<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>