HTML
            


  
Alerte d'information

  

    
Titre facultatif (p/h2/h3/h4) et picto facultatif
    

      
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
      
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
      

        
Proident ipsum quis laboris exercitation.
        
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
      
      

        
Est Lorem est velit minim quis commodo nostrud.
        
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
      
Bouton secondaire
      
Nisi nisi1 laborum incididunt ipsum elit sint.
      Chip button
    
  
  

    Fermer
  



  
Alerte d'information

  

    
Titre facultatif (p/h2/h3/h4) et picto facultatif
    

      
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
      
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
      

        
Proident ipsum quis laboris exercitation.
        
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
      
      

        
Est Lorem est velit minim quis commodo nostrud.
        
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
      
Bouton secondaire
      
Nisi nisi1 laborum incididunt ipsum elit sint.
      Chip button
    
  



  
Alerte d'information
  

    

      Titre facultatif (p/h2/h3/h4) et picto facultatif
    
  
  
 
    

      
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
      
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
      

        
Proident ipsum quis laboris exercitation.
        
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
      
      

        
Est Lorem est velit minim quis commodo nostrud.
        
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
      
Bouton secondaire
      
Nisi nisi1 laborum incididunt ipsum elit sint.
      Chip button
    
  



  
Alerte de succès

  

    
Titre facultatif (p/h2/h3/h4) et picto
    

      
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
      
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
      

        
Proident ipsum quis laboris exercitation.
        
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
      
      

        
Est Lorem est velit minim quis commodo nostrud.
        
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
      
Bouton secondaire
      
Nisi nisi1 laborum incididunt ipsum elit sint.
      Chip button
    
  
  

    Fermer
  



  
Alerte d'avertissement

  

    
Titre facultatif (p/h2/h3/h4) et picto
    

      
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
      
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
      

        
Proident ipsum quis laboris exercitation.
        
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
      
      

        
Est Lorem est velit minim quis commodo nostrud.
        
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
      
Bouton secondaire
      
Nisi nisi1 laborum incididunt ipsum elit sint.
      Chip button
    
  



  
Alerte en erreur
  

    

      

        Titre (p/h2/h3/h4) et picto
      
    
  
  
 
    

      
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
      
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
      

        
Proident ipsum quis laboris exercitation.
        
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
      
      

        
Est Lorem est velit minim quis commodo nostrud.
        
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
      
Bouton secondaire
      
Nisi nisi1 laborum incididunt ipsum elit sint.
      Chip button
    
  


Alert sur fond sombre
Option d'affichage via la classe.-reverse

  
  

    
Alerte d'information

    

      

        
Titre facultatif (p/h2/h3/h4) et picto facultatif
      
      

        
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
        
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
        

          
Proident ipsum quis laboris exercitation.
          
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
        
        

          
Est Lorem est velit minim quis commodo nostrud.
          
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
        
Bouton secondaire
        
Nisi nisi1 laborum incididunt ipsum elit sint.
        Chip button
      
    
  
  
  

    
Échec de l'action
    

      

        

          Titre (p/h2/h3/h4) et picto facultatif
        
      
    
    
 
      

        
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
        
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
        

          
Proident ipsum quis laboris exercitation.
          
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
        
        

          
Est Lorem est velit minim quis commodo nostrud.
          
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
        
Bouton secondaire
        
Nisi nisi1 laborum incididunt ipsum elit sint.
        Chip button
      
    
  
  
  

    
Alert d'information

    

      
Titre facultatif (p/h2/h3/h4) et picto facultatif
      

        
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
        
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
        

          
Proident ipsum quis laboris exercitation.
          
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
        
        

          
Est Lorem est velit minim quis commodo nostrud.
          
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
        
Bouton secondaire
        
Nisi nisi1 laborum incididunt ipsum elit sint.
        Chip button
      
    
  
  
  

    
Alerte d'information

    

      
Titre facultatif (p/h2/h3/h4) et picto
      

        
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
        
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
        

          
Proident ipsum quis laboris exercitation.
          
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
        
        

          
Est Lorem est velit minim quis commodo nostrud.
          
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
        
Bouton secondaire
        
Nisi nisi1 laborum incididunt ipsum elit sint.
        Chip button
      
    
    

      Fermer
    
  
  
  

    
Alerte d'avertissement

    

      
Titre facultatif (p/h2/h3/h4) et picto
      

        
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
        
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
        

          
Proident ipsum quis laboris exercitation.
          
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
        
        

          
Est Lorem est velit minim quis commodo nostrud.
          
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
        
Bouton secondaire
        
Nisi nisi1 laborum incididunt ipsum elit sint.
        Chip button
      
    
  
  
  

    
