HTML
            


  

    
Terme lorem ipsum dolor sit amet  
    
définition lorem ipsum dolor sit amet
  
  

    
Nom 
    
Nomdelapersonne De la Particule
  
  

    
Prénom  
    
Prénom-composeTresLong
  
  

    
Email  
    
nomdelaparticule.composeTresLong@domaine-a-rallonge.com
  
  
 
    
N° de téléphone  
    
+33(0) 6 00 00 00 00
  
  

    
Nom de la banque 
    
Crédit agricole des pays de loire
  

 

  
Il est également possible de n'avoir les séparateurs entre chaque items qu'à partir du breakpoint LG (desktop) avec la classe .-separator-lg .
  


  

    
Terme lorem ipsum dolor sit amet  
    
définition lorem ipsum dolor sit amet
  
  

    
Nom 
    
Nomdelapersonne De la Particule
  
  

    
Prénom : 
    
Prénom-composeTresLong
  

 

  
Voici un exemple où l'on voit un autre composant (Tarif) appelé dans une definition.


  

    
Terme lorem ipsum dolor sit amet lorem ipsum dolor sit amet :
    

      
12 345.93 € par mois 12 345,93 €/mois Soit 9 345,93 € par mois Soit 9 345,93 € /mois
      
    
  
  

    
Terme lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum :
    

      
12 345.93 € par mois 12 345,93 €/mois
      
    
    
Définition deux lorem ipsum
  
  

    
Terme lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum :
    

      
12 345.93 € 12 345,93 €
      
    
  
-->


            
PUG
            
include ../../../mixins/tarif.pug

// separator
dl.definition-list-version2.-separator
  .item
    dt Terme lorem ipsum dolor sit amet  
    dd définition lorem ipsum dolor sit amet
  .item
    dt Nom 
    dd Nomdelapersonne De la Particule
  .item
    dt Prénom  
    dd Prénom-composeTresLong
  .item
    dt Email  
    dd nomdelaparticule.composeTresLong@domaine-a-rallonge.com
  .item 
    dt N° de téléphone  
    dd +33(0) 6 00 00 00 00
  .item
    dt Nom de la banque 
    dd Crédit agricole des pays de loire

.documentation-space 
.title-exemple
  h4 Il est également possible de n'avoir les séparateurs entre chaque items qu'à partir du breakpoint LG (desktop) avec la classe #[code .-separator-lg] .
  // separatorLg
dl.definition-list-version2.-separator-lg
  .item
    dt Terme lorem ipsum dolor sit amet  
    dd définition lorem ipsum dolor sit amet
  .item
    dt Nom 
    dd Nomdelapersonne De la Particule
  .item
    dt Prénom : 
    dd Prénom-composeTresLong

.documentation-space 
.title-exemple
  h4 Voici un exemple où l'on voit un autre composant (Tarif) appelé dans une definition.
dl.definition-list-version2.-column.-column-definition-text-align-right.-column-definition-width-4.-separator
  .item
    dt Terme lorem ipsum dolor sit amet lorem ipsum dolor sit amet :
    dd
      +tarif('p', 12345.93, '€', 'mois', '', '', '-text-align-right -size-small', true)
  .item.-light
    dt Terme lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum :
    dd
      +tarif('p', 12345.93, '€', 'mois', '', '', '-text-align-left -size-small -neutral')
    dd Définition deux lorem ipsum
  .item
    dt Terme lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum :
    dd
      +tarif('p', 12345.93, '€', '', '', '', '-text-align-left -size-small -neutral')