Snippet 2 : Annotations

Exemple1 : plus.png

Ici le placehoder pour le texte à ajouter

Exemple 2 : pouce.png

Ici le placehoder pour le texte à ajouter

Exemple 3 : attention.png

Ici le placehoder pour le texte à ajouter

Exemple 3 : config.png

Ici le placehoder pour le texte à ajouter

Dans le code ci-dessous, il suffit de changer l'image par celle de son choix ( voir dans le dossier "ico" la liste des images disponibles) et de placer son contenu en lieu et place du "placeholder"

La classe "anoter" stockée dans le fichier dh.css est responsable de la mise en page. Elle s'appuie sur la structure

div class="anoter2"
- div
- div

.anoter {
   border-top-style: solid;
   border-top-color: #a406c0;
.... : .....
   background-color:#d0fdec5e;
}
.anoter2 > div {
   margin:-20px 0em 1em -25px;
}
.anoter2 > div + div {
   margin: -50px 0em 1em 40px;
}

Le code à copier

Accordéons : NB-info complément

Cliquez sur le bouton pour copier le code
dans le presse papier

    
<div class="anoter2">
   <div>
       <img alt="" data-entity-type="file" data-entity-uuid="ff4ef296-b588-42b9-bdb0-8ddffdfb8540" height="56" 
           src="/sites/default/files/ico/config.png" width="55" />
   </div>
   <div>
      <div>Ici le placehoder pour le texte à ajouter</div>
   </div>
</div>