Alerte en erreur
    

      

        Titre p/h2/h3/h4 et picto
      
    
    
 
      

        
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
        
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
        

          
Proident ipsum quis laboris exercitation.
          
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
        
        

          
Est Lorem est velit minim quis commodo nostrud.
          
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
        
Bouton secondaire
        
Nisi nisi1 laborum incididunt ipsum elit sint.
        Chip button
      
    
  


Alert avec une priorité haute
Option d'affichage via la classe.-high


  
Succès de l'action

  

    
Titre facultatif (p/h2/h3/h4) et picto
    

      
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
      
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
      

        
Proident ipsum quis laboris exercitation.
        
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
      
      

        
Est Lorem est velit minim quis commodo nostrud.
        
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
      
Bouton secondaire
      
Nisi nisi1 laborum incididunt ipsum elit sint.
      Chip button
    
  



  
Attention

  

    
Titre facultatif (p/h2/h3/h4) et picto
    

      
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
      
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
      

        
Proident ipsum quis laboris exercitation.
        
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
      
      

        
Est Lorem est velit minim quis commodo nostrud.
        
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
      
Bouton secondaire
      
Nisi nisi1 laborum incididunt ipsum elit sint.
      Chip button
    
  



  
Échec de l'action
  

    

      
 
        Titre (p/h2/h3/h4) et picto
      
    
  
  

    

      
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
      
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
      

        
Proident ipsum quis laboris exercitation.
        
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
      
      

        
Est Lorem est velit minim quis commodo nostrud.
        
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
      
Bouton secondaire
      
Nisi nisi1 laborum incididunt ipsum elit sint.
      Chip button
    
  


Alert avec une priorité haute .-high sur fond sombre
Option d'affichage via la classe.-constrat

  
  

    
Succès de l'action

    

      
Titre facultatif (p/h2/h3/h4) et picto
      

        
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
        
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
        

          
Proident ipsum quis laboris exercitation.
          
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
        
        

          
Est Lorem est velit minim quis commodo nostrud.
          
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
        
Bouton secondaire
        
Nisi nisi1 laborum incididunt ipsum elit sint.
        Chip button
      
    
    

      Fermer
    
  


  
  

    
Attention

    

      
Titre facultatif (p/h2/h3/h4) et picto
      

        
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
        
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
        

          
Proident ipsum quis laboris exercitation.
          
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
        
        

          
Est Lorem est velit minim quis commodo nostrud.
          
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
        
Bouton secondaire
        
Nisi nisi1 laborum incididunt ipsum elit sint.
        Chip button
      
    
  
  
  

    
Échec de l'action
    

      

        

          Titre (p/h2/h3/h4) et picto
        
      
    
    

      

        
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
        
Veniam pariatur occaecat ullamco adipisicing.
Bouton primaire
        

          
Proident ipsum quis laboris exercitation.
          
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
        
        

          
Est Lorem est velit minim quis commodo nostrud.
          
Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
        
Bouton secondaire
        
Nisi nisi1 laborum incididunt ipsum elit sint.
        Chip button
      
    
  


Alert comme un appel à l'action
Option d'affichage via la classe.-incitation

  
Avertissement de l'action

  

    

      
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, impedit distinctio explicabo vel nesciunt sunt eligendi accusamus fuga quod cum soluta ipsum animi hic blanditiis aspernatur vero? Voluptatibus, consequatur cupiditate?
    
    

      
Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
      
Veniam pariatur occaecat ullamco adipisicing.
      

        
Proident ipsum quis laboris exercitation.
        
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
        
Ut laboris culpa eiusmod ullamco.
      
    
  


  
Avertissement de l'action

  

    

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget aliquam ultricies,
    
  
-->


            
PUG
            
