HTML
            


            
PUG
            
.information.end.default
  p.sr-only Information
  img(src=fakeimg+"/64x64/" alt='')
  .content
    p.title Type something (H1/H2/H3/P)
    p.subtitle Sous titre facultatif mais toujours centré. Sous titre facultatif mais toujours centré. Sous titre facultatif mais toujours centré. Sous titre facultatif mais toujours centré. Sous titre facultatif mais toujours centré. Sous titre facultatif mais toujours centré. Sous titre facultatif mais toujours centré. 
    p Contenu centré. 
      a(href="#") Lien
      |  Contenu centré. Contenu centré. Contenu centré. Contenu centré. Contenu centré. Contenu centré. Contenu centré. Contenu centré. Contenu centré. Contenu centré. 
    p.text-left Contenu ferré à gauche. Contenu ferré à gauche. Contenu ferré à gauche. Contenu ferré à gauche. Contenu ferré à gauche. Contenu ferré à gauche. Contenu ferré à gauche. Contenu ferré à gauche. 
    .wrapper-button
      .row
        .col-md-8.mx-auto
          .row
            .col-md-6
              button.button.-secondary Bouton
            .col-md-6
              button.button.-primary Bouton
    a(href="#").link.-highlight-icon Lien 

.information.end.success
  p.sr-only Succès de l'action
  i.maificon.maificon-check-round(aria-hidden="true")
  .content
    p.title Lorem ipsum dolor sit amet. (H2/H3/P)

.information.end.danger
  p.sr-only Échec de l'action
  img(src=fakeimg+"/64x64/" alt='')
  .content
    .title
      h2 Type something h2
    p Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
    .wrapper-button
      .row
        .col-md-8.mx-auto
          .row
            .col-md-6
              button.button.-secondary Bouton
            .col-md-6
              button.button.-primary Bouton
    a(href="#").step-back Lien retour

.information.end.warning
  p.sr-only Attention
  i.maificon.maificon-exclamation-round(aria-hidden="true")
  .content
    p.title Type something (H1/H2/H3/P)
    p Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
    .wrapper-button
      .row
        .col-md-8.mx-auto
          .row
            .col-md-6
              button.button.-secondary Bouton
            .col-md-6
              button.button.-primary Bouton
    a(href="#").link.-highlight-icon Lien 

.information.end.neutral
  p.sr-only Information
  img(src=fakeimg+"/64x64/", alt='')
  .content
    .title 
      h2 Type something h2
    p Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
    .wrapper-button
      .row
        .col-md-8.mx-auto
          .row
            .col-md-6
              button.button.-secondary Bouton
            .col-md-6
              button.button.-primary Bouton
    a(href="#").step-back Lien retour

.information.end.border
  p.sr-only Information
  img(src=fakeimg+"/64x64/" alt='')
  .content
    p.title Type something (H1/H2/H3/P)
    p  Lorem ipsum dolor sit amet.  Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
    .wrapper-button
      .row
        .col-md-8.mx-auto
          .row
            .col-md-6
              button.button.-secondary Bouton
            .col-md-6
              button.button.-primary Bouton
    a(href="#").link.-highlight-icon Lien captial

.documentation-space

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

div(style="background: #5C5C5C; padding: 20px;")
  .information.end.danger.reverse
    p.sr-only Échec de l'action
    img(src=fakeimg+"/64x64/" alt='')
    .content
      .title
        h2 Type something h2
      p Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
      .wrapper-button
        .row
          .col-md-8.mx-auto
            .row
              .col-md-6
                button.button.-secondary Bouton
              .col-md-6
                button.button.-primary Bouton
      a(href="#").step-back Lien retour
  .information.end.success.reverse
    p.sr-only Succès de l'action
    i.maificon.maificon-check-round(aria-hidden="true")
    .content
      p.title Type something (H1/H2/H3/P)
      .wrapper-button
        .row
          .col-md-8.mx-auto
            .row
              .col-md-6
                button.button.-secondary Bouton
              .col-md-6
                button.button.-primary Bouton
      a(href="#").link.-highlight-icon Lien 
  .information.end.border.reverse
    p.sr-only Information
    img(src=fakeimg+"/64x64/" alt='')
    .content
      p.title Type something (H1/H2/H3/P)
      p  Lorem ipsum dolor sit amet.  Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
      .wrapper-button
        .row
          .col-md-8.mx-auto
            .row
              .col-md-6
                button.button.-secondary Bouton
              .col-md-6
                button.button.-primary Bouton
      a(href="#").step-back Lien retour

div(style="background: #F0F0F0; padding: 20px;")
  .information.end.warning.reverse
    p.sr-only Attention
    i.maificon.maificon-exclamation-round(aria-hidden="true")
    .content
      p.title Type something (H1/H2/H3/P) reverse
      p Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  .information.end.default.reverse
    p.sr-only Information
    img(src=fakeimg+"/64x64/" alt='')
    .content
      p.title Type something (H1/H2/H3/P)
      p Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
      .wrapper-button
        .row
          .col-md-8.mx-auto
            button.button.-primary Bouton