List avec variant .-separator :

Permet de séparer les éléments de la liste avec une bordure en dessous de chaque li à l'exception du dernier élément de la liste.

Liste avec le variant .-separator .

Liste et sous-liste avec chacune un variant .-separator .
Le variant .-separator peut également être appliqué à la sous-liste mais il est facultatif.

Liste avec un variant .-separator contenant des collapse secondary.

          

            
HTML

            


    
  
  • Liste item1
    • 
  
  • Liste item2
    • 
  
  • Liste item3
    • 
  
  • Liste item4
    • 





 
  
Liste et sous-liste avec chacune un variant .-separator .
Le variant .-separator peut également être appliqué à la sous-liste mais il est facultatif.





    
  
  • Liste item1
    • 
  
  • Liste item2
    
      
      
    • Sous liste item1
      • 
      
    • Sous liste item2
      • 
      
    • Sous liste item3
      • 
    
    
  
    • 
  
  • Liste item3
    • 





 
  
Liste avec un variant .-separator contenant des collapse secondary.





    
  
  •  
    
    
      
    
        
    
          
            
          
        
    
      
    
      
    
        
     
          
    
            
    
              
                
              
              
    
                
    FieldSection Primary Content/Children
    
                
    Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
    
              
    
            
    
          
    
        
    
      
    
    
    
  
    • 
  
  •  
    
    
      
    
        
    
          
            
          
        
    
      
    
      
     
        
    
          
    
            
    
              
                
              
              
    
                
    FieldSection Primary Content/Children
    
                
    Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
    
              
    
            
    
          
    
        
    
      
    
    
    
  
    • 
  
  •  
    
    
      
    
        
    
          
            
          
        
    
      
    
      
     
        
    
          
    
            
    
              
                
              
              
    
                
    FieldSection Primary Content/Children
    
                
    Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
    
              
    
            
    
          
    
        
    
      
    
    
    
  
    • 

-->


            
PUG

            
include ../../../mixins/swap-component

p 
  strong List avec variant #[code .-separator] :
p Permet de séparer les éléments de la liste avec une bordure en dessous de chaque li à l'exception du dernier élément de la liste.
.title-exemple 
  h4 Liste avec le variant #[code .-separator] .
//List
ul.list.-separator
  li Liste item1
  li Liste item2
  li Liste item3
  li Liste item4

.documentation-space
.title-exemple 
  h4 Liste et sous-liste avec chacune un variant #[code .-separator] .
    br
    | Le variant #[code .-separator] peut également être appliqué à la sous-liste mais il est facultatif.

// List with sublist
ul.list.-separator
  li Liste item1
  li Liste item2
    ul.list.-separator
      li Sous liste item1
      li Sous liste item2
      li Sous liste item3
  li Liste item3

.documentation-space
.title-exemple 
  h4 Liste avec un variant #[code .-separator] contenant des collapse secondary.

// List with collapse secondary
ul.list.-separator
  li 
    .collapse.-secondary
      .wrapper-handler
        .wrapper-title
          hx
            button.extend-link(type="button" data-toggle="collapse" data-target="#collapse-content-secondary-1" aria-expanded="false" aria-controls="#collapse-content-secondary-1") Titre facultatif (p/h2/h3/h4) et picto facultatif
      .collapse.wrapper-container#collapse-content-secondary-1
        .wrapper-content 
          .zone-libre
            +swap-component(title='FieldSection Primary Content/Children')
  li 
    .collapse.-secondary
      .wrapper-handler
        i.maificon.maificon-check(aria-hidden='true')
        .wrapper-title
          hx
            button.extend-link(type="button" data-toggle="collapse" data-target="#collapse-content-secondary-2" aria-expanded="false" aria-controls="#collapse-content-secondary-2") Titre facultatif (p/h2/h3/h4) et picto facultatif
      .collapse.wrapper-container#collapse-content-secondary-2 
        .wrapper-content
          .zone-libre
            +swap-component(title='FieldSection Primary Content/Children')
  li 
    .collapse.-secondary
      .wrapper-handler
        i.maificon.maificon-check(aria-hidden='true')
        .wrapper-title
          hx
            button.extend-link(type="button" data-toggle="collapse" data-target="#collapse-content-secondary-3" aria-expanded="false" aria-controls="#collapse-content-secondary-3") Titre facultatif (p/h2/h3/h4) et picto facultatif
      .collapse.wrapper-container#collapse-content-secondary-3 
        .wrapper-content
          .zone-libre
            +swap-component(title='FieldSection Primary Content/Children')