HTML
Besoin d'informations :
Titre de type 5
- Lorem ipsum dolor sit amet, consectetur
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Si vous résidez à Monaco :
Avec la délégation de Nice-Acropolis :
04 93 13 70 00(appel non surtaxé)
PUG
.row
.col-md-6
a.btn.btn-block(href='#', data-toggle='modal', data-target='#conversation-popin-callback') Popin Inline HTML
br/
.col-md-6
a.btn.btn-block(href='#', data-toggle='modal', data-target='#popin-inline-1') Popin Avertissement HTML
br/
.col-md-6
a.btn.btn-block(href='#', data-toggle='modal', data-target='#popin-list') Popin Aide expand
.conversationnel
#conversation-popin-callback.conversation-popin.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content.container-callback
header
i.maificon.maificon-warning(aria-hidden='true')
.modal-header
.modal-title Désolé...
.modal-body
.row
.col-lg-10.mx-auto
p Afin de traiter au mieux votre demande, nous vous invitons à contacter le service des sociétaires résidant à l'étranger :
#popin-inline-1.conversation-popin.modal-error.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content
header
i.maificon.maificon-warning(aria-hidden='true')
.modal-body
.row
.col-md-8.mx-auto
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
// Bouton secondaire
button.btn.btn-bevel-right.btn-ghost.btn-block Finalisez votre devis
.info
p Besoin d'informations :
i.maificon.maificon-wcb(aria-hidden='true')
// Bouton primaire
button.btn.btn-bevel-left.btn-block Contactez un conseiller Maif
.heading.type5 Titre de type 5
.liste-modal
ul
li Lorem ipsum dolor sit amet, consectetur
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
.contact
i.maificon.maificon-call(aria-hidden='true')
strong.center-block Si vous résidez à Monaco :
.bloc-contact
p Avec la délégation de Nice-Acropolis :
span.center-block 04 93 13 70 00
small.center-block (appel non surtaxé)
#popin-inline-1
#popin-list.conversation-popin.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content.container-callback
header
i.maificon.maificon-warning(aria-hidden='true')
.modal-header
.modal-title Désolé...
.modal-body
.row
.col-lg-10.mx-auto
p Afin de traiter au mieux votre demande, nous vous invitons à contacter le service des sociétaires résidant à l'étranger :
#popin-inline-1.conversation-popin.modal-error.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content
header
i.maificon.maificon-warning(aria-hidden='true')
.modal-body
.row
.col-md-8.mx-auto
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
// Bouton secondaire
button.btn.btn-bevel-right.btn-ghost.btn-block Finalisez votre devis
.info
p Besoin d'informations :
i.maificon.maificon-wcb(aria-hidden='true')
// Bouton primaire
button.btn.btn-bevel-left.btn-block Contactez un conseiller Maif
.heading.type5 Titre de type 5
.liste-modal
ul
li Lorem ipsum dolor sit amet, consectetur
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
.contact
i.maificon.maificon-call(aria-hidden='true')
strong.center-block Si vous résidez à Monaco :
.bloc-contact
p Avec la délégation de Nice-Acropolis :
span.center-block 04 93 13 70 00
small.center-block (appel non surtaxé)
#popin-inline-1
#popin-list.conversation-popin.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
.modal-dialog
.modal-content
.modal-header
button.close(type='button', data-dismiss='modal', aria-label='Close')
i.maificon.maificon-cross(aria-hidden='true')
.modal-title Titre popin Inline exemple
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
ul.list-unstyled.help-list
li
// Bloc bloc-accordeon-centre
a.accordion-toggle.btn-block.collapsed.text-left(href='#accordion1', data-toggle='collapse') Accordion 1 lorem ipsum dolor
.liste-verte#accordion1.collapse
p.text-left Lorem ipsum dolor sit amet, consectetur adipiscing elit :
ul
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
li
a.accordion-toggle.btn-block.collapsed.text-left(href='#accordion2', data-toggle='collapse') Accordion 2 lorem ipsum dolor sit amet, consectetur
| adipiscing
.liste-verte#accordion2.collapse
p.text-left.bold Lorem ipsum dolor sit amet, consectetur adipiscing elit :
ul
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
//Article + liste
.modal-content
.modal-title Titre article exemple
.liste-verte
p.text-left Lorem ipsum dolor sit amet, consectetur adipiscing elit :
ul
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
li Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod