HTML
            


            
PUG
            
.information.success
  p.sr-only Succès de l'action
  i.maificon.maificon-check-round-small(aria-hidden="true")
  .content
    p.title Titre P (p/H2/H3/H4) et picto (facultatifs) SUCCES
    p Contenu 
      a(href="#") lien
      |  conteu
    a(href='#').button.-primary btn-primary
  .wrapper-button
    button(type="button", onclick="this.closest('.information').remove()").remove
      span.sr-only Fermer
      i.maificon.maificon-cross(aria-hidden="true")
.information.warning
  p.sr-only Attention
  i.maificon.maificon-exclamation-round-small(aria-hidden="true")
  .content
    .title
      h2 Titre H2/H3/H4 et picto (facultatifs) WARNING
    p Contenu 
    a(href='#').button.-secondary btn-secondary
  .wrapper-button
    button.chip.-icon-only.-with-text-md
      i.maificon.maificon-trash(aria-hidden="true")
      span btn interface

.information.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-1", aria-expanded="false", aria-controls="#collapse-info-1")  Titre H2/H3  ERREUR
  .collapse.collapse-container#collapse-info-1 
    .collapse-content
      p Contenu collapse, 
       a(href="#") lien
       |  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!
      a(href='#').button.-primary btn-primary
      ul.bullet-list 
        li bla 
        li bla 
        li bla
      ul.check-list 
        li bla 
        li bla 
          li bla
      a(href='#').button.-secondary btn-secondary

.information.default
  p.sr-only Information
  i.maificon.maificon-information-round-small(aria-hidden='true')
  .content
    p.title  Titre (p/H2/H3/H4) et picto (facultatif) DEFAUT
    a(href="#").link.-highlight-icon Texte lien

.information.border
  p.sr-only 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 H2/H3/P BORDER
  .collapse.collapse-container#collapse-info-2 
    .collapse-content
      p Contenu collapse

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

.documentation-space

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

div(style="background: #F0F0F0; padding: 20px;")
  .information.warning.reverse
    p.sr-only Attention
    i.maificon.maificon-exclamation-round-small(aria-hidden="true")
    .content
      .title
        h2 Titre H2/H3/H4 et picto (facultatifs) WARNING REVERSE
      p Contenu 
    .wrapper-button
      button.chip.-icon-only.-with-text-md.-reverse
        i.maificon.maificon-trash(aria-hidden="true")
        span btn interface
  .information.danger.reverse
    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-11", aria-expanded="false", aria-controls="#collapse-info-11")  Titre H2/H3  ERREUR
    .collapse.collapse-container#collapse-info-11 
      .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!
        ul.bullet-list 
          li bla 
          li bla 
          li bla
        ul.check-list 
          li bla 
          li bla 
          li bla

div(style="background: #5C5C5C; padding: 20px;")
  .information.border.reverse
    p.sr-only Information
    i.maificon.maificon-information-round-small(aria-hidden='true')
    .content
      p.title Titre P et picto (facultatifs) BORDER REVERSE
      p Contenu