HTML
            


            
PUG
            
ul.list.-icon.-color-red.-size-medium
  li
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p.title Choix 1
      sup.ref-link-version2#return-id-1bis
        a(href="#id-1bis" title="Aller à la note n°1 en bas de page" aria-label="Aller à la note n°1 en bas de page") 1
    ul.list.-bullet.-color-red
      li Sous liste item1
      li Sous liste item2
  li
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p.title Choix 2
      button.action-modal(type='button' data-toggle='modal' data-target='#')
        i.maificon.maificon-information-cercle(aria-hidden='true')
        span.sr-only Information sur XXX.
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
    ul.list.-bullet.-color-red
      li Sous liste item1
        button.action-modal(type='button' data-toggle='modal' data-target='#')
          i.maificon.maificon-information-cercle(aria-hidden='true')
          span.sr-only Information sur XXX.
      li Sous liste item2
        sup.ref-link-version2#return-id-1bis
          a(href="#id-2bis" title="Aller à la note n°1 en bas de page" aria-label="Aller à la note n°1 en bas de page") 2
  li
    .media 
      img(src=fakeimg+"/32x32/")
    p.title Choix 3
    p Lorem ipsum dolor sit amet, consectetur adipiscing.

br

p 
  strong List Icon Black :

ul.list.-icon.-color-black.-size-medium
  li
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
  li
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.

br

p 
  strong List Icon Severity :
ul.list.-icon.-size-medium
  li.success 
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    .title 
      h3 Choix 1
      button.action-modal(type='button' data-toggle='modal' data-target='#')
        i.maificon.maificon-information-cercle(aria-hidden='true')
        span.sr-only Information sur XXX.
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
  li.error
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
  li.warning
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
      button.action-modal(type='button' data-toggle='modal' data-target='#')
        i.maificon.maificon-information-cercle(aria-hidden='true')
        span.sr-only Information sur XXX.
  li.neutral
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.

br

p 
  strong List Icon Small :

ul.list.-icon.-size-small
  li.success
    i.maificon.maificon-check(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
  li.error
    i.maificon.maificon-check(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
  li.neutral
    i.maificon.maificon-cross(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.
  li.neutral
    i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
    p Lorem ipsum dolor sit amet, consectetur adipiscing.