HTML
            


            
PUG
            
.form-group
  label(for="group-checkbox-dynamique") Cases à cocher dynamiques
  #group-checkbox-dynamique.field-item.dynamic-value-selector.checkbox(role="group")
    .item
      input#checkbox-dynamique-1(type='checkbox', name="group-checkbox-dynamique")
      label(for='checkbox-dynamique-1').content
        .icon
        .presentation
          .title Titre
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        .picto
          .overlay-img
            img.d-none.d-sm-block(src=fakeimg+'/64x64/', alt='auto-main-vehicule-remplacement')
    .item
      input#checkbox-dynamique-12(type='checkbox', name="group-checkbox-dynamique")
      label(for='checkbox-dynamique-12').content
        .icon
        .presentation
          .title Titre (sans image)
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    .item
      input#checkbox-dynamique-13(type='checkbox', name="group-checkbox-dynamique")
      label(for='checkbox-dynamique-13').content
        .icon
        .presentation
          .title Titre
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        .picto
          .overlay-img
            img.d-none.d-sm-block(src=fakeimg+'/64x64/', alt='auto-main-vehicule-remplacement')
        .collapse-container
          button.collapse-handler(data-toggle="collapse", data-target="#collapse-savoir-plus", aria-expanded="false") 
            span En savoir plus
          .collapse#collapse-savoir-plus
            .collapse-content
              ul.check-list Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                li Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                li Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    .item
      input#checkbox-dynamique-2(type='checkbox', name="group-checkbox-dynamique")
      label(for='checkbox-dynamique-2').content
        .icon
        .presentation
          .title Titre
          p Vous souhaitez maintenir le niveau de vie de vos proches à la suite de votre décès ou à votre incapacité permanente absolue.
          p.highlight-border             
            span.text-accessibilite Préconisation MAIF :
            |  nous vous recommandons de souscrire au moins 3 ans de perte de revenus pour maintenir le niveau de vie.
          .display-content
            label Précisez le nombre d’années de perte de revenus que vous désirez couvrir avec votre capital :
            .maif-form
              .row
                .col-md-6
                  .form-group.champ-texte
                    input.classes(name='classes' type='number')
        .picto
          .overlay-img
            img.d-none.d-sm-block(src=fakeimg+'/64x64/', alt='auto-main-vehicule-remplacement')
    .item
      input#checkbox-dynamique-3(type='checkbox', name="group-checkbox-dynamique")
      label(for='checkbox-dynamique-3').content
        .icon
        .presentation
          .title Titre
          p Vous souhaitez maintenir le niveau de vie de vos proches à la suite de votre décès ou à votre incapacité permanente absolue.
          p.highlight-border                    
            span.text-accessibilite Préconisation MAIF :
            |  nous vous recommandons de souscrire au moins 3 ans de perte de revenus pour maintenir le niveau de vie.
          .display-content
            label Précisez le nombre d’années de perte de revenus que vous désirez couvrir avec votre capital :
            .maif-form
              .row
                .col-md-6
                  .form-group.champ-texte
                    select.classes
                      option(value='') Sélectionner une valeur
                      option(value='300') 300 €
                      option(value='200') 200 €
        .picto
          .overlay-img
            img.d-none.d-sm-block(src=fakeimg+'/64x64/', alt='auto-main-vehicule-remplacement')

.form-group.has-error
  label(for="group-checkbox-dynamique-error") Radio dynamique erreur
  #group-checkbox-dynamique-error.field-item.dynamic-value-selector.checkbox(role="group")
    .item
      input#checkbox-dynamique-11(type='checkbox', name="group-checkbox-dynamique-error")
      label(for='checkbox-dynamique-11').content
        .icon
        .presentation
          .title Titre
          p Contenu libre
        .picto
          .overlay-img
            img.d-none.d-sm-block(src=fakeimg+'/64x64/', alt='auto-main-vehicule-remplacement')
    .item
      input#checkbox-dynamique-21(type='checkbox', name="group-checkbox-dynamique-error")
      label(for='checkbox-dynamique-21').content
        .icon
        .presentation
          .title Titre
          p Contenu libre
        .picto
          .overlay-img
            img.d-none.d-sm-block(src=fakeimg+'/64x64/', alt='auto-main-vehicule-remplacement')

.form-group
  label(for="group-checkbox-dynamique-disabled") Radio dynamique désactivé
  #group-checkbox-dynamique-error.field-item.dynamic-value-selector.checkbox(role="group")
    .item
      input#checkbox-dynamique-23(type='checkbox', name="group-checkbox-dynamique-disabled", disabled, checked)
      label(for='checkbox-dynamique-23').content
        .icon
        .presentation
          .title Titre
          p Contenu libre
        .picto
          .overlay-img
            img.d-none.d-sm-block(src=fakeimg+'/64x64/', alt='auto-main-vehicule-remplacement')
    .item
      input#checkbox-dynamique-22(type='checkbox', name="group-checkbox-dynamique-disabled", disabled)
      label(for='checkbox-dynamique-22').content
        .icon
        .presentation
          .title Titre
          p Contenu libre
        .picto
          .overlay-img
            img.d-none.d-sm-block(src=fakeimg+'/64x64/', alt='auto-main-vehicule-remplacement')