HTML
            


            
PUG
            
include ../../../mixins/swap-component
include ../../../mixins/tarif


.row
  .col-md-6
    .title-exemple
      h4 Version basique (icon + context: primary)
    .formule-version2
      .wrapper-principal
        .wrapper-content
          .icon
            img(src=fakeimg+'/64x64' alt='')
          .title#titre-formule-1
            h2
              span.sup-title SupTitle 
              | Title + TitleTagName 
          .context.-primary
            p Tag Contexte
          .tag.-primary.-reverse
            p Tag
          p.description Description
        .wrapper-tarif 
          +swap-component(title='wrapperTarif', description='Composant possible dans cette zone : Tarif / Paraphraphe / Separateur')  
        .wrapper-additional
          +swap-component(title='wrapperAdditional', description='Composant possible dans cette zone : Titre / Liste / Paraphraphe / Separateur / AcceptanceCheckbox') 
        .cta-group-version2.-vertical
          button(type='button').button.-primary.-full-width
            span.sr-only [Si besoin] Avant de valider votre choix, voir les options ci-dessous
            | Choisir 
      .wrapper-complementary
        +swap-component(title='Zone libre (children)' description='Composant possible dans cette zone : Garantie / Footer') 
  .col-md-6
    .title-exemple
      h4 Version basique alt (image + context: secondary)
    .formule-version2
      .wrapper-principal
        .wrapper-content
          .icon
            img(src=fakeimg+'/64x64' alt='')
          .title#titre-formule-2
            h2
              span.sup-title SupTitle 
              | Title + TitleTagName 
          .context.-secondary
            p Tag Contexte
          .tag.-primary.-reverse
            p Tag
          p.description Description
        .wrapper-tarif 
          +swap-component(title='wrapperTarif', description='Composant possible dans cette zone : Tarif / Paraphraphe / Separateur')  
        .wrapper-additional
          +swap-component(title='wrapperAdditional', description='Composant possible dans cette zone : Titre / Liste / Paraphraphe / Separateur / AcceptanceCheckbox') 
        .cta-group-version2.-vertical
          button(type='button').button.-primary.-full-width
            span.sr-only [Si besoin] Avant de valider votre choix, voir les options ci-dessous
            | Choisir 
      .wrapper-complementary
        +swap-component(title='Zone libre (children)' description='Composant possible dans cette zone : Garantie / Footer') 

.documentation-space


.row 
  .col-md-4
    .title-exemple
      h4 Version wrapper-tarif
    .formule-version2
      .wrapper-principal
        .wrapper-content
          .icon
            img(src=fakeimg+'/64x64' alt='')
          .title#title-formule-3
            h2 Title + TitleTagName 
        .wrapper-tarif 
          +tarif('p', 49.93, '€', "mois", "1", "2", '-text-align-center -size-medium', true)
          .separator.-addition
            .icon
            p.sr-only plus
          p Option BEV
          +tarif('p', 15.93, '€', '', '', '', '-text-align-center -size-medium')
          p Soit une cotisation annuelle de 10 €


  .col-md-4
    .title-exemple
      h4 Version wrapper-additional
    .formule-version2
      .wrapper-principal
        .wrapper-content
          .icon
            img(src=fakeimg+'/64x64' alt='')
          .title#title-formule-3
            h2 Title + TitleTagName 
        .wrapper-additional
          button.chip(type="button")
            i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
            span Chip button
          .separator
          .form-group-version2
            .field-item.-acceptance-checkbox
              input(type='checkbox', name='acceptance-checkbox-formule-1')#acceptance-checkbox-formule-1
              label(for='acceptance-checkbox-formule-1') Je déclare avoir pris connaissance des conditions générales (PDF), de la fiche d’information sur la responsabilité civile (PDF), de la notice juridique sur l’assurance à distance (PDF) et en accepter toutes les clauses.
  .col-md-4
    .title-exemple
      h4 Version multi cta
    .formule-version2
      .wrapper-principal
        .wrapper-content
          .icon
            img(src=fakeimg+'/64x64' alt='')
          .title#title-formule-3
            h2 Title + TitleTagName 
        .cta-group-version2.-vertical
          button(type='button').button.-primary.-full-width Cta 1
          button(type='button').button.-secondary.-full-width Cta 2
          button(type='button').button.-secondary.-full-width Cta 3

.documentation-space
.row
  .col-md-4
    .title-exemple
      h4 Version formule-garantie
    .formule-version2
      .wrapper-principal
        .wrapper-content
          .icon
            img(src=fakeimg+'/64x64' alt='')
          .title#title-formule-3
            h2 Title + TitleTagName 
      .wrapper-complementary
          .formule-garantie
            .title(aria-describedby="titre-formule-3")
              h3 Garantie
                button.additional-cta(type='button' data-toggle='modal' data-target='#modal-inline-1')
                  span.sr-only Bouton [insert wording]
                  i.maificon.maificon-information-cercle(aria-hidden='true')
            .wrapper-content
              ul.list.-bullet.-color-red
                li Lorem ipsum dolor sit 
                li Lorem ipsum dolor sit 
              p Lorem ipsum dolor sit
          .formule-garantie
            .title(aria-describedby="titre-formule-3")
              h3 Garantie
            .wrapper-content
              +swap-component() 


  .col-md-4
    .title-exemple
      h4 Version formule-garantie collapse
    .formule-version2
      .wrapper-principal
        .wrapper-content
          .icon
            img(src=fakeimg+'/64x64' alt='')
          .title#title-formule-3
            h2 Title + TitleTagName 
      .wrapper-complementary
          .formule-garantie.-collapse
            .title
              h3
                button.collapse-handler(type="button" data-toggle="collapse" data-target=".multi-collapse-1" aria-expanded="false" aria-describedby="titre-formule-3")
                  span Garantie
            .collapse.multi-collapse-1
              .collapse-content
                p Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
                ul.list.-bullet.-color-red
                  li Lorem ipsum dolor sit 
                  li Lorem ipsum dolor sit 
                p Lorem ipsum dolor sit
          .formule-garantie.-collapse
            .title
              h3
                button.collapse-handler(type="button" data-toggle="collapse" data-target=".multi-collapse-2" aria-expanded="false" aria-describedby="titre-formule-3")
                  span Garantie
            .collapse.multi-collapse-2
              .collapse-content
                +swap-component() 

  .col-md-4
    .title-exemple
      h4 Version formule-footer
    .formule-version2
      .wrapper-principal
        .wrapper-content
          .icon
            img(src=fakeimg+'/64x64' alt='')
          .title#title-formule-3
            h2 Title + TitleTagName 
      .wrapper-complementary
          .formule-footer 
            .title 
              h4 Title footer 
            +tarif('p', 49.93, '€', "mois", "1", "2", '-text-align-center -size-medium', true)
            button(type='button').button.-primary.-full-width Choisir