HTML
            

 
  
DefinitionList Decoration Icon Small

Ajout d'un icône small de taille 24x24px avec les classes -decoration-icon & -size-small puis une autre classe pour lui appliquer une couleur.

  
Les icônes small de couleur noire avec la classe .-color-black à rajouter.


  

    
 Terme lorem :
    
Définition lorem ipsum dolor
  
  

    
 Terme lorem ipsum :
    
Définition lorem ipsum dolor sit amet
  

 

  
Les icônes small de couleur rouge avec la classe .-color-red à rajouter.


  

    
 Terme lorem :
    
Définition lorem ipsum dolor
  
  

    
 Terme lorem ipsum :
    
Définition lorem ipsum dolor sit amet
  

 

 
  
DefinitionList Decoration Icon Medium

Ajout d'un icône medium de taille 32x32px avec les classes -decoration-icon & -size-medium puis une autre classe pour lui appliquer une couleur.

  
Les icônes medium de couleur noire avec la classe .-color-black à rajouter.


  

    
 Terme :
    
définition lorem ipsum dolor sit amet
  
  

    
 Terme lorem ipsum :
    
définition un lorem ipsum dolor sit amet.
  

 

  
Les icônes medium de couleur rouge avec la classe .-color-red à rajouter.


  

    
 Terme :
    
définition lorem ipsum dolor sit amet
  
  

    
 Terme lorem ipsum :
    
définition un lorem ipsum dolor sit amet.
  


 
 
  
DefinitionList Decoration Image

Ajout d'une image de taille 32x32px avec les classes -decoration-icon & -size-medium.

  

    
Terme lorem :
    
définition un lorem ipsum dolor sit amet.
  
  

    
Terme lorem :
    
définition un lorem ipsum dolor sit amet.
    
définition trois lorem ipsum dolor sit amet lorem ipsum dolor sit amet
  
-->


            
PUG
            
// Icon Small
.title-exemple 
  h3 DefinitionList Decoration Icon Small
p Ajout d'un icône small de taille 24x24px avec les classes #[code -decoration-icon] & #[code -size-small] puis une autre classe pour lui appliquer une couleur.
.title-exemple
  h4 Les icônes small de couleur noire avec la classe #[code .-color-black] à rajouter.
dl.definition-list-version2.-horizontal.-decoration-icon.-size-small.-color-black
  .item
    dt 
      i.maificon.maificon-cercle-triangle-icon-nav
      | Terme lorem :
    dd Définition lorem ipsum dolor
  .item
    dt 
      i.maificon.maificon-bateau-voilier-monocoque
      | Terme lorem ipsum :
    dd Définition lorem ipsum dolor sit amet

.documentation-space 
.title-exemple
  h4 Les icônes small de couleur rouge avec la classe #[code .-color-red] à rajouter.
dl.definition-list-version2.-horizontal.-decoration-icon.-size-small.-color-red
  .item
    dt 
      i.maificon.maificon-cercle-triangle-icon-nav
      | Terme lorem :
    dd Définition lorem ipsum dolor
  .item
    dt 
      i.maificon.maificon-bateau-voilier-monocoque
      | Terme lorem ipsum :
    dd Définition lorem ipsum dolor sit amet
.documentation-space 

// Icon Medium
.title-exemple 
  h3 DefinitionList Decoration Icon Medium
p Ajout d'un icône medium de taille 32x32px avec les classes #[code -decoration-icon] & #[code -size-medium] puis une autre classe pour lui appliquer une couleur.
.title-exemple
  h4 Les icônes medium de couleur noire avec la classe #[code .-color-black] à rajouter.
dl.definition-list-version2.-horizontal.-decoration-icon.-size-medium.-color-black
  .item
    dt 
      i.maificon.maificon-cercle-triangle-icon-nav
      | Terme :
    dd définition lorem ipsum dolor sit amet
  .item
    dt 
      i.maificon.maificon-bateau-voilier-monocoque
      | Terme lorem ipsum :
    dd définition un lorem ipsum dolor sit amet.

.documentation-space 
.title-exemple
  h4 Les icônes medium de couleur rouge avec la classe #[code .-color-red] à rajouter.
dl.definition-list-version2.-horizontal.-decoration-icon.-size-medium.-color-red
  .item
    dt 
      i.maificon.maificon-cercle-triangle-icon-nav
      | Terme :
    dd définition lorem ipsum dolor sit amet
  .item
    dt 
      i.maificon.maificon-bateau-voilier-monocoque
      | Terme lorem ipsum :
    dd définition un lorem ipsum dolor sit amet.

// Image
.documentation-space 
.title-exemple 
  h3 DefinitionList Decoration Image
p Ajout d'une image de taille 32x32px avec les classes #[code -decoration-icon] & #[code -size-medium].
dl.definition-list-version2.-decoration-icon.-size-medium
  .item
    dt
      img(src="https://dummyimage.com/32x32/")
      | Terme lorem :
    dd définition un lorem ipsum dolor sit amet.
  .item
    dt
      img(src="https://dummyimage.com/32x32/")
      | Terme lorem :
    dd définition un lorem ipsum dolor sit amet.
    dd définition trois lorem ipsum dolor sit amet lorem ipsum dolor sit amet