HTML
            


            
PUG
            
label Ligne option personnalisable
.ligne-option-personnalisable
  .header-option
    .picto
      img.d-none.d-sm-block(src=fakeimg+"/50x50/" alt="")
    .titre-option 
      .titre
        h2 Titre (h2/h3/h4/p)
      .detail 
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia id turpis non ultricies. Morbi id ultricies tortor. Pellentesque at pharetra nisl. 
        a(aria-expanded="false" data-toggle="collapse" href="#collapseExample1") 
        span.collapse#collapseExample1 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          a.close(aria-expanded="false" data-toggle="collapse" href="#collapseExample1") 
  .content
    .form-group(role="radiogroup" aria-labelledby="radio-ligne-option-personnalisable-1")
      p#radio-ligne-option-personnalisable-1.field-label Lorem ipsum dolor sit amet, 
      p.field-text Lorem ipsum dolor sit amet, 
      .field-item.form-check.inline.condensed
        .row
          .col-12
            .item
              input(type='radio' name='name-ligne-option-personnalisable-1')#radio-ligne-option-personnalisable-1-1
              label(for='radio-ligne-option-personnalisable-1-1') 
                span Lorem ipsum dolor
          .col-12
            .item
              input(type='radio' name='name-ligne-option-personnalisable-1')#radio-ligne-option-personnalisable-1-2
              label(for='radio-ligne-option-personnalisable-1-2') 
                span  Lorem ipsum dolor
          .col-12
            .item
              input(type='radio' name='name-ligne-option-personnalisable-1')#radio-ligne-option-personnalisable-1-3
              label(for='radio-ligne-option-personnalisable-1-3') 
                span  Lorem ipsum dolor
          .col-12
            .item
              input(type='radio' name='name-ligne-option-personnalisable-1')#radio-ligne-option-personnalisable-1-4
              label(for='radio-ligne-option-personnalisable-1-4') 
                span  Lorem ipsum dolor

    .form-group(role="radiogroup" aria-labelledby="radio-ligne-option-personnalisable-2")
      p#radio-ligne-option-personnalisable-2.field-label Lorem ipsum dolor sit amet, 
      p.field-text Lorem ipsum dolor sit amet, 
      .field-item.form-check.inline
        .row
          .col-md-3.col-6
            .item
              input(type='radio' name='name-ligne-option-personnalisable-2')#radio-ligne-option-personnalisable-2-1
              label(for='radio-ligne-option-personnalisable-2-1') 
                span Lorem ipsum dolor
          .col-md-3.col-6
            .item
              input(type='radio' name='name-ligne-option-personnalisable-2')#radio-ligne-option-personnalisable-2-2
              label(for='radio-ligne-option-personnalisable-2-2') 
                span  Lorem ipsum dolor
    div
      span
        strong Lorem ipsum dolor sit amet, 
      span.collapse-block-info.inline
        button.collapse-handler(data-toggle="collapse" data-target="#collapse-cnt-savoir-2" aria-expanded="false")
        .collapse#collapse-cnt-savoir-2
          .collapse-content
            button.close(data-toggle="collapse" data-target="#collapse-cnt-savoir-2" aria-expanded="false" aria-label='fermer')
            .title
              div Titre du bloc information 2
            p Lorem ipsum dolor sit amet :
            p consectetur adipiscing elit. Maecenas lacinia id turpis non ultricies. Morbi id ultricies tortor. Pellentesque at pharetra nisl. Etiam hendrerit tortor dolor, nec luctus sapien finibus ac. 
            p Nulla pharetra nulla :
            p a ipsum blandit condimentum. Phasellus sollicitudin metus vitae elit maximus, ac scelerisque quam lacinia. Donec sed dolor tristique, mollis metus nec, malesuada nibh. Cras gravida quam at tincidunt consequat. Nullam ex orci, sollicitudin eu posuere at, venenatis eu lorem.

    label.label-sub Conseil MAIF : Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    .slider.conseil
      .row
        .col-md-9
          .form-group
            input.slide#slide(type='range' name='volume' min='30000' max='5000000' value='4400000' list="tickmarks3")
            datalist#tickmarks3
              option(value='0')
              option(value='10')
              option(value='20')
              option(value='30')
              option(value='40')
              option(value='50')
              option(value='60')
              option(value='70')
              option(value='80')
              option(value='90')
              option(value='100')
            .sub-label 
              span 20 €/jour* 
                br/
                span soit 1000 €/an
              span 500 €/jour
                br/
                span soit 12000 €/an
              p.form-legend *Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            .bloc-conseil(style='left:calc(88% - 15px)')
              .titre Conseil Maif
        .col-md-3.result
          .form-group
            .field-item
              input(type="number")/
              div
                .suffix €/trimestre
                .sub soit €/an        
    .collapse-block
      button.collapse-handler(type="button" data-toggle="collapse" data-target="#collapse-cnt-1" aria-expanded="false" aria-controls="#collapse-cnt-1") Titre bloc information accordéon
      .collapse.collapse-content#collapse-cnt-1 Contenu bloc information      
label Ligne option personnalisable light
.ligne-option-personnalisable
  .header-option
    .picto
      img.d-none.d-sm-block(src=fakeimg+"/50x50/" alt="")
    .titre-option 
      p.titre Titre (h2/h3/h4/p)
      .detail 
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia id turpis non ultricies. Morbi id ultricies tortor. Pellentesque at pharetra nisl. 
        a(aria-expanded="false" data-toggle="collapse" href="#collapseExample2") 
        span.collapse#collapseExample2 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          a.close(aria-expanded="false" data-toggle="collapse" href="#collapseExample2") 

label Ligne option personnalisable avec tarif
.ligne-option-personnalisable
  .header-option
    .picto
      img(src=fakeimg+"/50x50/" alt="")
    .titre-option
      p.titre Titre (h2/h3/h4/p)
  .content
    .row
      .col-12.col-md-8
        p Elle sert à indemniser les tiers victimes d’un accident dont vous êtes à l’origine. En cas d’accident corporel (chute, accident domestique, jardinage, bricolage, scolaire, de loisirs ou de sports, d’accident médical, etc).
      .col-12.col-md-4
        .tarif-version2.right-md
          p
            span
              | 3
              span ,50 €
                sub /mois
            span.text-right 
              | Soit 
              strong 355,93 € 
              | /an

    .form-group.no-margin(role="radiogroup" aria-labelledby="radio-ligne-option-personnalisable-2")
      p#radio-ligne-option-personnalisable-1.field-label Lorem ipsum dolor sit amet, 
      .field-item.form-check.inline
        .row
          .col-md-4.col-12
            .item
              input(type='radio' name='name-ligne-option-personnalisable-2')#radio-ligne-option-personnalisable-2-1
              label(for='radio-ligne-option-personnalisable-2-1') 
                span Oui
          .col-md-4.col-12
            .item
              input(type='radio' name='name-ligne-option-personnalisable-2')#radio-ligne-option-personnalisable-2-2
              label(for='radio-ligne-option-personnalisable-2-2') 
                span Non