HTML
            


            
PUG
            
.complementary-help.-collapse
  button(type="button", data-toggle="collapse", data-target="#collapse-basic", aria-expanded="false", aria-controls="#collapse-basic") Titre collapse

  .collapse.collapse-container#collapse-basic
    .collapse-content
      p.title Title
      a(href='#').link.-highlight-icon
        span Lorem ipsum 
      ul.list.-bullet.-color-red
        li Lorem ipsum
      p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius error modi provident officiis cumque voluptates consectetur, officia obcaecati doloremque, id laudantium, nobis perspiciatis molestiae architecto commodi harum laboriosam qui. Quisquam!
      ul.list.-check
        li Lorem ipsum
      ul.list.-highlight
        li Lorem ipsum
      a.link.-highlight-icon(href='#')
        i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
        span Lien avec icone personnalisée

.documentation-space

.complementary-help.-modal
  button.action-modal(type='button' data-toggle='modal' data-target='#modal-inline-1') Titre modal

.documentation-space

.complementary-help.-hybride
  button.d-none.d-sm-flex.collapsed(type="button" data-target="#modal-collapse-11" data-toggle="collapse" aria-expanded="false") Titre collapse
  button.action-modal.d-flex.d-sm-none(type='button' data-toggle='modal' data-target='#modal-inline-1') Titre modal

  #modal-collapse-11.collapse
    .collapse-content
      p.title Title (H3/H4/P)
      p Contenu texte 
        a(href="#").link lien
        |  Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte
      ul.list.-check
        li Check 1  Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte Contenu texte
        li Check 2