Title
SubTitle
Variant vertical -vertical avec une image.
TagTexte rgaa
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Title
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
Variant horizontal .-horizontal avec une image.
Title
SubTitle
TagTexte rgaa
Alerte d'avertissement
Title
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
Variant vertical en mobile et horizontal à partir du point de rupture md -vertical & -horizontal-md.
Title
SubTitle
TagTexte rgaa
Title
TagTexte rgaa
TagTexte rgaa
Swap Component
Remplacez-le par un composant existant ou celui que vous avez créé en utilisant le “swap instance” qui se trouve dans les propriétés du composant.
HTML
PUG
//- Composant Identity
Le composant Identity utilisé pour représenter une personne assurée.
Il permet d'identifier clairement l'individu lié à un ou plusieurs risques.
{@link https://www.figma.com/design/Q939BPomPGdYgSLi7atDjv/Identity Documentation Figma}
{@link https://www.figma.com/design/Xkaq70ey0jDadmofRa6wTe/Maif.fr-Form?node-id=18015-11950 Composant Figma}
{@link https://maquettes.tools.df.maif.io/katya/form.html#identity Composant Katya}
{@link https://maquettes.tools.df.maif.io/lib-react-ui/?path=/docs/components-identity--docs Composant React}
include ../../../mixins/swap-component.pug
//- Vertical
.title-exemple
h4 Variant vertical #[code -vertical] avec une image.
.identity.-vertical
.wrapper-principal
.header
.image
img.img-fluid(src=fakeimg+"/64x64/" alt='')
.content
.title
h2 Title
p.subtitle SubTitle
.cta-group-version2.-horizontal.-align-right
button.chip.-icon.-icon-with-text-md(type="button")
i.maificon.maificon-crayon-edit(aria-hidden="true")
span Modifier
button.chip.-icon.-icon-with-text-md(type="button")
i.maificon.maificon-trash(aria-hidden="true")
span Supprimer
.tag.-primary
p Tag
span.sr-only Texte rgaa
.separator
.zone-libre
+swap-component
.wrapper-complementary
.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
.zone-libre
+swap-component
.documentation-space
//- Horizontal
.title-exemple
h4 Variant horizontal #[code .-horizontal] avec une image.
.identity.-horizontal
.wrapper-principal
.header
.image
img.img-fluid(src=fakeimg+"/64x64/" alt='')
.content
.title
h2 Title
p.subtitle SubTitle
.tag.-primary
p Tag
span.sr-only Texte rgaa
.wrapper-complementary
.zone-libre
.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.
.documentation-space
//- Hybrid
.title-exemple
h4 Variant vertical en mobile et horizontal à partir du point de rupture md #[code -vertical] & #[code -horizontal-md].
.identity.-vertical.-horizontal-md
.wrapper-principal
.header
.image
img.img-fluid(src=fakeimg+"/64x64/" alt='')
.content
.title
h2 Title
p.subtitle SubTitle
.tag.-primary
p Tag
span.sr-only Texte rgaa
.wrapper-complementary
.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
.tag.-primary
p Tag
span.sr-only Texte rgaa
.zone-libre
.tag.-primary
p Tag
span.sr-only Texte rgaa
+swap-component