Composants transverses

Cette page regroupe les composants qui sont utilisés de manière transverse
(c'est à dire qu'ils peuvent être utilisés partout)

Action Omnicanal V2

RGAA ok

Le composant mod-action-omnicanal est disponibles en version 2 (Accessible).
Les différentes implémentations sont visibles sur le projet Editorial : Mod-action-omnicanal V2

Alert

RGAA ok
Alert avec une priorité par défaut

Alerte d'information

Titre facultatif (p/h2/h3/h4) et picto facultatif

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Alerte d'information

Titre facultatif (p/h2/h3/h4) et picto facultatif

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Alerte d'information

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Alerte de succès

Titre facultatif (p/h2/h3/h4) et picto

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Alerte d'avertissement

Titre facultatif (p/h2/h3/h4) et picto

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Alerte en erreur

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Alert sur fond sombre

Option d'affichage via la classe.-reverse

Alerte d'information

Titre facultatif (p/h2/h3/h4) et picto facultatif

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Échec de l'action

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Alert d'information

Titre facultatif (p/h2/h3/h4) et picto facultatif

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Alerte d'information

Titre facultatif (p/h2/h3/h4) et picto

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Alerte d'avertissement

Titre facultatif (p/h2/h3/h4) et picto

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Alerte en erreur

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Alert avec une priorité haute

Option d'affichage via la classe.-high

Succès de l'action

Titre facultatif (p/h2/h3/h4) et picto

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Attention

Titre facultatif (p/h2/h3/h4) et picto

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Échec de l'action

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Alert avec une priorité haute .-high sur fond sombre

Option d'affichage via la classe.-constrat

Succès de l'action

Titre facultatif (p/h2/h3/h4) et picto

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Attention

Titre facultatif (p/h2/h3/h4) et picto

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Échec de l'action

Nisi nisi do in ex non elit laborum incididunt ipsum elit sint.

Veniam pariatur occaecat ullamco adipisicing.

Bouton primaire
  • Proident ipsum quis laboris exercitation.
  • Ex ipsum et irure consectetur Lorem laborum officia enim cillum nisi dolor commodo fugiat.
  • Ut laboris culpa eiusmod ullamco.
  • Est Lorem est velit minim quis commodo nostrud.
  • Reprehenderit et minim officia deserunt ullamco sint occaecat aliquip ex anim.
  • Reprehenderit sint nulla ex non non aliquip exercitation nulla elit do fugiat do laboris nulla.
Bouton secondaire

Nisi nisi1 laborum incididunt ipsum elit sint.

Voir la documentation

Annotation V2

RGAA ok

Lien vers la documentation RGAA

Paragraphe comportant l'ancre 123 , qui redirige vers l'annotation.

Voir la documentation

Annotation sur fond foncé

Option d'affichage via la classe .dark

Paragraphe comportant l'ancre 1 , qui redirige vers l'annotation 1

Paragraphe comportant l'ancre 2 , qui redirige vers l'annotation 1

Voir la documentation

Plusieurs ancres reliées à une même annotation :

- 1er paragraphe comportant l'ancre 1, qui redirige vers l'annotation 1.

- 2ème paragraphe comportant l'ancre 2, qui redirige vers l'annotation 1. Le 2 devant l'annotation permet de revenir au paragraphe 2

- 3ème paragraphe comportant l'ancre 3, qui redirige vers l'annotation 1. Le 3 devant l'annotation permet de revenir au paragraphe 3

- 4ème paragraphe comportant l'ancre 4, qui est la derniere annotation qui redirige vers l'annotation 1 avec un "et" à la place d'une virgule pour le chiffre 4 devant l'annotation qui permet de revenir au paragraphe 4.

Voir la documentation

Block-list-fichier

RGAA ok
Voir la documentation

Button

RGAA ok

Le composant peut avoir 2 sémantiques :

<button>/ <a>

