Modal par défaut (variant md)
Modal variant lg
Modal variant sm
Modal variant bottom-sheet

Le variant bottom-sheet est disponible uniquement pour les écrans de taille sm et inférieure. Il permet d'afficher une fenêtre modale en bas de l'écran, souvent utilisée pour des actions rapides ou des informations complémentaires. Sur une fenêtre de taille md et supérieure, le comportement est similaire à celui du variant md par defaut, ou lg ou sm si défini. Pour voir la modale en variant bottom-sheet, ouvrez la modale plus bas en reduisant la fenêtre de votre navigateur. 

          

            
HTML

            


            
PUG

            
//- Composant Modal

  Composant Modal utilisé pour afficher une information dans une fenêtre superposée au contenu principal.

  {@link https://www.figma.com/design/jo1x5twcWN0CWt766NcRm4/Modal Documentation Figma}
  {@link https://www.figma.com/design/Xkaq70ey0jDadmofRa6wTe/Maif.fr-Form?node-id=24201-5954 Composant Figma}
  {@link https://maquettes.tools.df.maif.io/katya/base.html#modal Composant Katya}
  {@link https://maquettes.tools.df.maif.io/lib-react-ui/?path=/docs/components-modal--docs Composant React}

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

.heading.type4.text-left Modal par défaut (variant md)

//- Variant md
#modal-wifuhg.modal.-md(tabindex='-1' role='dialog' aria-labelledby="title-modal-wifuhg" aria-modal="true")
  .modal-dialog(role="document")
    .modal-content
      .modal-header
        button.close(type='button' data-dismiss='modal')
          span.sr-only Fermer la fenêtre modal
          i.maificon.maificon-cross(aria-hidden='true')
        .modal-title#title-modal-wifuhg
          h1 Titre modal Inline exemple
      .modal-body
        +swap-component
      .modal-footer
        .cta-group-version2.-horizontal.-align-right
          button.button.-primary(type="button") Valider
          button.button.-secondary(type="button") Annuler

.heading.type4.text-left Modal variant lg

//- Variant lg
#modal-gfriai.modal.-lg(tabindex='-1' role='dialog' aria-labelledby="title-modal-gfriai" aria-modal="true")
  .modal-dialog(role="document")
    .modal-content
      .modal-header
        button.close(type='button' data-dismiss='modal')
          span.sr-only Fermer la fenêtre modal
          i.maificon.maificon-cross(aria-hidden='true')
        .modal-title#title-modal-gfriai
          h1 Titre modal Inline exemple
      .modal-body
        +swap-component
      .modal-footer
        .cta-group-version2.-horizontal.-align-right
          button.button.-primary(type="button") Valider
          button.button.-secondary(type="button") Annuler

.heading.type4.text-left Modal variant sm

//- Variant sm
#modal-kypzmy.modal.-sm(tabindex='-1' role='dialog' aria-labelledby="title-modal-kypzmy" aria-modal="true")
  .modal-dialog(role="document")
    .modal-content
      .modal-header
        button.close(type='button' data-dismiss='modal')
          span.sr-only Fermer la fenêtre modal
          i.maificon.maificon-cross(aria-hidden='true')
        .modal-title#title-modal-kypzmy
          h1 Titre modal Inline exemple
      .modal-body
        +swap-component
      .modal-footer
        .cta-group-version2.-vertical
          button.button.-primary.-full-width(type="button") Valider
          button.button.-secondary.-full-width(type="button") Annuler

.heading.type4.text-left Modal variant bottom-sheet

p.
  Le variant bottom-sheet est disponible uniquement pour les écrans de taille sm et inférieure.
  Il permet d'afficher une fenêtre modale en bas de l'écran, souvent utilisée pour des actions rapides ou des informations complémentaires.
  Sur une fenêtre de taille md et supérieure, le comportement est similaire à celui du variant md par defaut, ou lg ou sm si défini.
  Pour voir la modale en variant bottom-sheet, ouvrez la modale plus bas en reduisant la fenêtre de votre navigateur.