HTML
            


            
PUG
            
.information.snackbar.success
  p.sr-only Succès de l'action
  i.maificon.maificon-check-round-small(aria-hidden="true")
  .content
    p.title (Titre H2/H3/P) et picto (facultatifs)
    p Contenu
  .wrapper-button
    button(type="button", onclick="this.closest('.snackbar').remove()").remove
      span.sr-only Fermer
      i.maificon.maificon-cross(aria-hidden="true")

.information.snackbar.warning
  p.sr-only Attention
  i.maificon.maificon-exclamation-round-small(aria-hidden="true")
  .content
    p Contenu

.information.snackbar.danger
  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 H2/H3/P
  .collapse.collapse-container#collapse-info-snackbar
    .collapse-content   
      p Contenu collapse, Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, cum beatae, rerum, harum totam ullam pariatur aut asperiores quod ut distinctio exercitationem amet illo itaque. Odio veritatis impedit quaerat porro!

.information.snackbar.default
  p.sr-only Information
  i.maificon.maificon-information-round-small(aria-hidden='true')
  .content
    p.title (Titre H2/H3/P) et picto (facultatifs)
    p Contenu bloc information - Default Contenu bloc information - Default Contenu bloc information - Default
    a(href="#").link-highlight Texte lien

.information.snackbar.neutral
  p.sr-only Information
  .content
    p Contenu bloc 
.information.snackbar.border
  .content
    p Contenu bloc 

.documentation-space

p.heading.type4.text-left Information 
  code .snackbar
  |  sur fond foncé 
p Option d'affichage via la classe 
  code .constrat

div(style="background: #5C5C5C; padding: 20px;")
  .information.snackbar.warning.contrast
    p.sr-only Attention
    i.maificon.maificon-exclamation-round-small(aria-hidden="true")
    .content
      p Contenu 
  .information.snackbar.danger.contrast
    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 H2/H3/P
    .collapse.collapse-container#collapse-info-snackbar
      .collapse-content   
        p Contenu collapse, Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, cum beatae, rerum, harum totam ullam pariatur aut asperiores quod ut distinctio exercitationem amet illo itaque. Odio veritatis impedit quaerat porro!

div(style="background: #F0F0F0; padding: 20px;")
  .information.snackbar.success.contrast
    p.sr-only Succès de l'action
    i.maificon.maificon-check-round-small(aria-hidden="true")
    .content
      p.title Titre (H2/H3/P) et picto (facultatifs)
      p Contenu
    .wrapper-button
      button(type="button", onclick="this.closest('.snackbar').remove()").remove
        span.sr-only Fermer
        i.maificon.maificon-cross(aria-hidden="true")
  .information.snackbar.default.contrast
    p.sr-only Information
    i.maificon.maificon-information-round-small(aria-hidden='true')
    .content
      p.title (Titre H2/H3/P) et picto (facultatifs)
      p Contenu bloc information - Default Contenu bloc information - Default Contenu bloc information - Default
      a(href="#").link-highlight Texte lien