Liste des options visuelles :

  • .-primary / .-secondary
  • .-full-width
  • .-icon-only
  • .-incitation
  • .-disabled
  • .-reverse
  • Il est possible d'ajouter un

    <span class="sr-only"> après le contenu du bouton pour apporter du contexte (titre, éléments à modifier).

    Button -primary

    Option d'affichage via la classe .-primary

    Lien -primary
    Voir la documentation

    Button -secondary

    Option d'affichage via la classe .-secondary

    Lien -secondary
    Voir la documentation

    Button -icon-only

    Option d'affichage via la classe .-icon-only

    alt
    alt
    Voir la documentation

    Button -icon

    Lien picto
    Lien picto
    Voir la documentation

    Button -external

    Lien externalLa page s'ouvre dans un nouvel onglet
    Lien externalLa page s'ouvre dans un nouvel onglet
    Voir la documentation

    Button -incitation

    Option d'affichage via la classe .-incitation

    Lien -incitation
    Lien -incitation
    Voir la documentation

    Button -full-width

    Option d'affichage via la classe .-full-width

    Lien -full-width
    Lien -full-width
    Voir la documentation

    Button -loading

    Option d'affichage via la classe .-loading

    alt
    alt
    Voir la documentation

    Button -reverse

    Option d'affichage via la classe .-reverse

    Lien -reverse
    Lien -reverse
    Voir la documentation

    Button -disabled

    Option d'affichage via la classe .-disabled

    Lien -disabled
    Lien -disabled
    Voir la documentation

    ButtonPromote

    RGAA ok

    Le composant peut avoir 2 sémantique : <button>/ <a>

    Liste des options visuelles :

    • .-primary / .-secondary
    • .-vertical/ .-horizontal
    • .-push

    Il est possible d'ajouter un <span class="sr-only"> après le contenu du bouton pour apporter du contexte (titre, éléments à modifier).

    ButtonPromote -push

    Option d'affichage via la classe .-push

    Voir la documentation

    ButtonPromote -disabled

    Option d'affichage via la classe .-disabled

    Voir la documentation

    Card

    RGAA ok

    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.


    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.

    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.

    Voir la documentation

    ComplementaryHelp

    RGAA ok

    ComplementaryHelp -collapse

    Option d'affichage via la classe .-collapse

    Title

    Lorem ipsum
    • Lorem ipsum

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius error modi provident officiis cumque voluptates consectetur, officia obcaecati doloremque, id laudantium, nobis perspiciatis molestiae architecto commodi harum laboriosam qui. Quisquam!

    • Lorem ipsum
    • Lorem ipsum
    Lien avec icone personnalisée

    Swap Component

    Remplacez-le par un composant : paragraphe / Link / List (bullet / check / highlight)

    Voir la documentation

    ComplementaryHelp -modal

    Option d'affichage via la classe .-modal

    Voir la documentation

    ComplementaryHelp -hybride

    Option d'affichage via la classe .-hybride

    Voir la documentation

    Chip

    RGAA ok

    Le composant peut avoir 2 sémantiques : <button>/ <a>

    Liste des options visuelles :

    • .-icon
    • .-icon-with-text-md
    • .-reverse
    • .-disabled

    Il est possible d'ajouter un <span class="sr-only"> après le contenu du bouton pour apporter du contexte (titre, éléments à modifier).

    Chip

    Voir la documentation

    Chip icon texte

    Voir la documentation

    Chip -icon

    Option d'affichage via la classe .-icon

    Voir la documentation

    Chip -icon-with-text-md

    Option d'affichage via la classe .-icon.-icon-with-text-md

    Voir la documentation

    Chip -reverse

    Option d'affichage via la classe .-reverse

    Voir la documentation

    Chip -disabled

    Option d'affichage via la classe .-disabled

    Voir la documentation

    Collapse

    RGAA ok

    NB : Le CollapsePrimary est un composant qui s'utilise en sous élément d'une page alors que le CollapseSecondary s'utilise dans la zone libre d'un composant parent

    Collapse primary

    RGAA ok

    Option d'affichage .-primary


    Collapse-primary


    Content/Children

    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.


    Collapse-primary + Variant -icon


    Content/Children

    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.

    Voir la documentation

    Collapse secondary

    RGAA ok

    Option d'affichage .-secondary


    Collapse-secondary


    Content/Children

    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.


    Collapse-secondary + Variant -icon


    Content/Children

    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.

    Voir la documentation
    Voir la documentation

    CtaGroup

    RGAA ok

    Liste des variants pour obtenir les différents visuels suivants :

    • -horizontal / -vertical
    • -align-left / -align-center / -align-right
    • -reverse-order
    • -space-between

    Déclinaison avec les variants -horizontal & -align-left

    LienLien

    Exemple avec des chips:

    Déclinaison avec les variants -horizontal & -align-center

    LienLien

    Déclinaison avec les variants -horizontal & -align-right

    LienLien

    Déclinaison avec les variants -horizontal & -reverse-order

    LienLien

    Déclinaison avec le variant -vertical

    Lien

    Déclinaison avec les variants -horizontal & -space-between

    Lien
    Voir la documentation

    DefinitionList

    RGAA ok

    Certaines des déclinaisons suivantes sont cumulables entre elles:

    • -horizontal affiche la 1ère définition à la suite du terme.
    • -vertical positionne toutes les définitions en dessous de leur terme respectif.
    • -separator ajoute une bordure entre chaque item.
    • -decoration-bullet ajoute des puces à chaque item.
    • -decoration-icon permet d'ajouter des icônes de taille 24x24px avec -size-small ou de taille 32x32px avec -size-medium .
    • Il esty nécessaire d'ajouter une des 2 classes suivantes pour coloriser les puces et les icônes. Soit avec -color-black pour la couleur noire soit avec -color-red pour la couleur rouge.
    • Lorsque la classe -column est associée avec l'une des classes suivantes -column-definition-width-4, -column-definition-width-6 & -column-definition-width-8, alors ceci permet de définir la largeur en % de la 1ère définition par rapport à son terme.
      De plus il faut ajouter une des 2 classes suivantes pour l'alignement du texte (ou d'un composant), soit à gauche avec -column-definition-text-align-left , soit à droite avec -column-definition-text-align-right .
    • -light permet d'avoir une couleur plus claire sur le contenu de l'item sur lequel il est positionné.
    • -small permet d'avoir une taille réduite (14px au lieu de 16px) du contenu de l'item sur lequel il est positionné.

    -horizontal

    RGAA ok

    La 1ère définition est affichée à la suite du terme avec les classes -horizontal .

    Terme long lorem ipsum dolor sit amet lorem ipsum dolor :
    définition lorem ipsum dolor sit amet.
    Terme court :
    définition lorem ipsum dolor sit amet.

    Terme avec plusieurs définitions dans des balises dd :

    Terme avec 1 définition sous forme de liste d'éléments de définition :
    Element de définition un
    Element de définition deux
    Element de définition trois
    Voir la documentation

    -column

    RGAA ok

    3 classes sont disponibles concernant la largeur de colonne de la 1ère définition par rapport à son terme:

    • -column-definition-width-4 -> 4/12
    • -column-definition-width-6 -> 6/12
    • -column-definition-width-8 -> 8/12

    La largeur de la 1ère définition est fixée à 4/12 de son parent avec les classes .-column, .-column-definition-width-4 & .-column-definition-text-align-left :

    Terme lorem ipsum dolor sit amet lorem ipsum dolor sit amet :
    Définition lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum dolor.
    Terme lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum :
    Définition un lorem
    Définition deux lorem ipsum
    Définition trois lorem ipsum dolor sit

    Pour aligner à droite la 1ère définition des termes dans leur colonne il faut ajouter la classe .-text-align-right à la place de .-column-definition-text-align-left :

    Terme lorem ipsum dolor sit amet lorem ipsum dolor sit amet :
    Définition lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum dolor.
    Terme lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum :
    Définition un lorem
    Définition deux lorem ipsum
    Définition trois lorem ipsum dolor sit

    La largeur de la 1ère définition, au même titre que le terme, est fixée à 50% de son parent avec les classes .-column, .-column-definition-width-6 & .-column-definition-text-align-left :

    Terme lorem ipsum dolor sit amet lorem :
    Définition lorem ipsum dolor sit amet lorem ipsum dolor
    Terme lorem ipsum dolor sit amet :
    Définition un lorem ipsum dolor sit amet lorem ipsum
    Définition deux lorem ipsum dolor sit amet lorem
    Définition trois lorem ipsum dolor sit amet

    La largeur de la 1ère définition est fixée à 8/12 de son parent avec les classes .-column, .-column-definition-width-8 & .-column-definition-text-align-left :

    Terme lorem ipsum dolor sit amet :
    Définition lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum dolor
    Terme court :
    Définition un lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum dolor
    Définition deux lorem ipsum dolor sit amet lorem ipsum dolor sit amet
    Définition trois lorem ipsum dolor sit amet lorem ipsum dolor sit amet
    Voir la documentation

    -vertical

    RGAA ok

    Le terme et les définitions sont affichées les unes sous les autres avec la classe -vertical .

    Terme court :
    définition lorem ipsum dolor sit amet
    Nom :
    Nomdelapersonne De la Particule
    Prénom :
    Prénom-composeTresLong
    Email :
    nomdelaparticule.composetreslong@domaine-a-rallonge.com
    Voir la documentation

    Hybrid

    RGAA ok

    Les cas hybrides correspondent à un affichage différent des termes et des définitions en fonction des points de rupture.
    Cela peut être l'association du variant -vertical avec le variant -horizontal ou le variant -column .

    Pour un affichage vertical en Mobile et horizontal en desktop il faut ajouter les classes -vertical & -horizontal-lg.

    Terme long lorem ipsum dolor sit amet lorem ipsum dolor :
    définition lorem ipsum dolor sit amet.
    Terme court :
    définition lorem ipsum dolor sit amet.

    Exemple mobile vertical -> column-lg 4 avec les classes .-vertical .-column-lg, .-column-definition-width-4 & .-column-definition-text-align-right :

    Terme lorem ipsum dolor sit amet :
    Définition lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum dolor
    Terme court :
    Définition un lorem ipsum dolor sit amet lorem ipsum dolor sit amet ipsum dolor
    Définition deux lorem ipsum dolor sit amet lorem ipsum dolor sit amet
    Définition trois lorem ipsum dolor sit amet lorem ipsum dolor sit amet
    Voir la documentation

    -separator

    RGAA ok

    Pour séparer visuellement les items entre eux (association des termes et de leur(s) définition(s)), il est possible d'ajouter un séparateur avec la classe -separator .

    Terme lorem ipsum dolor sit amet :
    définition lorem ipsum dolor sit amet
    Nom :
    Nomdelapersonne De la Particule
    Prénom :
    Prénom-composeTresLong
    Email :
    nomdelaparticule.composeTresLong@domaine-a-rallonge.com
    N° de téléphone :
    +33(0) 6 00 00 00 00
    Nom de la banque :
    Crédit agricole des pays de loire

    Il est également possible de n'avoir les séparateurs entre chaque items qu'à partir du breakpoint LG (desktop) avec la classe .-separator-lg .

    Terme lorem ipsum dolor sit amet :
    définition lorem ipsum dolor sit amet
    Nom :
    Nomdelapersonne De la Particule
    Prénom :
    Prénom-composeTresLong
    Voir la documentation

    -decoration-bullet

    RGAA ok

    Ajout d'une puce à chaque item avec la classe -decoration-bullet .
    Elles peuvent être de couleur noir avec la classe -color-black ou rouge avec la classe -color-red .

    Ajoute une puce de couleur noire à chaque item avec les classes .-decoration-bullet & .-color-black :

    Terme lorem ipsum:
    définition lorem ipsum dolor sit amet
    Terme :
    définition un lorem ipsum
    définition deux lorem ipsum dolor sit amet
    définition trois lorem ipsum dolor sit amet lorem ipsum dolor sit amet

    Ajoute une puce de couleur noire à chaque item avec les classes .-decoration-bullet & .-color-red :

    Terme lorem ipsum:
    définition lorem ipsum dolor sit amet
    Terme :
    définition un lorem ipsum
    définition deux lorem ipsum dolor sit amet
    définition trois lorem ipsum dolor sit amet lorem ipsum dolor sit amet
    Voir la documentation

    -decoration-icon

    RGAA ok

    DefinitionList Decoration Icon Small

    Ajout d'un icône small de taille 24x24px avec les classes -decoration-icon & -size-small puis une autre classe pour lui appliquer une couleur.

    Les icônes small de couleur noire avec la classe .-color-black à rajouter.

    Terme lorem :
    Définition lorem ipsum dolor
    Terme lorem ipsum :
    Définition lorem ipsum dolor sit amet

    Les icônes small de couleur rouge avec la classe .-color-red à rajouter.

    Terme lorem :
    Définition lorem ipsum dolor
    Terme lorem ipsum :
    Définition lorem ipsum dolor sit amet

    DefinitionList Decoration Icon Medium

    Ajout d'un icône medium de taille 32x32px avec les classes -decoration-icon & -size-medium puis une autre classe pour lui appliquer une couleur.

    Les icônes medium de couleur noire avec la classe .-color-black à rajouter.

    Terme :
    définition lorem ipsum dolor sit amet
    Terme lorem ipsum :
    définition un lorem ipsum dolor sit amet.

    Les icônes medium de couleur rouge avec la classe .-color-red à rajouter.

    Terme :
    définition lorem ipsum dolor sit amet
    Terme lorem ipsum :
    définition un lorem ipsum dolor sit amet.

    DefinitionList Decoration Image

    Ajout d'une image de taille 32x32px avec les classes -decoration-icon & -size-medium.

    Terme lorem :
    définition un lorem ipsum dolor sit amet.
    Terme lorem :
    définition un lorem ipsum dolor sit amet.
    définition trois lorem ipsum dolor sit amet lorem ipsum dolor sit amet
    Voir la documentation

    -light

    RGAA ok

    Change la couleur du contenu de l'item sur lequel il est rajouté par une couleur plus claire que celle d'origine avec la classe -light .

    Terme lorem ipsum dolor sit amet :

    12 345.93 € par mois Soit 12 345,93 € par an

    Terme lorem ipsum :
    définition un lorem ipsum dolor sit amet.
    Terme lorem ipsum :
    définition un lorem ipsum dolor sit.
    Voir la documentation

    -small

    RGAA ok

    Change la taille du contenu (font-size: 14px) de l'item sur lequel il est rajouté avec la classe -small .

    Terme lorem ipsum dolor sit amet :
    définition un lorem ipsum.
    définition deux
    Terme lorem ipsum :
    définition un lorem ipsum dolor sit amet.
    Terme lorem ipsum :
    définition un lorem ipsum dolor sit.
    Voir la documentation

    EndAlert

    RGAA ok

    Information

    Titre de l'alerte de fin de parcours (H1/H2/H3/P)

    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!

    Ullamco enim id eiusmod quis non elit culpa commodo est.

    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.

    Bouton principal
    Lien capital

    Nisi nisi1 laborum incididunt ipsum elit sint.

    Information

    Titre de l'alerte de fin de parcours (H1/H2/H3/P)

    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!

    Ullamco enim id eiusmod quis non elit culpa commodo est.

    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.

    Bouton principal
    Lien capital

    Nisi nisi1 laborum incididunt ipsum elit sint.

    Information

    Titre de l'alerte de fin de parcours (H1/H2/H3/P)

    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!

    Ullamco enim id eiusmod quis non elit culpa commodo est.

    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.

    Bouton principal
    Lien capital

    Nisi nisi1 laborum incididunt ipsum elit sint.

    Succès de l'action

    Titre de l'alerte de fin de parcours (H1/H2/H3/P)

    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!

    Ullamco enim id eiusmod quis non elit culpa commodo est.

    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.

    Bouton principal
    Lien capital

    Nisi nisi1 laborum incididunt ipsum elit sint.

    Attention

    Titre de l'alerte de fin de parcours (H1/H2/H3/P)

    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!

    Ullamco enim id eiusmod quis non elit culpa commodo est.

    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.

    Bouton principal
    Lien capital

    Nisi nisi1 laborum incididunt ipsum elit sint.

    Échec de l'action

    Titre de l'alerte de fin de parcours (H1/H2/H3/P)

    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!

    Ullamco enim id eiusmod quis non elit culpa commodo est.

    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.

    Bouton principal
    Lien capital

    Nisi nisi1 laborum incididunt ipsum elit sint.

    EndAlert sur fond sombre

    Option d'affichage via la classe .-reverse

    Information

    Titre de l'alerte de fin de parcours (H1/H2/H3/P)

    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!

    Ullamco enim id eiusmod quis non elit culpa commodo est.

    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.

    Bouton principal
    Lien capital

    Nisi nisi1 laborum incididunt ipsum elit sint.

    Information

    Titre de l'alerte de fin de parcours (H1/H2/H3/P)

    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!

    Ullamco enim id eiusmod quis non elit culpa commodo est.

    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.

    Bouton principal
    Lien capital

    Nisi nisi1 laborum incididunt ipsum elit sint.

    Information

    Titre de l'alerte de fin de parcours (H1/H2/H3/P)

    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!

    Ullamco enim id eiusmod quis non elit culpa commodo est.

    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.

    Bouton principal
    Lien capital

    Nisi nisi1 laborum incididunt ipsum elit sint.

    Succès de l'action

    Titre de l'alerte de fin de parcours (H1/H2/H3/P)

    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!

    Ullamco enim id eiusmod quis non elit culpa commodo est.

    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.

    Bouton principal
    Lien capital

    Nisi nisi1 laborum incididunt ipsum elit sint.

    Attention

    Titre de l'alerte de fin de parcours (H1/H2/H3/P)

    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!

    Ullamco enim id eiusmod quis non elit culpa commodo est.

    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.

    Bouton principal
    Lien capital

    Nisi nisi1 laborum incididunt ipsum elit sint.

    Échec de l'action

    Titre de l'alerte de fin de parcours (H1/H2/H3/P)

    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!

    Ullamco enim id eiusmod quis non elit culpa commodo est.

    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.

    Bouton principal
    Lien capital

    Nisi nisi1 laborum incididunt ipsum elit sint.

    Voir la documentation

    InlineMessage

    RGAA ok

    Ullamco nulla mollit nisi excepteur elit adipisicing sit dolore.

    Qui irure reprehenderit magna adipisicing ut non.

    Voir la documentation

    LevelTitle

    RGAA ok

    Options d'affichage : -type1 -type2 -type3 -weight-regular -weight-medium -weight-bold . Par défaut -type2 -weight-bold

    Title 18px [H2,H3,H4,H5,H6,P]

    Title 20px [H2,H3,H4,H5,H6,P]

    Title 24px [H2,H3,H4,H5,H6,P]

    Title Regular [H2,H3,H4,H5,H6,P]

    Title Medium [H2,H3,H4,H5,H6,P]

    Title Bold [H2,H3,H4,H5,H6,P]

    Options d'affichage de Level Subtitle: -type1 -type2 -type3 . Utilisable seulement pour la variante "bold" de LevelTitle. Par défaut -type2

    Title Medium Avec Span subtitle [H2,H3,H4,H5,H6,P]Subtitle [H3,H4,H5,H6,P]

    Title Medium Avec subtitle [H2,H3,H4,H5,H6,P]

    Subtitle [H3,H4,H5,H6,P]

    Title Small Avec subtitle [H2,H3,H4,H5,H6,P]

    Subtitle [H3,H4,H5,H6,P]

    Title Medium Avec subtitle [H2,H3,H4,H5,H6,P]

    Subtitle [H3,H4,H5,H6,P]

    Voir la documentation

    Option d'affichage via la classe .-back

    Lien retour
    Lien retour (avec role bouton)
    Lien retour
    Voir la documentation

    List

    RGAA ok

    List -bullet

    Option d'affichage via la classe .-bullet

    • Choix 1
      • Sous liste item1
      • Sous liste item2
    • Choix 2
      • Sous liste item1
      • Sous liste item2
    • Choix 1
    • Choix 2

    • Choix 1

    • Choix 2


    • Choix 1 avec modale

      Text content

    • Choix 2 avec annotation1

      Text content


    List Bullet Black :

    • Choix 1
    • Choix 2
    Voir la documentation

    List -check

    Option d'affichage via la classe .-check

    • Choix 1
      • Sous liste item1
      • Sous liste item2
    • Choix 2
      • Sous liste item1
      • Sous liste item2

    • Choix 1

    • Choix 2


    • Choix 1

      Text content

    • Choix 2

      1

      Text content

    Voir la documentation

    List -highlight

    Option d'affichage via la classe .-highlight

    • Choix 1
      • Sous liste item1
      • Sous liste item2
    • Choix 2
      • Sous liste item1
      • Sous liste item2

    • Choix 1

    • Choix 2


    • Choix 1

      Text content

    • Choix 2

      1

      Text content

    Voir la documentation

    List -number

    Option d'affichage via la classe .-number

    1. Choix 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      • Choix 1
      • Choix 2
      • Choix 3
        • Choix 1
        • Choix 2
      • Choix 4
    2. Choix 2
      • Sous liste item1
      • Sous liste item2
    1. Choix 1
    2. Choix 2
    3. Choix 3
    4. Choix 4
    5. Choix 5
    6. Choix 6
    7. Choix 7

    8. Choix 8

    9. Choix 9

      1

      Text content

    10. Choix 10

      Text content

    Voir la documentation

    List -icon

    Option d'affichage via la classe .-icon

    • Choix 11

      • Sous liste item1
      • Sous liste item2
    • Choix 2

      Lorem ipsum dolor sit amet, consectetur adipiscing.

      • Sous liste item1
      • Sous liste item22
    • Choix 3

      Lorem ipsum dolor sit amet, consectetur adipiscing.


    List Icon Black :

    • Lorem ipsum dolor sit amet, consectetur adipiscing.

    • Lorem ipsum dolor sit amet, consectetur adipiscing.


    List Icon Severity :

    • Choix 1

      Lorem ipsum dolor sit amet, consectetur adipiscing.

    • Lorem ipsum dolor sit amet, consectetur adipiscing.

    • Lorem ipsum dolor sit amet, consectetur adipiscing.

    • Lorem ipsum dolor sit amet, consectetur adipiscing.


    List Icon Small :

    • Lorem ipsum dolor sit amet, consectetur adipiscing.

    • Lorem ipsum dolor sit amet, consectetur adipiscing.

    • Lorem ipsum dolor sit amet, consectetur adipiscing.

    • Lorem ipsum dolor sit amet, consectetur adipiscing.

    Voir la documentation

    List -unstyled

    List Unstyled (Exemple Links) :

    Pour des assemblages différents de l'exemple de lien présenté ci-dessous (ex: .link.-highlight-icon avec taille de fichier), se référer à la documentation sur le composant Lien.

    Voir la documentation

    List -separator

    List avec variant .-separator :

    Permet de séparer les éléments de la liste avec une bordure en dessous de chaque li à l'exception du dernier élément de la liste.

    Liste avec le variant .-separator .

    • Liste item1
    • Liste item2
    • Liste item3
    • Liste item4

    Liste et sous-liste avec chacune un variant .-separator .
    Le variant .-separator peut également être appliqué à la sous-liste mais il est facultatif.

    • Liste item1
    • Liste item2
      • Sous liste item1
      • Sous liste item2
      • Sous liste item3
    • Liste item3

    Liste avec un variant .-separator contenant des collapse secondary.

    • FieldSection Primary Content/Children

      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.

    • FieldSection Primary Content/Children

      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.

    • FieldSection Primary Content/Children

      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.

    Voir la documentation

    InlineMessage

    RGAA ok

    Ullamco nulla mollit nisi excepteur elit adipisicing sit dolore.

    Qui irure reprehenderit magna adipisicing ut non.

    Voir la documentation

    Le composant Modal est une fenêtre qui s’affiche par dessus le contenu principal et nécessite l’intervention de l’utilisateur.

    Modal par défaut (variant md)
    Modal variant lg
    Modal variant sm
    Modal variant bottom-sheet

    Le variant bottom-sheet est disponible uniquement pour les écrans de taille sm et inférieure. Il permet d'afficher une fenêtre modale en bas de l'écran, souvent utilisée pour des actions rapides ou des informations complémentaires. Sur une fenêtre de taille md et supérieure, le comportement est similaire à celui du variant md par defaut, ou lg ou sm si défini. Pour voir la modale en variant bottom-sheet, ouvrez la modale plus bas en reduisant la fenêtre de votre navigateur.

    Voir la documentation

    Ouverture d'une modale

    Voir la documentation

    Définition-modal

    dans ce cas, vous aurez un car nous vous indemnisons vos dommages.

    Action-modal

    RGAA ok

    La classe action-modal est utilisée sur une balise <button> pour ouvrir une modal:

    • via du texte ayant un rendu visuel identique au composant lien simple :
    • via un pictogramme seul :

    Dans le cas d'un pictogramme, sa taille reprend celle du texte (1rem) lorsqu'il fait entre 16px et 24px. Au-delà il passe à 1.3rem

    HTML

    Modal Inline HTML


    Modal Inline HTML NoClosable


    Modal Inline JS


    Modal Inline JS NoClosable


    PUG

    Modal Inline HTML

    button(data-toggle='modal', data-target='#modal-inline-1') Modal Inline HTML
    #modal-inline-1.modal.fade(tabindex='-1', role='dialog', aria-hidden='true' aria-modal='true')
      .modal-dialog
        .modal-content
          .modal-header
            #wcbheader.modal-title 
              h1 Titre modal Inline exemple (h1/h2/h3/h4)
            button.close(type='button', data-dismiss='modal', aria-label='Fermer')
              i.maificon.maificon-cross(aria-hidden='true')
              span.sr-only Fermer la pop-up
            
          .modal-body
            p Contenu modal Inline exemple

    Modal Inline HTML NoClosable

    button(data-toggle='modal' data-target='#modal-inline-2' data-closable='false') Modal Inline HTML NoClosable
    #modal-inline-2.modal.fade(tabindex='-1' role='dialog' aria-hidden='true' data-backdrop='static' data-keyboard='false')
      Contenu de la modal

    Modal Inline JS

    button(onclick='modal.openModal({type:"inline",target:"#modal-inline-3"})') Modal Inline JS
    #modal-inline-3.modal.fade(tabindex='-1' role='dialog' aria-hidden='true')
      Contenu de la modal

    Modal Inline JS NoClosable

    button(onclick='modal.openModal({type:"inline",target:"#modal-inline-4",closable:false})') Modal Inline JS NoClosable
    #modal-inline-4.modal.fade(tabindex='-1' role='dialog' aria-hidden='true' data-backdrop='static' data-keyboard='false')
      Contenu de la modal

    Le contenu de la modal est chargé à partir d'une url qu'il convient de mettre dans l'attribut "href" du lien d'ouverture de la modal.

    1. Modal AJAX HTML (deprecated)
    2. Modal AJAX HTML NoClosable (deprecated)

    HTML

    Modal AJAX HTML


    Modal AJAX HTML NoClosable


    Modal AJAX JS


    Modal AJAX JS NoClosable


    PUG

    Modal AJAX HTML

    a(href='../composants/modal/modal-ajax-example.html' data-toggle='modal') Modal AJAX HTML

    Modal AJAX HTML NoClosable

    a(href='../composants/modal/modal-ajax-example.html' data-toggle='modal' data-closable='false') Modal AJAX HTML NoClosable

    Modal AJAX JS

    a(href='javascript:modal.openModal({url:"../composants/modal/modal-ajax-example.html"})') Modal AJAX JS

    Modal AJAX JS NoClosable

    a(href='javascript:modal.openModal({url:"../composants/modal/modal-ajax-example.html", closable:false})') Modal AJAX JS NoClosable

    Push

    RGAA ok

    Push no-media

    RGAA ok

    Push sans image

    Suptitle

    Title bold

    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.

    Lorem ipsum, dolor sit amet consectetur adipisicing elit.

    Voir la documentation

    Push style

    RGAA ok

    -title-size-large -neutral

    Title bold

    Swap Component

    Lorem ipsum

    -title-size-large -border

    Title bold

    Swap Component

    Lorem ipsum

    -title-size-large -bg-8

    Title bold

    Swap Component

    Lorem ipsum

    -title-size-large -bg-9

    Title bold

    Swap Component

    Lorem ipsum

    -title-size-large -bg-10

    Title bold

    Swap Component

    Lorem ipsum

    -title-size-large -bg-11

    Title bold

    Swap Component

    Lorem ipsum

    -title-size-large -bg-12

    Title bold

    Swap Component

    Lorem ipsum

    -title-size-large -bg-13

    Title bold

    Swap Component

    Lorem ipsum

    Voir la documentation

    Push custom-head

    RGAA ok

    -neutral -title-size-medium

    Title bold 20px

    Swap Component

    -neutral -title-size-large

    Title bold 24px

    Swap Component

    -neutral -title-size-large -suptitle-color-title-1

    Suptitle

    Title bold

    Swap Component

    -neutral -title-size-large -suptitle-color-title-1-64

    Suptitle

    Title bold

    Swap Component

    -neutral -title-size-large -suptitle-color-title-3

    Suptitle

    Title bold

    Swap Component

    Voir la documentation

    Push -horizontal

    RGAA ok

    -neutral -suptitle-color-title-3 -title-size-large -horizontal -horizontal-image-position-left -horizontal-image-align-top

    Suptitle

    Title bold

    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.

    -neutral -suptitle-color-title-3 -title-size-large -horizontal -horizontal-image-position-right -horizontal-image-align-top

    Suptitle

    Title bold

    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.

    -neutral -suptitle-color-title-3 -title-size-large -horizontal -horizontal-image-position-left -horizontal-image-align-center

    Suptitle

    Title bold

    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.

    -neutral -suptitle-color-title-3 -title-size-large -horizontal -horizontal-image-position-right -horizontal-image-align-center

    Suptitle

    Title bold

    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.

    -neutral -suptitle-color-title-3 -title-size-large -horizontal -horizontal-image-position-left -horizontal-image-align-top -image-no-margin

    Suptitle

    Title bold

    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.

    -neutral -suptitle-color-title-3 -title-size-large -horizontal -horizontal-image-position-right -horizontal-image-align-top -image-no-margin

    Suptitle

    Title bold

    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.

    Voir la documentation

    Push -vertical

    RGAA ok

    -neutral -suptitle-color-title-3 -title-size-large -vertical

    Suptitle

    Title bold

    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.

    Lorem ipsum, dolor sit amet consectetur adipisicing elit.

    -neutral -suptitle-color-title-3 -title-size-large -vertical -image-no-margin

    Suptitle

    Title bold

    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.

    Voir la documentation

    Push -horizontal-540

    RGAA ok

    Option d'affichage via la classe .-vertical.-horizontal-540

    Dans cet exemple il y a 2 images.

    -neutral -suptitle-color-title-3 -title-size-large -vertical -horizontal-540 -horizontal-image-position-left -horizontal-image-align-top -image-no-margin

    Suptitle

    Title bold

    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.

    -neutral -suptitle-color-title-3 -title-size-large -vertical -horizontal-540 -horizontal-image-position-right -horizontal-image-align-top

    Suptitle

    Title bold

    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.

    Voir la documentation

    Séparateur


    Voir la documentation

    Subject

    RGAA ok

    Le composant subject correspond à la version 3 de l'ancien composant Sujet.

    La partie principale du composant est composé du header contenant l'image et le titre.
    Les éléments suivants sont facultatifs:

    • sous-titre
    • zone-libre
    • zone-complementary
    • wrapperButton
    • tag

    Certaines des déclinaisons suivantes sont cumulables entre elles :

    • -disabled / -devis / -highlight / -incitation
    • -horizontal / -horizontal-md / -vertical

    Position

    RGAA ok

    Il est obligatoire d'avoir au moins une des classes suivantes de renseignée pour que l'affichage du composant soit correct :

    • -vertical
    • -horizontal
    • -horizontal-md

    Option d'affichage : -vertical .

    Title

    SubTitle

    Option d'affichage : .-horizontal .

    Title

    SubTitle

    Option d'affichage : -vertical + -horizontal-md .

    Title

    SubTitle

    Voir la documentation

    Structure

    RGAA ok

    Subject avec zone libre. Le separateur est optionnel.

    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.

    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

    Voir la documentation

    -disabled

    RGAA ok

    Option d'affichage via la classe -disabled .

    Title

    SubTitle

    Voir la documentation

    -highlight

    RGAA ok

    Option d'affichage via la classe -highlight .

    Title

    SubTitle

    Voir la documentation

    -incitation

    RGAA ok

    Option d'affichage via la classe -incitation .

    SubTitle

    Voir la documentation

    -devis

    RGAA ok

    Variant spécifique -devis (avec 1 bordure en pointillée + 1 tag -secondary) obtenu avec les classes -devis , -vertical & -horizontal-md .

    3 Devis en attenteTexte rgaa

    Voir la documentation

    Tag

    RGAA ok

    Le picto est facultatif :

    Liste des options visuelles :

    • .-primary / .-secondary/ .-reverse
    • .success / .error/ .warning

    Tag (-primary / -primary.-reverse)

    TagTexte rgaa

    TagTexte rgaa

    TagTexte rgaa

    TagTexte rgaa

    Tag (-secondary / -secondary.-reverse)

    TagTexte rgaa

    TagTexte rgaa

    Tag (success / error / warning)

    TagTexte rgaa

    TagTexte rgaa

    TagTexte rgaa

    TagTexte rgaa

    TagTexte rgaa

    TagTexte rgaa

    Voir la documentation

    Tableau Simple V2

    RGAA ok
    Les scénarios en détail
    Catégorie 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032
    Meilleur scénario. Exemple de cellule avec un contenu long. 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 €
    Scénario réaliste 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 €
    Versements cumulés 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 €
    Pire scénario 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 €

    Avec la classe .-vertical-top

    Les scénarios en détail
    Catégorie 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032
    Meilleur scénario. Exemple de cellule avec un contenu long. 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 €
    Scénario réaliste 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 €
    Versements cumulés 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 €
    Pire scénario 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 € 1522 €
    Voir la documentation

    Tarif

    RGAA ok

    Liste des options visuelles :

    • .-size-small / .-size-medium/ .-size-large
    • .-text-align-left / .-text-align-center/ .-text-align-right
    • .-reverse

    Deux structure HTML possible :

    • Avec une balise sémantique <p>
    • Avec une balise sans sémantique <span> exemple d'usage si le tarif est dans un <label>

    Tarif large

    RGAA ok

    Tarif :

    12 345.93 €

    Tarif sans décimale :

    12 345 €

    Tarif + complément période lvl 1 (annotation facultative) :

    12 345.93 € par mois 1

    Tarif + complément période lvl 1 et 2 (full) (structure span) :

    12 345.93 € par mois Soit 12 345,93 € par an
    12 345.93 € par mois Soit 12 345,93 € par an
    12 345.93 € par mois Soit 12 345,93 € par an

    Tarif + annotations possibles :

    12 345.93 € par mois 1 Soit 12 345,93 € par an 2



    12 345.93 € 1 Soit 12 345,93 € par an



    12 345.93 € 1



    12 345 € 1



    12 345.93 € 1 Soit 12 345,93 € par an 2



    12 345.93 € par mois 1 Soit 12 345,93 € par an 2

    Tarif + complément période lvl 1 et 2 (full) + reverse :

    12 345.93 € par mois 1 Soit 12 345,93 € par an 2


    12 345.93 € par mois 1 Soit 12 345,93 € par an 2


    12 345.93 € par mois 1 Soit 12 345,93 € par an 2

    Voir la documentation

    Tarif medium

    RGAA ok

    Tarif -size-medium :

    12 345.93 €

    Tarif medium + complément période lvl 1 (annotation facultative) :

    12 345.93 € par mois 1

    Tarif medium + complément période lvl 1 et 2 (full) :

    12 345.93 € par mois Soit 12 345,93 € par an



    12 345.93 € par mois Soit 12 345,93 € par an

    12 345.93 € par mois Soit 12 345,93 € par an

    Tarif medium + annotations possibles :

    12 345.93 € par mois 1 Soit 12 345,93 € par an 2



    12 345.93 € 1



    12 345 € 1

    12 345.93 € 1 Soit 12 345,93 € par an



    12 345.93 € par mois 1 Soit 12 345,93 € par an 2

    Tarif medium + complément période lvl 1 et 2 (full) + reverse :

    12 345.93 € par mois 1 Soit 12 345,93 € par an 2


    12 345.93 € par mois 1 Soit 12 345,93 € par an 2


    12 345.93 € par mois 1 Soit 12 345,93 € par an 2

    Voir la documentation

    Tarif small -neutral

    RGAA ok

    Le tarif small avec le variant -neutral permet d'hériter de la taille de la police de caractères de l'élément parent.

    Tarif -size-small -neutral :

    12 345.93 €

    Tarif small + complément période lvl 1 (annotation facultative) :

    12 345.93 € par mois 1

    Tarif small + complément période lvl 1 et 2 (full) :

    12 345.93 € par mois Soit 12 345,93 € par an



    12 345.93 € par mois Soit 12 345,93 € par an

    12 345.93 € par mois Soit 12 345,93 € par an

    Tarif small + annotations possibles :

    12 345.93 € par mois 1 Soit 12 345,93 € par an 2



    12 345.93 € 1



    12 345 € 1

    12 345.93 € 1 Soit 12 345,93 € par an



    12 345.93 € par mois 1 Soit 12 345,93 € par an 2

    Tarif small + complément période lvl 1 et 2 (full) + reverse :

    12 345.93 € par mois 1 Soit 12 345,93 € par an 2


    12 345.93 € par mois 1 Soit 12 345,93 € par an 2


    12 345.93 € par mois 1 Soit 12 345,93 € par an 2

    Voir la documentation

    Tarif small -highlight

    RGAA ok

    Le Tarif small avec le variant -highlight permet d'hériter de la taille de la police de caractères de l'élément parent et d'avoir la 1ère ligne du tarif en gras.

    12 345.93 € par mois 1 Soit 12 345,93 € par an 2

    12 345.93 € par mois 1 Soit 12 345,93 € par an 2

    Voir la documentation

    Titre

    Titre de type 1
    Titre de type 2
    Titre de type 3
    Titre de type 4
    Titre de type 5
    Titre de type 6
    Titre de type 7
    Titre de type 8
    Titre de type 9
    Titre de type 10

    Titre de type Edito 1
    Titre de type Edito 2
    Titre de type Edito 3

    Explication sur la structure HTML :

    • .style correspond à .heading.type1
    • hx correspond à h1

    Avec <hx>

    Avec <p role="heading">

    Paragraphe stylisé comme un titre

    Voir la documentation