Guide des paragraphs

Guide de style

Choisissez votre dommage

Boutons

S'ajuste selon le thème (fond)

class="button button-primary button-small has-icon icon--{ICON_SLUG}"

Primary small

class="button button-primary button-small"

Primary small

class="button button-primary button-large has-icon icon--{ICON_SLUG}"

Primary large

class="button button-primary button-large"

Primary large

class="button button-primary button-large" disabled

Primary large disabled

class="button button-primary button-large has-focus"

Primary large focus

class="button button-secondary button-small has-icon icon--{ICON_SLUG}"

Secondary small

class="button button-secondary button-small"

Secondary small

class="button button-secondary button-large has-icon icon--{ICON_SLUG}"

Secondary large

class="button button-secondary button-large"

Secondary large

class="button button-secondary button-large" disabled

Secondary large disabled

class="button button-secondary button-large has-focus"

Secondary large focus

class="button button-tertiaire button-xsmall"

Tertiaire x-small

class="button button-tertiaire button-small"

Tertiaire small

class="button button-tertiaire button-large"

Tertiaire large

class="button button-tertiaire button-xsmall has-icon--end is-loading"

Tertiaire x-small loading

class="button button-primary button-small has-icon icon--{ICON_SLUG}"

Primary small

class="button button-primary button-small"

Primary small

class="button button-primary button-large has-icon icon--{ICON_SLUG}"

Primary large

class="button button-primary button-large"

Primary large

class="button button-primary button-large" disabled

Primary large disabled

class="button button-primary button-large has-focus"

Primary large focus

class="button button-secondary button-small has-icon icon--{ICON_SLUG}"

Secondary small

class="button button-secondary button-small"

Secondary small

class="button button-secondary button-large has-icon icon--{ICON_SLUG}"

Secondary large

class="button button-secondary button-large"

Secondary large

class="button button-secondary button-large" disabled

Secondary large disabled

class="button button-secondary button-large has-focus"

Secondary large focus

Couleurs

Thèmes

Blue

Bouton

Normal WYSIWYG

Titre 1 WYSIWYG

Titre 2 WYSIWYG

Titre 3 WYSIWYG

Titre 4 WYSIWYG

Titre 5 WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  1. Liste WYSIWYG
  2. Liste WYSIWYG
  3. Liste WYSIWYG
Liste de liens

Greige

Bouton

Normal WYSIWYG

Titre 1 WYSIWYG

Titre 2 WYSIWYG

Titre 3 WYSIWYG

Titre 4 WYSIWYG

Titre 5 WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  1. Liste WYSIWYG
  2. Liste WYSIWYG
  3. Liste WYSIWYG

Greige (old)

Gerige (old) est un ancien style et ne devrait plus être utilisé!

Greige 925

Bouton

Normal WYSIWYG

Titre 1 WYSIWYG

Titre 2 WYSIWYG

Titre 3 WYSIWYG

Titre 4 WYSIWYG

Titre 5 WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  1. Liste WYSIWYG
  2. Liste WYSIWYG
  3. Liste WYSIWYG

Pink

Bouton

Normal WYSIWYG

Titre 1 WYSIWYG

Titre 2 WYSIWYG

Titre 3 WYSIWYG

Titre 4 WYSIWYG

Titre 5 WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  1. Liste WYSIWYG
  2. Liste WYSIWYG
  3. Liste WYSIWYG

Purple 200

Bouton

Normal WYSIWYG

Titre 1 WYSIWYG

Titre 2 WYSIWYG

Titre 3 WYSIWYG

Titre 4 WYSIWYG

Titre 5 WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  1. Liste WYSIWYG
  2. Liste WYSIWYG
  3. Liste WYSIWYG

Purple

Bouton

Normal WYSIWYG

Titre 1 WYSIWYG

Titre 2 WYSIWYG

Titre 3 WYSIWYG

Titre 4 WYSIWYG

Titre 5 WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  1. Liste WYSIWYG
  2. Liste WYSIWYG
  3. Liste WYSIWYG

Purple 925

Bouton

Normal WYSIWYG

Titre 1 WYSIWYG

Titre 2 WYSIWYG

Titre 3 WYSIWYG

Titre 4 WYSIWYG

Titre 5 WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  1. Liste WYSIWYG
  2. Liste WYSIWYG
  3. Liste WYSIWYG

White

Bouton

Normal WYSIWYG

Titre 1 WYSIWYG

Titre 2 WYSIWYG

Titre 3 WYSIWYG

Titre 4 WYSIWYG

Titre 5 WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  1. Liste WYSIWYG
  2. Liste WYSIWYG
  3. Liste WYSIWYG

Yellow

Bouton

Normal WYSIWYG

Titre 1 WYSIWYG

Titre 2 WYSIWYG

Titre 3 WYSIWYG

Titre 4 WYSIWYG

Titre 5 WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  • Liste WYSIWYG
  1. Liste WYSIWYG
  2. Liste WYSIWYG
  3. Liste WYSIWYG
 
Auto
class="icon--car"
 
Clavardage
class="icon--chat"
 
Maison
class="icon--home"
 
Cadenas
class="icon--lock"
 
Premiers soins
class="icon--firstaid"
 
