Title
SubTitle
Subject avec zone libre. Le separateur est optionnel.
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.
Subject avec zone libre + zone Complementary
Title
SubTitle
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.
Subject avec zone Complementary contenant un composant Alert (severité warning).
Title
SubTitle
Alerte d'avertissement
Title
Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
Avec 1 chip - Edit
Title
SubTitle
Avec 2 chips - Edit + Delete
Title
SubTitle
Avec un Tag (Position -vertical) .
Title
SubTitle
Tag textTexte rgaa
HTML
PUG
include ../../../mixins/swap-component.pug
//- Zone libre + separator
.title-exemple
h4 Subject avec zone libre. Le separateur est optionnel.
.subject.-vertical
.wrapper-principal
.header
.image
img.img-fluid(src=fakeimg+"/64x64/" alt='')
.content
.title
h2 Title
p.subtitle SubTitle
.separator
.zone-libre
+swap-component
.documentation-space
//- Zone libre + zone Complementary
.title-exemple
h4 Subject avec zone libre + zone Complementary
.subject.-vertical
.wrapper-principal
.header
.image
img.img-fluid(src=fakeimg+"/64x64/" alt='')
.content
.title
h2 Title
p.subtitle SubTitle
.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
//- Zone Libre Complementary avec Alert
.title-exemple
h4 Subject avec zone Complementary contenant un composant Alert (severité warning).
.subject.-vertical
.wrapper-principal
.header
.image
img.img-fluid(src=fakeimg+"/64x64/" alt='')
.content
.title
h2 Title
p.subtitle SubTitle
.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
//- With Chips
.title-exemple
h4 Avec 1 chip - Edit
.subject.-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
.documentation-space
.title-exemple
h4 Avec 2 chips - Edit + Delete
.subject.-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
.documentation-space
//- Tag
.title-exemple
h4 Avec un Tag (Position -vertical) .
.subject.-vertical
.wrapper-principal
.header
.image
img.img-fluid(src=fakeimg+"/64x64/" alt='')
.content
.title
h2 Title
p.subtitle SubTitle
.tag.-primary
p Tag text
span.sr-only Texte rgaa