HTML
            


            
PUG
            
include ../../../mixins/swap-component.pug

//- Zone libre + separator
.title-exemple 
  h4 Subject avec zone libre. Le separateur est optionnel.
.subject-version2.-vertical.-image-size-extra-large 
  .wrapper-principal
    .header
      .image  
        img.img-fluid(src=fakeimg+"/64x64/" alt='') 
      .content
        .title
          h2
            span.suptitle Suptitle
            | Title
        p.subtitle SubTitle
    .separator
    .wrapper-content 
      +swap-component

.documentation-space
//- Zone libre + zone Complementary
.title-exemple 
  h4 Subject avec zone libre + zone Complementary
.subject-version2.-vertical.-image-size-extra-large 
  .wrapper-principal
    .header
      .image  
        img.img-fluid(src=fakeimg+"/64x64/" alt='') 
      .content
        .title
          h2
            span.suptitle Suptitle
            | Title
        p.subtitle SubTitle
    .wrapper-content 
      +swap-component
  .wrapper-complementary-version2 
    .header
      .content
        .title
          h2  Title
      .cta-group-version2.-horizontal.-align-right
        button.chip.-icon.-icon-with-text-md(type="button")
          i.maificon.maificon-trash(aria-hidden="true")
          span Supprimer
    .wrapper-content
      +swap-component

.documentation-space
//- Zone Libre Complementary avec Alert seul
.title-exemple 
  h4 Subject avec zone Complementary contenant un composant Alert (severité warning).
.subject-version2.-vertical.-image-size-extra-large 
  .wrapper-principal
    .header
      .image  
        img.img-fluid(src=fakeimg+"/64x64/" alt='') 
      .content
        .title
          h2
            span.suptitle Suptitle
            | Title
        p.subtitle SubTitle
  .wrapper-complementary-version2 
    .wrapper-content
      .alert.warning
        p.sr-only Alerte d'avertissement
        i.maificon.maificon-exclamation-round-small(aria-hidden='true')
        .wrapper-content
          p.title Title
          .content
            p Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat. Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.

.documentation-space
//- Zone Libre Complementary avec Alert + d'autres composants (ex: liste, bouton, etc.)
.title-exemple 
  h4 Subject avec zone Complementary contenant un Alert + d'autres composants.
.subject-version2.-vertical.-image-size-extra-large 
  .wrapper-principal
    .header
      .image  
        img.img-fluid(src=fakeimg+"/64x64/" alt='') 
      .content
        .title
          h2
            span.suptitle Suptitle
            | Title
        p.subtitle SubTitle
  .wrapper-complementary-version2 
    .wrapper-content
      .level-title
        .title.-type1.-weight-bold(tabindex='-1')
          h3 LevelTitle Lorem ipsum
      dl.definition-list-version2.-decoration-bullet.-color-red.-horizontal
        .item
          dt Terme :
          dd definition lorem ipsum dolor sit amet
        .item
          dt Terme lorem ipsum :
          dd definition lorem ipsum dolor sit amet
        .item
          dt Terme lorem ipsum :
          dd definition lorem ipsum

      .alert.warning.-reverse
        p.sr-only Alerte d'avertissement
        i.maificon.maificon-exclamation-round-small(aria-hidden='true')
        .wrapper-content
          p.title Title
          .content
            p Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat. Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
      .cta-group-version2.-horizontal.-space-between
        button.button.-secondary
          i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden='true')
          | Télécharger ma simulation
        button.button.-primary(type='button') Etre rappelé par un conseiller

.documentation-space
//- Tag
.title-exemple 
  h4 Avec un Tag (Position -vertical) .
.subject-version2.-vertical.-image-size-extra-large 
  .wrapper-principal
    .header
      .image  
        img.img-fluid(src=fakeimg+"/64x64/" alt='') 
      .content
        .title
          h2
            span.suptitle Suptitle
            | Title
        p.subtitle SubTitle
        .tag.-primary
          p Tag text
            span.sr-only Texte rgaa