//- Composant Alert

  Le composant `Alert` permet de donner une information complémentaire à un élément, ou à un ensemble d’éléments.
  Il peut être utilisé pour répondre à plusieurs besoins et peut donner une information plus ou moins importante selon la forme dans lequel il est utilisé.

  {@link https://www.figma.com/design/7lJV29WBs310nj08MickBA/Alert Documentation Figma}
  {@link https://www.figma.com/design/Xkaq70ey0jDadmofRa6wTe/Maif.fr-Form?node-id=8583-1310 Composant Figma}
  {@link https://maquettes.tools.df.maif.io/katya/base.html#alert Composant Katya}
  {@link https://maquettes.tools.df.maif.io/lib-react-ui/?path=/docs/components-alert--docs Composant React}

mixin content
  p Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
  p Veniam pariatur occaecat ullamco adipisicing.
  a(href='#').button.-primary Bouton primaire
  ul.bullet-list
    li Proident ipsum quis laboris exercitation.
    li Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  ul.check-list
    li Est Lorem est velit minim quis commodo nostrud.
    li Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  a(href='#').button.-secondary Bouton secondaire
  p Nisi nisi1 laborum incididunt ipsum elit sint.
  button.chip(type="button")
    span Chip button

.heading.type4.text-left Alert avec une priorité par défaut

// Alerte par défaut
.alert.-primary
  p.sr-only Alerte d'information
  i.maificon.maificon-information-round-small(aria-hidden='true')
  .wrapper-content
    p.title Titre facultatif (p/h2/h3/h4) et picto facultatif
    .content
      +content
  .wrapper-button
    button(type="button", onclick="this.closest('.alert').remove()").remove
      span.sr-only Fermer
      i.maificon.maificon-cross(aria-hidden="true")

// Alerte neutre
.alert.-secondary
  p.sr-only Alerte d'information
  i.maificon.maificon-information-round-small(aria-hidden='true')
  .wrapper-content
    p.title Titre facultatif (p/h2/h3/h4) et picto facultatif
    .content
      +content

// Alerte avec bordure
.alert.-tertiary
  p.sr-only Alerte d'information
  .wrapper-collapse
    i.maificon.maificon-information-round-small(aria-hidden='true')
    .title
      button.extend-link(type="button", data-toggle="collapse", data-target="#collapse-info-2", aria-expanded="false", aria-controls="#collapse-info-2") Titre facultatif (p/h2/h3/h4) et picto facultatif
  .collapse.collapse-container#collapse-info-2 
    .collapse-content
      +content

// Alerte en succès
.alert.success
  p.sr-only Alerte de succès
  i.maificon.maificon-check-round-small(aria-hidden='true')
  .wrapper-content
    p.title Titre facultatif (p/h2/h3/h4) et picto
    .content
      +content
  .wrapper-button
    button(type="button", onclick="this.closest('.alert').remove()").remove
      span.sr-only Fermer
      i.maificon.maificon-cross(aria-hidden="true")

// Alerte en avertissement
.alert.warning
  p.sr-only Alerte d'avertissement
  i.maificon.maificon-exclamation-round-small(aria-hidden='true')
  .wrapper-content
    p.title Titre facultatif (p/h2/h3/h4) et picto
    .content
      +content

// Alerte en erreur
.alert.error
  p.sr-only Alerte en erreur
  .wrapper-collapse
    i.maificon.maificon-cross-round-small(aria-hidden='true')
    .title
      p
        button.extend-link(type="button", data-toggle="collapse", data-target="#collapse-info-2", aria-expanded="false", aria-controls="#collapse-info-2") Titre (p/h2/h3/h4) et picto
  .collapse.collapse-container#collapse-info-2 
    .collapse-content
      +content

.documentation-space

p.heading.type4.text-left Alert sur fond sombre
p Option d'affichage via la classe
  code .-reverse

div(style="background: #5C5C5C; padding: 20px;")
  // Alerte par defaut sur fond sombre
  .alert.-primary.-reverse
    p.sr-only Alerte d'information
    i.maificon.maificon-information-round-small(aria-hidden="true")
    .wrapper-content
      .title
        h2 Titre facultatif (p/h2/h3/h4) et picto facultatif
      .content
        +content

  // Alerte neutre sur fond sombre
  .alert.-secondary.-reverse
    p.sr-only Échec de l'action
    .wrapper-collapse
      i.maificon.maificon-information-round-small(aria-hidden="true")
      .title
        h2
          button.extend-link(type="button", data-toggle="collapse", data-target="#collapse-info-11", aria-expanded="false", aria-controls="#collapse-info-11") Titre (p/h2/h3/h4) et picto facultatif
    .collapse.collapse-container#collapse-info-11 
      .collapse-content
        +content

  // Alerte en bordure sur fond sombre
  .alert.-tertiary.-reverse
    p.sr-only Alert d'information
    i.maificon.maificon-information-round-small(aria-hidden='true')
    .wrapper-content
      p.title Titre facultatif (p/h2/h3/h4) et picto facultatif
      .content
        +content

  // Alerte en succès
  .alert.-reverse.success
    p.sr-only Alerte d'information
    i.maificon.maificon-check-round-small(aria-hidden='true')
    .wrapper-content
      p.title Titre facultatif (p/h2/h3/h4) et picto
      .content
        +content
    .wrapper-button
      button(type="button", onclick="this.closest('.alert').remove()").remove
        span.sr-only Fermer
        i.maificon.maificon-cross(aria-hidden="true")

  // Alerte en avertissement
  .alert.-reverse.warning
    p.sr-only Alerte d'avertissement
    i.maificon.maificon-exclamation-round-small(aria-hidden='true')
    .wrapper-content
      p.title Titre facultatif (p/h2/h3/h4) et picto
      .content
        +content

  // Alerte en erreur
  .alert.-reverse.error
    p.sr-only Alerte en erreur
    .wrapper-collapse
      i.maificon.maificon-cross-round-small(aria-hidden='true')
      .title
        button.extend-link(type="button", data-toggle="collapse", data-target="#collapse-info-2", aria-expanded="false", aria-controls="#collapse-info-2") Titre p/h2/h3/h4 et picto
    .collapse.collapse-container#collapse-info-2 
      .collapse-content
        +content

.documentation-space

p.heading.type4.text-left Alert avec une priorité haute
p Option d'affichage via la classe
  code .-high

// Alerte de succès avec priorité haute
.alert.-high.success
  p.sr-only Succès de l'action
  i.maificon.maificon-check-round-small(aria-hidden="true")
  .wrapper-content
    p.title Titre facultatif (p/h2/h3/h4) et picto
    .content
      +content

// Alerte d'avertissement avec priorité haute
.alert.-high.warning
  p.sr-only Attention
  i.maificon.maificon-exclamation-round-small(aria-hidden="true")
  .wrapper-content
    p.title Titre facultatif (p/h2/h3/h4) et picto
    .content
      +content

// Alerte en erreur avec priorité haute
.alert.-high.error
  p.sr-only Échec de l'action
  .wrapper-collapse
    i.maificon.maificon-cross-round-small(aria-hidden='true')
    .title
      h2 
        button.extend-link(type="button", data-toggle="collapse", data-target="#collapse-info-snackbar", aria-expanded="false", aria-controls="#collapse-info-snackbar") Titre (p/h2/h3/h4) et picto
  .collapse.collapse-container#collapse-info-snackbar
    .collapse-content
      +content

.documentation-space

p.heading.type4.text-left Alert avec une priorité haute .-high sur fond sombre
p Option d'affichage via la classe
  code .-constrat

div(style="background: #F0F0F0; padding: 20px;")
  // Alerte de succès avec priorité haute et mise en évidence
  .alert.-high.-contrast.success
    p.sr-only Succès de l'action
    i.maificon.maificon-check-round-small(aria-hidden="true")
    .wrapper-content
      p.title Titre facultatif (p/h2/h3/h4) et picto
      .content
        +content
    .wrapper-button
      button(type="button", onclick="this.closest('.-high').remove()").remove
        span.sr-only Fermer
        i.maificon.maificon-cross(aria-hidden="true")

div(style="background: #5C5C5C; padding: 20px;")
  // Alerte d'avertissement avec priorité haute et mise en évidence
  .alert.-high.-contrast.warning
    p.sr-only Attention
    i.maificon.maificon-exclamation-round-small(aria-hidden="true")
    .wrapper-content
      p.title Titre facultatif (p/h2/h3/h4) et picto
      .content
        +content

  // Alerte en erreur avec priorité haute et mise en évidence
  .alert.-high.-contrast.error
    p.sr-only Échec de l'action
    .wrapper-collapse
      i.maificon.maificon-cross-round-small(aria-hidden='true')
      .title
        h2
          button.extend-link(type="button", data-toggle="collapse", data-target="#collapse-info-snackbar", aria-expanded="false", aria-controls="#collapse-info-snackbar") Titre (p/h2/h3/h4) et picto
    .collapse.collapse-container#collapse-info-snackbar
      .collapse-content
        +content

.documentation-space

p.heading.type4.text-left Alert comme un appel à l'action
p Option d'affichage via la classe
  code .-incitation

.alert.warning.-incitation
  p.sr-only Avertissement de l'action
  i.maificon.maificon-exclamation-round-small(aria-hidden="true")
  .wrapper-content
    .title
      h2
        a.extend-link(href="#") Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, impedit distinctio explicabo vel nesciunt sunt eligendi accusamus fuga quod cum soluta ipsum animi hic blanditiis aspernatur vero? Voluptatibus, consequatur cupiditate?
    .content
      p Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.
      p Veniam pariatur occaecat ullamco adipisicing.
      ul.bullet-list
        li Proident ipsum quis laboris exercitation.
        li Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
        li Ut laboris culpa eiusmod ullamco.

.alert.warning.-incitation
  p.sr-only Avertissement de l'action
  i.maificon.maificon-exclamation-round-small(aria-hidden="true")
  .wrapper-content
    .content
      button.extend-link(type="button").
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget aliquam ultricies,