Graphique
class="icon--chart"
 
Lunette
class="icon--glasses"
 
Maison et auto
class="icon--homeandcar"
 
Utilisateur
class="icon--user"
 
Groupe
class="icon--group"
 
Avion
class="icon--plane"
 
Enveloppe
class="icon--envelop"
 
Feuille
class="icon--sheet"
 
Sablier
class="icon--hourglass"
 
Lunette
class="icon--glasses"
 
Dent
class="icon--tooth"
 
Famille
class="icon--family"
 
Patrimoine
class="icon--patrimony"
 
Coeur +
class="icon--heartplus"
 
Coeur
class="icon--heart"
 
Feuille et crayon
class="icon--sheetpencil"
 
Loupe
class="icon--magnifier"
 
Exclamation
class="icon--exclamationbubble"
 
Avertissement
class="icon--notice"
 
Conversation
class="icon--conversation"
 
Répertoire
class="icon--folder"
 
Bâteau
class="icon--boat"
 
Moto
class="icon--moto"
 
Motoneige
class="icon--snowmobile"
 
VTT
class="icon--vtt"
 
VR
class="icon--vr"
 
Roulotte
class="icon--fifthwheel"
 
Maison mobile
class="icon--mobilehome"
 
Tente roulotte
class="icon--camper"
 
Chalet
class="icon--cottage"
 
Building
class="icon--building"
 
Multiplex
class="icon--multiplex"
 
Échange
class="icon--trade"
 
Fusion
class="icon--merge"

Liens

class="link link--large link--previous link--full-arrow"
Large Previous Full Arrow

class="link link--small link--previous link--full-arrow"
Small Previous Full Arrow

class="link link--large link--previous link--chevron"
Large Previous Chevron

class="link link--small link--previous link--chevron"
Small Previous Chevron

class="link link--large link--next link--full-arrow"
Large Next Full Arrow

class="link link--small link--next link--full-arrow"
Small Next Full Arrow

class="link link--large link--next link--chevron"
Large Next Chevron

class="link link--small link--next link--chevron"
Small Next Chevron

class="link link--small button--download has-icon icon--download"
Small Download

Pour centrer, utilisez <p class="txt-align--center">

Consulter les taux et rendements

 

Liens externes

class="is_external"
FR: Texte du lien (Cet hyperlien s'ouvrira dans un nouvel onglet).

EN: Link text (This hyperlink will open in a new tab).

 

NE PLUS UTILISER LA FLÈCHE SEULE

class="button--download has-icon icon--target-blank"
FR: Texte du lien (Cet hyperlien s'ouvrira dans un nouvel onglet).

EN: Link text (This hyperlink will open in a new tab).

 

Faire ouvrir une accordéon

class="js-anchor-open-accordion" href="#ANCRE ou LIEN"

Listes

Styles par défaut

Styles WYSIWYG sans CSS supplémentaire

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

 

  1. Lorem Ipsum
  2. Lorem Ipsum
  3. Lorem Ipsum
  4. Lorem Ipsum

Crochet et flèche

Classes CSS

ul class="checked-icons-list"

  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum

ul class="arrow-icons-list"

  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum

Numérotation

Classe CSS

ul class="cp-step__container has-border no-list-style"
li class="cp-step_item"
h3 class="cp-step-title"

  • Habitudes comportementales des Utilisateurs :

    Des données sur les habitudes comportementales des Utilisateurs sont collectées et partagées avec des outils d’analyse statistiques afin d’améliorer le Site de façon continue. Le temps passé sur le Site ainsi que les contenus les plus visités font notamment partie de ces données. Cette collecte permet aussi de développer et de perfectionner les produits numériques dont l’Espace Client de Beneva. 

  • Publicités personnalisées :

    Votre profil d’intérêts permet de vous présenter des publicités personnalisées sur les plateformes de partenaires publicitaires. Ces fonctions permettent aussi d’assurer un suivi des publicités avec lesquelles vous interagissez sur des sites web de tiers. 

  • Personnalisation de l’expérience de l’Utilisateur :

    Vos préférences permettent de personnaliser le contenu que vous retrouvez sur le Site et les applications mobiles Beneva. Ces fonctions peuvent être activées par Beneva ou par des tiers dont les services sont utilisés sur les pages du Site. Ainsi, votre Espace client pourrait être personnalisé et vous pourriez y retrouver des offres adaptées à vos besoins. 

Typographie

Formats WYSIWYG

Formats de paragraphe disponibles dans le WYSIWYG

Text Normal ()

Titre 1 ()

Titre 2 ()

Titre 3

Titre 4

Titre 5
Titre 6
Préformaté

CSS

Styles CSS à utiliser dans l'éditeur de source.

class="title-xxlarge"

class="title-xlarge"

class="title-large"

class="title-medium"

class="title-small"

class="title-xsmall"

class="subtitle-large"

class="subtitle-medium"

class="subtitle-small"

class="font-large"

class="font-medium"

class="font-small"

class="font-xsmall"

class="font-note"

 

class="cp-offices__name capture-large fn"

Styles de lignes horizontales

<hr/> par défaut

<hr class="hr--white"/>

<hr class="hr--violet"/>