HTML
            


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

//- With complementary zone
.title-exemple
  h4 Overview With complementary zone
.overview
  .wrapper-principal
    .wrapper-title
      .title
        hx Title
    .wrapper-content
      .wrapper-primary
        .zone-libre 
          +swap-component(title='Zone libre - Obligatoire')
      .wrapper-complementary
        .zone-libre
          +swap-component(title='Zone libre complémentaire - Optionnelle')

.documentation-space
//- With complementary zone & chip
.title-exemple
  h4 Overview With chip button & without complementary zone
.overview
  .wrapper-principal
    .wrapper-title
      .title
        hx Title
      .buttons-group
        button.chip.-icon.-icon-with-text-md(type="button")
          i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
          span Chip button   
    .wrapper-content
      .wrapper-primary
        .zone-libre 
          +swap-component(title='Zone libre - Obligatoire')

.documentation-space
//- With principal collapse
.title-exemple
  h4 Overview With principal collapse
.inline-message
  i.maificon.maificon-information-round(aria-hidden="true")
  .content
    p Le collapse principal est toujours ouvert à l'ouverture d'une page web.
.overview
  .wrapper-principal
    .wrapper-title
      .title
        hx
          button.collapse-handler.collapsed(type='button' data-toggle='collapse' data-target='#collapseO' aria-expanded='true' aria-controls='collapseO') Title
    .wrapper-content.collapse.show(id='collapseO')
      .wrapper-primary
        .zone-libre 
          +swap-component(title='Zone libre - Obligatoire')
      .wrapper-complementary
        .zone-libre
          +swap-component(title='Zone libre complémentaire - Optionnelle')

.documentation-space

//- With complementary collapse
.title-exemple
  h4 Overview With complementary collapse
.inline-message
  i.maificon.maificon-information-round(aria-hidden="true")
  .content
    p Attention il n'est pas possible d'avoir un collapse principal et un collapse complémentaire en même temps. C'est soit l'un soit l'autre.
      br
      | Le collapse complementary est toujours fermé à l'ouverture d'une page web.
.overview
  .wrapper-principal
    .wrapper-title
      .title
        hx Title
    .wrapper-content
      .wrapper-primary
        .zone-libre 
          +swap-component(title='Zone libre - Obligatoire')
      .wrapper-complementary
        .zone-libre
          +swap-component(title='Zone libre complémentaire - Optionnelle')
  .collapse-complementary 
    .wrapper-title
      .title
        hx
          button.collapse-handler.collapsed(type='button' data-toggle='collapse' data-target='#collapse-complementary' aria-expanded='false' aria-controls='collapse-complementary') Title collapse complementary
    .wrapper-content.collapse(id='collapse-complementary')
      .zone-libre 
        +swap-component(title='Zone libre - Obligatoire si présence du collapse complementary')


.documentation-space

//- With additionalCta inside List
.title-exemple
  h4 Overview avec un levelTitle & une liste avec icône contenant des additionalCta au niveau du titre des items.
.overview
  .wrapper-principal
    .wrapper-title
      .title
        hx Overview Title
    .wrapper-content
      .wrapper-primary
        .zone-libre
          .level-title 
            .title.-weight-bold.-type1 
              hx LevelTitle size 18px (avec titleWeightBold)
          ul.list.-icon.-size-small.-color-black.-separator
            li
              i.maificon.maificon-ars-ajout-capital(aria-hidden='true')
              .title
                hx Détails du contrat automobile
                  button.additional-cta(type='button')
                    span.sr-only Texte obligatoire à fournir pour l'accessibilité
                    i.maificon.maificon-information-cercle(aria-hidden='true')
              p Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
            li 
              i.maificon.maificon-ars-placements(aria-hidden='true')
              .title
                hx Garanties spécifiques
                  button.additional-cta(type='button')
                    span.sr-only Texte obligatoire à fournir pour l'accessibilité
                    i.maificon.maificon-information-cercle(aria-hidden='true')
              p Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
            li 
              i.maificon.maificon-alerte(aria-hidden='true')
              .title
                hx Lorem Ipsum is simply dummy
              p Lorem Ipsum is simply dummy text of the printing and typesetting industry.

.title-exemple
  h4 Overview avec un levelTitle & une liste contenant des additionalCta au niveau du contenu textuel des items.
.overview
  .wrapper-principal
    .wrapper-title
      .title
        hx Overview Title
    .wrapper-content
      .wrapper-primary
        .zone-libre
          .level-title 
            .title.-weight-bold.-type1 
              hx LevelTitle size 18px (avec titleWeightBold)
          ul.list.-separator
            li Lorem Ipsum is simply dummy text of the printing.
              button.additional-cta(type='button')
                span.sr-only Texte obligatoire à fournir pour l'accessibilité
                i.maificon.maificon-information-cercle(aria-hidden='true')
            li Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
            li Lorem Ipsum is simply dummy text of the printing and typesetting industry.
              button.additional-cta(type='button')
                span.sr-only Texte obligatoire à fournir pour l'accessibilité
                i.maificon.maificon-information-cercle(aria-hidden='true')