HTML
            


            
PUG
            
a.link.-highlight-icon(href='#') 
  span Link -highlight-icon
br/
button.link.-highlight-icon(type='button')
  span Link -highlight-icon (button)
.documentation-space
a.link.-highlight-icon(href='#')
  i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
  span Lien avec icone personnalisée avec un texte à mon avis un peu, voir beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup trop long
.documentation-space
a.link.-highlight-icon(href='#')
  i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
  span Lien avec icone personnalisée
    span.fileunit  (PDF - 430ko) 
.documentation-space
a.link.-highlight-icon(href='#' target='_blank')
  span Lien externe
    span.fileunit  (PDF - 430ko) 
    i.maificon.maificon-fleche-diagonale(aria-hidden='true')
    span.sr-only La page s'ouvre dans un nouvel onglet
.documentation-space
div(style='background: #525b85; padding: 10px; border-radius: 4px')
  a.link.-highlight-icon.-reverse(href='#')
    span Lien
  .documentation-space
  a.link.-highlight-icon.-reverse(href='#' target='_blank') 
    span Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a ante in lorem pretium dignissim. Quisque lacinia, lectus sagittis tincidunt accumsan, quam odio egestas orci, eu tristique dolor enim a orci.
      span.fileunit (PDF - 430ko)    
      i.maificon.maificon-fleche-diagonale(aria-hidden='true')
      span.sr-only La page s'ouvre dans un nouvel onglet