Guide d'utilisation des différents éléments graphiques

Vous trouverez sur cette page les cas dans lesquels utiliser les différents éléments graphiques mis à votre disposition.
Le respect de ces règles permet d'avoir des pages harmonieuses les unes par rapport aux autres, et garantir une bonne expérience pour l'utilisateur.

Utilisation des titres

L'utilisation des titres Hx viennent hiérarchiser le contenu de vos pages et améliore le référencement de celles-ci.

Le titre H1, utilisé qu'une seule fois dans une page, est déjà présent dans vos pages de manière native lorsque vous créez vos pages en BO.

Pour les Hx suivants, voici les règles à suivre :

• Il est recommandé de ne pas sauter de niveau si ils n'ont pas la même importance. C'est à dire qu'après un h2, suit forcément un h3, puis un h4, un h5, et pour finir un h6.

Par exemple :

Titre H2

Titre H3

Titre H4

Titre H5

Titre H6

• Vous pouvez utiliser plusieurs fois le même Hx si ils ont le même niveau d'importance. Vous pouvez utiliser plusieurs H2 dans une page ou bien plusieurs H3 sous un H2.

Par exemple :

Titre H2

Titre H2

Titre H3

Titre H3

Titre H2

---

Utilisation des styles pour les textes

Regular : style principal du contenu texte

Gras : pour mettre l'accent sur du contenu important

Italique : uniquement pour des citations dans les textes

---

Utilisation des listes

Si vous avez besoin de faire des listes (ordonnées comme désordonnées). Il est obligatoire d'utiliser le module liste présent sur votre RTE.

• Lorem ipsum dolor sit amet consectetur.
• Vestibulum gravida viverra praesent et.
• Non lectus fermentum sed varius placerat cursus aliquam ullamcorper bibendum.

1. Lorem ipsum dolor sit amet consectetur.
2. Vestibulum gravida viverra praesent et.
3. Non lectus fermentum sed varius placerat cursus aliquam ullamcorper bibendum.

---

Utilisation des images

En terme de style d'image, nous utiliserons uniquement des photos (type d'image validé en atelier Quick wins). Celles-ci prendront la largeur totale de la zone dont elles appartiennent, pensez donc à la qualité de vos photos.

Pour le style des photos, référez vous à la charte graphique. Veuillez contacter Steve pour récupérer le brandbook.

---

Utilisation des boutons

Vous trouverez ci-dessous les règles d'utilisation des boutons. Tous les boutons peuvent s'accompagner ou non d'une icone (non obligatoire).

Boutons primaires

Les boutons primaires suggèrent une action principale.

• Bouton vert : le plus fréquent. Utilisé pour mettre en avant l'action à réaliser par l'utilisateur
• Bouton bleu : utilisé pour mettre en avant UNE action par rapport aux autres actions à réaliser sur la page.

Il est possible d'utiliser 2 boutons primaires (maximum) l'une à côté de l'autre si les actions proposées ont la même importance.

Bouton vert Bouton bleu

Exemple :

Découvrir nos solutions santé Découvrir nos solutions prévoyance

Boutons secondaires (avec bordures)

Les boutons avec bordures sont des boutons de type "secondaire". Ils sont utilisés lorsque l'action est moins importante que l'action principale. Ils peuvent vivre seuls (dans une page, une section, un bloc) mais il peuvent également accompagner un bouton plein qui définit l'action principale

• Bouton vert (avec bordure) : Il peut accompagner le bouton primaire vert, s'il y a deux boutons l'un à coté de l'autre afin de mettre en avant l'action principale en bouton primaire vert
• Bouton bleu (avec bordure) :  Il peut accompagner le bouton primaire bleu, s'il y a deux boutons l'un à coté de l'autre afin de mettre en avant l'action principale en bouton primaire bleu
• Lien (avec bordures) : Utilisé seul pour des actions non importantes. Il ne peut pas accompagner les boutons primaires et secondaires.

Bouton vert (avec bordure) Bouton bleu (avec bordure) Boutons liens (avec bordure)

Exemple :

Demander un devis Voir le tableau de garantie

Boutons tertiaires

Les boutons tertiaires servent pour des actions alternatives ou contextuelles.

Lien

Exemple :

Envoyer la demande Reprendre plus tard Annuler

---

Utilisation des icônes dans les boutons et liens

Pour utiliser les icônes dans les boutons et liens :

• Copiez la class de l'icône
• Collez la class dans le champ "icône"
• Choisissez ensuite la position de l'icône dans le champs "Position de l'icône". Par défaut, si le champs a été renseigné et qu'aucune position n'a été défini, elle sera automatiquement positionné à gauche.

