HTML
            


            
PUG
            
//- Composant EndAlert

  Le composant EndAlert permet d’informer l’utilisateur de la fin de son parcours, quelque soit l’état. Elle peut être utilisée pour la fin d’un parcours validé, ou parce que l’utilisateur est bloqué, ou qu’il est redirigé ailleurs.

  {@link https://www.figma.com/design/vlSnwceC4TVdofespfieHh/EndAlert Documentation Figma}
  {@link https://www.figma.com/design/Xkaq70ey0jDadmofRa6wTe/Maif.fr-Form?node-id=8583-1311 Composant Figma}
  {@link https://maquettes.tools.df.maif.io/katya/base.html#end-alert Composant Katya}
  {@link https://maquettes.tools.df.maif.io/lib-react-ui/?path=/docs/components-endalert--docs Composant React}

//- Contenu
mixin content
  p Ullamco enim id eiusmod quis non elit culpa commodo est.
  p.text-left Consequat voluptate commodo quis dolor veniam. Irure excepteur consequat est ea do qui mollit enim irure nisi laborum excepteur culpa enim. Voluptate velit culpa in do incididunt incididunt consequat. Aliqua ea duis sunt exercitation magna aliquip. Esse eu sint proident elit ea adipisicing. Irure ea reprehenderit officia veniam reprehenderit cupidatat. Reprehenderit deserunt minim et sunt sit Lorem est ad.
  .cta-group-version2.-align-center
    a.button.-primary(href='#') Bouton principal
    button.button.-secondary(type='button') Bouton secondaire
  a(href="#").link.-highlight-icon Lien capital
  p Nisi nisi1 laborum incididunt ipsum elit sint.

.end-alert.-primary
  p.sr-only Information
  img(src=fakeimg+"/64x64/" alt='')
  .wrapper-head
    p.title Titre de l'alerte de fin de parcours (H1/H2/H3/P)
    p.subtitle Sous titre facultatif, lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum accusantium, odit consectetur dolore omnis esse? At dicta ratione explicabo qui dolorem sapiente, excepturi voluptatibus voluptate quod provident deserunt. Illum, veritatis!
  .wrapper-content
    +content

.end-alert.-secondary
  p.sr-only Information
  img(src=fakeimg+"/64x64/", alt='')
  .wrapper-head
    p.title Titre de l'alerte de fin de parcours (H1/H2/H3/P)
    p.subtitle Sous titre facultatif, lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum accusantium, odit consectetur dolore omnis esse? At dicta ratione explicabo qui dolorem sapiente, excepturi voluptatibus voluptate quod provident deserunt. Illum, veritatis!
  .wrapper-content
    +content

.end-alert.-tertiary
  p.sr-only Information
  img(src=fakeimg+"/64x64/" alt='')
  .wrapper-head
    p.title Titre de l'alerte de fin de parcours (H1/H2/H3/P)
    p.subtitle Sous titre facultatif, lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum accusantium, odit consectetur dolore omnis esse? At dicta ratione explicabo qui dolorem sapiente, excepturi voluptatibus voluptate quod provident deserunt. Illum, veritatis!
  .wrapper-content
    +content

.end-alert.success
  p.sr-only Succès de l'action
  i.maificon.maificon-check-round(aria-hidden="true")
  .wrapper-head
    p.title Titre de l'alerte de fin de parcours (H1/H2/H3/P)
    p.subtitle Sous titre facultatif, lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum accusantium, odit consectetur dolore omnis esse? At dicta ratione explicabo qui dolorem sapiente, excepturi voluptatibus voluptate quod provident deserunt. Illum, veritatis!
  .wrapper-content
    +content

.end-alert.warning
  p.sr-only Attention
  i.maificon.maificon-exclamation-round(aria-hidden="true")
  .wrapper-head
    p.title Titre de l'alerte de fin de parcours (H1/H2/H3/P)
    p.subtitle Sous titre facultatif, lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum accusantium, odit consectetur dolore omnis esse? At dicta ratione explicabo qui dolorem sapiente, excepturi voluptatibus voluptate quod provident deserunt. Illum, veritatis!
  .wrapper-content
    +content

.end-alert.error
  p.sr-only Échec de l'action
  i.maificon.maificon-cross-round(aria-hidden="true")
  .wrapper-head
    p.title Titre de l'alerte de fin de parcours (H1/H2/H3/P)
    p.subtitle Sous titre facultatif, lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum accusantium, odit consectetur dolore omnis esse? At dicta ratione explicabo qui dolorem sapiente, excepturi voluptatibus voluptate quod provident deserunt. Illum, veritatis!
  .wrapper-content
    +content

.documentation-space

p.heading.type4.text-left EndAlert sur fond sombre 
p Option d'affichage via la classe 
  code .-reverse

div(style="background: #5C5C5C; padding: 20px;")
  .end-alert.-primary.-reverse
    p.sr-only Information
    img(src=fakeimg+"/64x64/" alt='')
    .wrapper-head
      p.title Titre de l'alerte de fin de parcours (H1/H2/H3/P)
      p.subtitle Sous titre facultatif, lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum accusantium, odit consectetur dolore omnis esse? At dicta ratione explicabo qui dolorem sapiente, excepturi voluptatibus voluptate quod provident deserunt. Illum, veritatis!
    .wrapper-content
      +content

  .end-alert.-reverse.-secondary
    p.sr-only Information
    img(src=fakeimg+"/64x64/", alt='')
    .wrapper-head
      p.title Titre de l'alerte de fin de parcours (H1/H2/H3/P)
      p.subtitle Sous titre facultatif, lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum accusantium, odit consectetur dolore omnis esse? At dicta ratione explicabo qui dolorem sapiente, excepturi voluptatibus voluptate quod provident deserunt. Illum, veritatis!
    .wrapper-content
      +content

  .end-alert.-reverse.-tertiary
    p.sr-only Information
    img(src=fakeimg+"/64x64/" alt='')
    .wrapper-head
      p.title Titre de l'alerte de fin de parcours (H1/H2/H3/P)
      p.subtitle Sous titre facultatif, lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum accusantium, odit consectetur dolore omnis esse? At dicta ratione explicabo qui dolorem sapiente, excepturi voluptatibus voluptate quod provident deserunt. Illum, veritatis!
    .wrapper-content
      +content

  .end-alert.-reverse.success
    p.sr-only Succès de l'action
    i.maificon.maificon-check-round(aria-hidden="true")
    .wrapper-head
      p.title Titre de l'alerte de fin de parcours (H1/H2/H3/P)
      p.subtitle Sous titre facultatif, lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum accusantium, odit consectetur dolore omnis esse? At dicta ratione explicabo qui dolorem sapiente, excepturi voluptatibus voluptate quod provident deserunt. Illum, veritatis!
    .wrapper-content
      +content

  .end-alert.-reverse.warning
    p.sr-only Attention
    i.maificon.maificon-exclamation-round(aria-hidden="true")
    .wrapper-head
      p.title Titre de l'alerte de fin de parcours (H1/H2/H3/P)
      p.subtitle Sous titre facultatif, lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum accusantium, odit consectetur dolore omnis esse? At dicta ratione explicabo qui dolorem sapiente, excepturi voluptatibus voluptate quod provident deserunt. Illum, veritatis!
    .wrapper-content
      +content

  .end-alert.-reverse.error
    p.sr-only Échec de l'action
    i.maificon.maificon-cross-round(aria-hidden="true")
    .wrapper-head
      p.title Titre de l'alerte de fin de parcours (H1/H2/H3/P)
      p.subtitle Sous titre facultatif, lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum accusantium, odit consectetur dolore omnis esse? At dicta ratione explicabo qui dolorem sapiente, excepturi voluptatibus voluptate quod provident deserunt. Illum, veritatis!
    .wrapper-content
      +content