HTML
            

 
  
List Icon Small

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

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


  

    
Choix 11
    

      
Sous liste item1
      
Sous liste item2
    
  
  

    
Choix 2
      Texte obligatoire à fournir pour l'accessibilité
    
    
Lorem ipsum dolor sit amet, consectetur adipiscing.
    

      
Sous liste item1
        Texte obligatoire à fournir pour l'accessibilité
      
      
Sous liste item22
    
  
  

    
 
    
Choix 3
    
Lorem ipsum dolor sit amet, consectetur adipiscing.
  



  
Icônes small de couleur noir avec la classe .-color-black à rajouter.


  

    
Lorem ipsum dolor sit amet, consectetur adipiscing.
  
  

    
Lorem ipsum dolor sit amet, consectetur adipiscing.
  



  
Icônes avec severity (success, error, warning, neutral) de taille small avec la classe -size-small à rajouter.


  
 
    
 
      
Severity Success
      Texte obligatoire à fournir pour l'accessibilité
    
    
Lorem ipsum dolor sit amet, consectetur adipiscing.
  
  

    
Severity Error - Lorem ipsum dolor sit amet, consectetur adipiscing.
  
  

    
Severity Warning - Lorem ipsum dolor sit amet, consectetur adipiscing.
      Texte obligatoire à fournir pour l'accessibilité
    
  
  

    
Severity Neutral - Lorem ipsum dolor sit amet, consectetur adipiscing.
  



  
List Icon Medium


  
Icônes Medium avec la classe -size-medium à rajouter.


  

    
Lorem ipsum dolor sit amet, consectetur adipiscing.
  
  

    
Lorem ipsum dolor sit amet, consectetur adipiscing.
  
  

    
Lorem ipsum dolor sit amet, consectetur adipiscing.
  



  
Icônes Medium avec différents couleurs de picto liée à leur severity.


  

    
Severity Success -  sit amet, consectetur adipiscing.
  
  

    
Severity Error -  sit amet, consectetur adipiscing.
  
  

    
Severity Warning -  sit amet, consectetur adipiscing.
  
  

    
Severity Neutral -  sit amet, consectetur adipiscing.
  



  
List Icon with Image


  
Image avec la classe -icon et il suffit après de choisir la taille small -size-small ou medium -size-medium . Cette variante est notamment possible pour l'appel des pictos filaires hors maificon.

 
  

    Image Small
  


  

    
 
    
Lorem ipsum dolor sit amet, consectetur adipiscing.
  
  

    
 
    
Lorem ipsum dolor sit amet, consectetur adipiscing.
  


 
  

    Image Medium
  


  

    
 
    
Lorem ipsum dolor sit amet, consectetur adipiscing.
  
  

    
 
    
Lorem ipsum dolor sit amet, consectetur adipiscing.
  
-->


            
PUG
            
// Icon Small
.title-exemple 
  h3 List Icon Small
p Ajout d'un icône small de taille 24x24px avec les classes #[code -icon] & #[code -size-small] puis une autre classe pour lui appliquer une couleur.
.title-exemple
  h4 Icônes small de couleur rouge avec la classe #[code .-color-red] à rajouter.
ul.list.-icon.-color-red.-size-small
  li
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p.title Choix 1
      sup.ref-link-version2#return-id-1bis
        a(href="#id-1bis" title="Aller à la note n°1 en bas de page" aria-label="Aller à la note n°1 en bas de page") 1
    ul.list.-bullet.-color-red
      li Sous liste item1
      li Sous liste item2
  li
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p.title Choix 2
      button.additional-cta(type='button')
        span.sr-only Texte obligatoire à fournir pour l'accessibilité
        i.maificon.maificon-information-cercle(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
    ul.list.-bullet.-color-red
      li Sous liste item1
        button.additional-cta(type='button')
          span.sr-only Texte obligatoire à fournir pour l'accessibilité
          i.maificon.maificon-information-cercle(aria-hidden='true')
      li Sous liste item2
        sup.ref-link-version2#return-id-1bis
          a(href="#id-2bis" title="Aller à la note n°1 en bas de page" aria-label="Aller à la note n°1 en bas de page") 2
  li
    .media 
      img(src=fakeimg+"/32x32/")
    p.title Choix 3
    p Lorem ipsum dolor sit amet, consectetur adipiscing.

.documentation-space
.title-exemple
  h4 Icônes small de couleur noir avec la classe #[code .-color-black] à rajouter.

ul.list.-icon.-color-black.-size-small
  li
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
  li
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.

.documentation-space
.title-exemple
  h4 Icônes avec severity (success, error, warning, neutral) de taille small avec la classe #[code -size-small] à rajouter.
ul.list.-icon.-size-medium
  li.success 
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    .title 
      h3 Severity Success
      button.additional-cta(type='button')
        span.sr-only Texte obligatoire à fournir pour l'accessibilité
        i.maificon.maificon-information-cercle(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
  li.error
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Severity Error - Lorem ipsum dolor sit amet, consectetur adipiscing.
  li.warning
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Severity Warning - Lorem ipsum dolor sit amet, consectetur adipiscing.
      button.additional-cta(type='button')
        span.sr-only Texte obligatoire à fournir pour l'accessibilité
        i.maificon.maificon-information-cercle(aria-hidden='true')
  li.neutral
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Severity Neutral - Lorem ipsum dolor sit amet, consectetur adipiscing.

.documentation-space
.title-exemple
  h3 List Icon Medium
.title-exemple
  h4 Icônes Medium avec la classe #[code -size-medium] à rajouter.

ul.list.-icon.-color-black.-size-medium
  li
    i.maificon.maificon-maison(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
  li
    i.maificon.maificon-ars-placements(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
  li
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.

.documentation-space
.title-exemple
  h4 Icônes Medium avec différents couleurs de picto liée à leur severity.
ul.list.-icon.-size-medium
  li.success
    i.maificon.maificon-check(aria-hidden='true')
    p Severity Success -  sit amet, consectetur adipiscing.
  li.error
    i.maificon.maificon-check(aria-hidden='true')
    p Severity Error -  sit amet, consectetur adipiscing.
  li.warning
    i.maificon.maificon-cross(aria-hidden='true')
    p Severity Warning -  sit amet, consectetur adipiscing.
  li.neutral
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Severity Neutral -  sit amet, consectetur adipiscing.
  
.documentation-space
.title-exemple
  h3 List Icon with Image
.title-exemple
  h4 Image avec la classe #[code -icon] et il suffit après de choisir la taille small #[code -size-small] ou medium #[code -size-medium] . Cette variante est notamment possible pour l'appel des pictos filaires hors maificon.
 

.level-title 
  .title.-weight-bold.-type1
    hx Image Small
ul.list.-icon.-size-small
  li
    .media 
      img(src=fakeimg+"/24x24/")
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
  li
    .media 
      img(src=fakeimg+"/24x24/")
    p Lorem ipsum dolor sit amet, consectetur adipiscing.

br
.level-title 
  .title.-weight-bold.-type1
    hx Image Medium
ul.list.-icon.-size-medium
  li
    .media 
      img(src=fakeimg+"/32x32/")
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
  li
    .media 
      img(src=fakeimg+"/32x32/")
    p Lorem ipsum dolor sit amet, consectetur adipiscing.