Liste d'icône à utiliser

Vous trouverez ci-dessous la liste des icônes que vous avez la possibilité d'utiliser pour les boutons.

Si le besoin d'avoir d'autres icônes est exprimé, veuillez contacter Pierre ou Charlotte.

Utilisateur Building Ampoule Exclamation Loupe Contrat Santé Prévoyance

Icone	Nom à saisir	Cas d'usage
Utilisateur	fa-regular fa-user	Espace client, aides sociales
Building	fa-regular fa-building	Entreprise
Ampoule	fa-regular fa-lightbulb	Bon à savoir
Exclamation	fa-regular fa-circle-exclamation	Important
Loupe	fa-regular fa-magnifying-glass	Recherche d'informations
Document	fa-regular fa-file	Contrat (au sens administratif)
Coeur	fa-regular fa-heart	Contrat Santé
Parapluie	fa-regular fa-umbrella	Contrat Prévoyance

---

Utilisation des accordéons

À utiliser si vous avez au minimum 3 contenus à pousser les uns à la suite des autres mais qui ne demandent pas d'être lisible tout de suite.

---

Utilisation des encadrés

Vous avez la possibilité de faire des encadrés gris ou blanc :

• Les encadrés gris sont à utiliser pour mettre en avant du contenu comme par exemple les "Bon à savoir".
• Les encadrés blancs sont à utiliser pour structurer vos pages. Vous pouvez vous aider des grilles pour avoir 2 ou 3 encadrés les uns à côté des autres.

Les blocs encadrés vous offrent la possibilité d'alimenter votre contenu avec :

• Un titre du h2 au h6 selon la hiérarchie de votre page (obligatoire)
• Une icône qui accompagne ce titre (facultatif)
• Du contenu texte (obligatoire)
• Un média type photo/image (facultatif)
• Un logo (facultatif)
• Un bouton avec les règles d'utilisation ci-dessus (facultatif)

Utilisation de plusieurs encadrés

Si vous utilisez des blocs encadrés (les uns à côté des autres ou véhiculant la même idée), il faut toujours appliquer le même style pour tous les blocs encadrés.

Titre bloc encadré

Lorem ipsum dolor sit amet consectetur. Vestibulum gravida viverra praesent et. Non lectus fermentum sed varius placerat cursus aliquam ullamcorper bibendum.

Bouton

Titre bloc encadré

Lorem ipsum dolor sit amet consectetur. Vestibulum gravida viverra praesent et. Non lectus fermentum sed varius placerat cursus aliquam ullamcorper bibendum.

Bouton

Modèle de bloc encadré

Voici des modèles que vous pouvez réutiliser dans la colonne principale.

Attention, le niveau de titre est à déterminer en fonction de la hiérarchisation de votre page.

---

Utilisation du bloc vidéo

Une vidéo doit toujours être accompagnée de sa transcription textuelle.

---

Utilisation bloc citation

---

Utilisation des chiffres clés

Sur la colonne principale, vous avez la possibilité d'ajouter autant de chiffres clés (1 bloc comme 9 blocs) que vous souhaitez. Toutefois le gabarit s'adapte sur une grille de 4 maximum.

En terme de style, il y a plusieurs possibilité :

• L'application d'un texte court (type mot-clé ou chiffre) ou d'un picto
• L'alignement des textes à appliquer dépend du contenu. Le style est appliqué sur l'ensemble de la section.
  • Si texte court : centré
  • Si texte long : aligné à gauche

Textes alignés à gauche sur 2 colonnes

• +50% Lorem ipsum dolor sit amet consectetur. Vestibulum gravida viverra praesent et. Non lectus fermentum sed varius placerat cursus aliquam ullamcorper bibendum.
• Lorem ipsum dolor sit amet consectetur. Vestibulum gravida viverra praesent et. Non lectus fermentum sed varius placerat cursus aliquam ullamcorper bibendum.

Textes centrés sur 4 colonnes

• Lorem ipsum dolor sit amet user
• +50% Lorem ipsum dolor sit amet
• Lorem ipsum dolor sit amet
• +50% Lorem ipsum dolor sit amet

---

Utilisation des tableaux

Pour utiliser des tableaux, vous avez la possibilité d'y appliquer des entêtes (uniquement 1^ère ligne ou 1^ère colonne) à la place d'y appliquer un style "gras" :

1. Tableau avec entête sur les cellules colonnes
2. Tableau avec entête sur les cellules en lignes
3. Tableau sans entête

Tableau 1

Tableau 2

Tableau 3

---

Utilisation des liens utiles / Ressources

Le bloc Liens utiles peut être utilisé en colonne principale pour enrichir une page si vous avez peu de contenu.