Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton
Title
LevelTitle size 18px (avec titleWeightBold)
- Lorem ipsum dolor
- 123,45 €
Lorem ipsum dolor
- 123,45 €
- Tilya SUHPYC
- 1/3
-
né(e) me 03/01/2010 à Niort
demeurant ANDRE ROUSSIN 13480, CABRIES
à défault le(s) bénéficiaire(s) suivant(s) en cas de décès ou de renonciation :- Juliette PLANTIER
né(e) le 21/11/1975 à 17000, LA ROCHELLE - Juliette PLANTIER
né(e) le 06/09/1965 à 79000, BESSINES
à défault me(s) héritiers.
Alerte d'avertissement
Titre facultatif (p/hx/hx/h4) et picto
- Juliette PLANTIER
- Lorem ipsum dolor
- Lorem ipsum
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Adresse Email
- prenom.nompersonne@clubinternet.com
- Lorem ipsum dolor
- Lorem Ipsum dolor
LevelTitle size 18px (sans gras)
- Propriétaire
- prénom et nom
- Tél. Fixe
- 05 23 45 67 89
- Tél. Portable
- 06 12 34 56 78
-
Garantie n°1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-
Garantie n°2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
- Ut enim ad minim veniam, quis nostrud xercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
Titre facultatif (p/h2/h3/h4) et picto
Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton.
- Lorem ipsum dolor
- Oui
- (Lorem ipsum dolor sit amet, consectetur adipiscing)
- Lorem ipsum dolor
- Oui
- Lorem ipsum dolor
- Ipsum dolor sit amet lorem dolor sit
- Lorem ipsum dolor
- Oui
Alerte d'avertissement
Titre facultatif (p/hx/hx/h4) et picto
Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Propriétaire :
- prénom et nom
- Téléphone :
- 01 23 45 67 89
- E-mail :
- prenom.nom-a-rallonge@moncompte-internet.com
- Propriétaire :
- prénom et nom
- Téléphone :
- 01 23 45 67 89
- E-mail :
- prenom.nom-a-rallonge@moncompte-internet.com
- Lorem ipsum dolor
- Oui
- (Lorem ipsum dolor sit amet, consectetur adipiscing)
- Lorem ipsum dolor
- Oui
- Lorem ipsum dolor
- Ipsum dolor sit amet lorem dolor sit
HTML
Title
LevelTitle size 18px (avec titleWeightBold)
- Lorem ipsum dolor
- 123,45 €
Lorem ipsum dolor - 123,45 €
- Tilya SUHPYC
- 1/3
-
né(e) me 03/01/2010 à Niort
demeurant ANDRE ROUSSIN 13480, CABRIES
à défault le(s) bénéficiaire(s) suivant(s) en cas de décès ou de renonciation :
- Juliette PLANTIER
né(e) le 21/11/1975 à 17000, LA ROCHELLE
- Juliette PLANTIER
né(e) le 06/09/1965 à 79000, BESSINES
à défault me(s) héritiers.
Alerte d'avertissement
Titre facultatif (p/hx/hx/h4) et picto
Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton
- Lorem ipsum dolor
- Lorem ipsum
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Adresse Email
- prenom.nompersonne@clubinternet.com
- Lorem ipsum dolor
- Lorem Ipsum dolor
LevelTitle size 18px (sans gras)
- Propriétaire
- prénom et nom
- Tél. Fixe
- 05 23 45 67 89
- Tél. Portable
- 06 12 34 56 78
-
Garantie n°1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-
Garantie n°2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
- Ut enim ad minim veniam, quis nostrud xercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
Titre facultatif (p/h2/h3/h4) et picto
Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton.
- Lorem ipsum dolor
- Oui
- (Lorem ipsum dolor sit amet, consectetur adipiscing)
- Lorem ipsum dolor
- Oui
- Lorem ipsum dolor
- Ipsum dolor sit amet lorem dolor sit
- Lorem ipsum dolor
- Oui
Alerte d'avertissement
Titre facultatif (p/hx/hx/h4) et picto
Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Propriétaire :
- prénom et nom
- Téléphone :
- 01 23 45 67 89
- E-mail :
- prenom.nom-a-rallonge@moncompte-internet.com
- Propriétaire :
- prénom et nom
- Téléphone :
- 01 23 45 67 89
- E-mail :
- prenom.nom-a-rallonge@moncompte-internet.com
- Lorem ipsum dolor
- Oui
- (Lorem ipsum dolor sit amet, consectetur adipiscing)
- Lorem ipsum dolor
- Oui
- Lorem ipsum dolor
- Ipsum dolor sit amet lorem dolor sit
-->
PUG
// Example Overview
.overview
.wrapper-principal
.wrapper-title
.title
h2 Title
.buttons-group
button.chip.-icon.-icon-with-text-md(type="button")
i.maificon.maificon-cercle-triangle-icon-nav(aria-hidden="true")
span Chip button
.wrapper-content
.wrapper-primary
.zone-libre
.level-title
.title.-weight-bold.-type1
h3 LevelTitle size 18px (avec titleWeightBold)
dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right.-decoration-icon.-size-small.-color-black.-separator
.item
dt
i.maificon.maificon-rc-local-pro(aria-hidden='true')
| Lorem ipsum dolor
dd
strong 123,45 €
.item
dt
img(src=fakeimg+'/32x32/' alt='')
| Lorem ipsum dolor
dd
strong 123,45 €
.item
dt
i.maificon.maificon-canape(aria-hidden='true')
strong Tilya SUHPYC
dd
strong 1/3
dd
p né(e) me 03/01/2010 à Niort #[br] demeurant ANDRE ROUSSIN 13480, CABRIES
br/
span.text-legend à défault le(s) bénéficiaire(s) suivant(s) en cas de décès ou de renonciation :
ul.bullet-list.no-color
li #[strong Juliette PLANTIER] #[br] #[span.text-legend né(e) le 21/11/1975 à 17000, LA ROCHELLE ]
li #[strong Juliette PLANTIER] #[br] #[span.text-legend né(e) le 06/09/1965 à 79000, BESSINES ]
p à défault me(s) héritiers.
.alert.warning
p.sr-only Alerte d'avertissement
i.maificon.maificon-exclamation-round-small(aria-hidden='true')
.wrapper-content
p.title Titre facultatif (p/hx/hx/h4) et picto
.content
p Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton
.item
dt
i.maificon.maificon-ars-souplesse(aria-hidden='true')
strong Lorem ipsum dolor
dd
strong Lorem ipsum
dd Lorem ipsum dolor sit amet
dd.text-legend Lorem ipsum dolor sit amet, consectetur adipiscing elit
.item
dt
i.maificon.maificon-enveloppe-mail(aria-hidden='true')
| Adresse Email
dd
strong prenom.nompersonne@clubinternet.com
.item
dt
i.maificon.maificon-ars-placements(aria-hidden='true')
| Lorem ipsum dolor
dd
strong Lorem Ipsum dolor
.level-title
.title.-type1
h3 LevelTitle size 18px (sans gras)
dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right.-separator
.item
dt Propriétaire
dd
strong prénom et nom
.item
dt Tél. Fixe
dd
strong 05 23 45 67 89
.item
dt Tél. Portable
dd
strong 06 12 34 56 78
.separator
.collapse.-secondary
.wrapper-handler
i.maificon.maificon-aem(aria-hidden='true')
.wrapper-title
hx
button.extend-link(type="button" data-toggle="collapse" data-target="#collapse-content-secondary-3" aria-expanded="false" aria-controls="#collapse-content-secondary-3") Titre Collapse Secondary (hx/hx/h4/h5/h6/p)
span.sr-only Titre information
.collapse.wrapper-container#collapse-content-secondary-3
.wrapper-content
ul.list.-icon.-size-small.-color-black.-separator
li
i.maificon.maificon-maison(aria-hidden='true')
p Lorem Ipsum is simply
button.additional-cta(type='button')
span.sr-only Ici le texte RGAA
i.maificon.maificon-information-cercle(aria-hidden='true')
li
i.maificon.maificon-rc-local-pro(aria-hidden='true')
p Prise en charge du vol isolé d'accessoires :
button.additional-cta(type='button')
span.sr-only Ici le texte RGAA
i.maificon.maificon-information-cercle(aria-hidden='true')
ul.list.-bullet.-color-black.-icon.-size-medium
li
strong Intégrés
| (selle, batterie, roue),
li
strong fixés au vélo
| (non démontables sans outils : sacoche, remorque, GPS),
li
strong de sécurité
| (casque, antivol agréé, siège enfant).
p
strong Déclarez bien la valeur de vos biens.
li
i.maificon.maificon-enveloppe-mail(aria-hidden='true')
p Lorem Ipsum is simply dummy text of the printing industry.
button.additional-cta(type='button')
span.sr-only Ici le texte RGAA
i.maificon.maificon-information-cercle(aria-hidden='true')
.separator
.collapse.-secondary
.wrapper-handler
i.maificon.maificon-rc-local-pro(aria-hidden='true')
.wrapper-title
hx
button.extend-link(type="button" data-toggle="collapse" data-target="#collapse-content-secondary-33" aria-expanded="false" aria-controls="#collapse-content-secondary-33") Titre Collapse Secondary (hx/hx/h4/h5/h6/p)
span.sr-only Titre information
.collapse.wrapper-container#collapse-content-secondary-33
.wrapper-content
ul.list.-bullet.-color-black
li
.title
h3 Garantie n°1
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
li
.title
h3 Garantie n°2
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
li Ut enim ad minim veniam, quis nostrud xercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
.separator
.alert.-primary
i.maificon.maificon-exclamation-round-small(aria-hidden='true')
.wrapper-content
p.title Titre facultatif (p/h2/h3/h4) et picto
.content
p Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton.
.separator
ul.list.-icon.-size-small.-color-black.-separator
li
i.maificon.maificon-aem(aria-hidden='true')
p.title Lorem Ipsum
button.additional-cta(type='button')
span.sr-only Ici le texte RGAA
i.maificon.maificon-information-cercle(aria-hidden='true')
P Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
li
i.maificon.maificon-ars-placements(aria-hidden='true')
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
button.additional-cta(type='button')
span.sr-only Ici le texte RGAA
i.maificon.maificon-information-cercle(aria-hidden='true')
.wrapper-complementary
.zone-libre
dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right.-separator
.item.-small
dt Lorem ipsum dolor
dd Oui
dd (Lorem ipsum dolor sit amet, consectetur adipiscing)
.item
dt Lorem ipsum dolor
dd Oui
.item
dt Lorem ipsum dolor
dd Ipsum dolor sit amet lorem dolor sit
.separator
ul.list.-icon.-size-small.-color-black.-separator
li
i.maificon.maificon-tv(aria-hidden='true')
p.title Lorem ipsum dolor sit amet
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
li
i.maificon.maificon-tarif(aria-hidden='true')
p
strong Lorem ipsum dolor sit amett,
| (1,23 €/mois)
li
i.maificon.maificon-alerte(aria-hidden='true')
.title
h3 Lorem Ipsum
button.additional-cta(type='button')
span.sr-only Ici le texte RGAA
i.maificon.maificon-information-cercle(aria-hidden='true')
p.text-legend Lorem Ipsum is simply dummy text of the printing industry.
.separator
dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right.-separator
.item
dt Lorem ipsum dolor
dd Oui
.separator
.alert.-primary
p.sr-only Alerte d'avertissement
i.maificon.maificon-exclamation-round-small(aria-hidden='true')
.wrapper-content
p.title Titre facultatif (p/hx/hx/h4) et picto
.content
p Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton
.separator
.collapse.-secondary
.wrapper-handler
i.maificon.maificon-tv(aria-hidden='true')
.wrapper-title
hx
button.extend-link(type="button" data-toggle="collapse" data-target="#collapse-content-secondary-2" aria-expanded="false" aria-controls="#collapse-content-secondary-2") Titre Collapse Secondary (hx/hx/h4/h5/h6/p)
span.sr-only Titre information
.collapse.wrapper-container#collapse-content-secondary-2
.wrapper-content
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.separator
.collapse.-secondary
.wrapper-handler
.wrapper-title
hx
button.extend-link(type="button" data-toggle="collapse" data-target="#collapse-content-secondary-3" aria-expanded="false" aria-controls="#collapse-content-secondary-3") Titre Collapse Secondary (hx/hx/h4/h5/h6/p)
span.sr-only Titre information
.collapse.wrapper-container#collapse-content-secondary-3
.wrapper-content
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.separator
dl.definition-list-version2.-column.-column-definition-text-align-right.-column-definition-width-8.-separator
.item
dt Propriétaire :
dd
strong prénom et nom
.item
dt Téléphone :
dd
strong 01 23 45 67 89
.item
dt E-mail :
dd
strong prenom.nom-a-rallonge@moncompte-internet.com
.collapse-complementary
.wrapper-title
.title
hx
button.collapse-handler.collapsed.extend-link(type='button' data-toggle='collapse' data-target='#collapse-complementary' aria-expanded='false' aria-controls='collapse-complementary') Collapse Complementary Example
.wrapper-content.collapse(id='collapse-complementary')
.zone-libre
dl.definition-list-version2.-column.-column-definition-text-align-right.-column-definition-width-8.-separator
.item
dt Propriétaire :
dd
strong prénom et nom
.item
dt Téléphone :
dd
strong 01 23 45 67 89
.item
dt E-mail :
dd
strong prenom.nom-a-rallonge@moncompte-internet.com
.separator
ul.list.-icon.-size-small.-color-black.-separator
li
i.maificon.maificon-tv(aria-hidden='true')
p.title Lorem ipsum dolor sit amet
p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
li
i.maificon.maificon-tarif(aria-hidden='true')
p
strong Lorem ipsum dolor sit amett,
| (1,23 €/mois)
li
i.maificon.maificon-alerte(aria-hidden='true')
.title
h4 Lorem Ipsum
button.additional-cta(type='button')
span.sr-only Ici le texte RGAA
i.maificon.maificon-information-cercle(aria-hidden='true')
p.text-legend Lorem Ipsum is simply dummy text of the printing industry.
.separator
dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right.-separator
.item.-small
dt Lorem ipsum dolor
dd Oui
dd (Lorem ipsum dolor sit amet, consectetur adipiscing)
.item
dt Lorem ipsum dolor
dd Oui
.item
dt Lorem ipsum dolor
dd
strong Ipsum dolor sit amet lorem dolor sit