HTML
            


            
PUG
            

.sujet
  a(href='#').content
    .type
      .picto
        i.maificon.maificon-maison(aria-hidden='true')
    .detail
      .title Sujet défaut
      .description Description
      .caracteristiques 
        ul.bullet-list
          li 
            span information
          li
            span information
.sujet.desactive
  .content
    .type
      .picto
        i.maificon.maificon-maison(aria-hidden='true')
    .detail
      .title Sujet défaut
      .description Description 

.sujet.possible
  a(href='#').content
    .type
      .picto
        i.maificon.maificon-vehicule-inconnu(aria-hidden='true')
    .detail
      .title Sujet possible

.sujet.provisoire
  a(href='#').content
    .type
      .picto
        i.maificon.maificon-auto(aria-hidden='true')
    .detail
      .title Sujet provisoire
      .description Description
  .notification
    .content-container
      a.content(href='#')
        i.maificon.maificon-bulle(aria-hidden='true')
        span
          | Détails 
          strong mis en avant 
          |  le JJ/MM/AAAA

.sujet.nouveau
  .content
    a(href='#collapse-sujet-nouveau' data-toggle='collapse' aria-expanded='false')
      .type
        .picto
          i.maificon.maificon-plus(aria-hidden='true')
      .detail
        .title Sujet nouveau
    #collapse-sujet-nouveau.collapse
      .collapse-content
        .row
          .col-md-6.sujet-container
            .sujet.auto-moto
              .content
                .type
                  .picto
                    i.maificon.maificon-auto(aria-hidden='true')
            .sujet-links.link-highlight
              a(href='#') Assurer un véhicule
              a(href='#') Financer un véhicule
          .col-md-6.sujet-container
            .sujet.habitation
              .content
                .type
                  .picto
                    i.maificon.maificon-maison(aria-hidden='true')
            .sujet-links.link-highlight
              a(href='#') Assurer un logement
        .row
          .col-md-6.sujet-container
            .sujet.individu
              .content
                .type
                  .picto
                    i.maificon.maificon-famille(aria-hidden='true')
            .sujet-links.link-highlight
              a(href='#') Protéger au quotidien/loisirs
              a(href='#') Protéger au volant
              a(href='#') Protéger juridiquement
          .col-md-6.sujet-container
            .sujet.epargne-financements
              .content
                .type
                  .picto
                    i.maificon.maificon-livrets(aria-hidden='true')
            .sujet-links.link-highlight
              a(href='#') Épargner