Styleguide

Design Elements


Primary Palette

#d11074
.bg-pink
 $pink
#1159aa
.bg-blue
$blue


Secondary Palette

#b51061
.bg-pinkdark
$pinkdark
#5cd05b
.bg-green
$green
#ede811
.bg-yellow
$yellow
#77479d
.bg-purple
$purple
#292d38
.bg-darkblue
$darkblue


Grey Palette

#e6e6e6
.bg-grey
$grey
#f2f2f2;
.bg-greylight
$greylight


Icons

General Icons

Checkbox Icon
Social Icons

Loader


Buttons

Animated button
Standard button
Compléter la demande
Help button
Close button
Plus button
Arrow buttons
Help Contact Button
Gender Contact Button
Un homme
Une femme

Un garçon
Une fille
Situation Button
En couple
Célibataire
En famille
Enfant
En retraite ou proche de la retraite
Other Button
Célibataire
Pourquoi une assurance vie si je suis célibataire ?
Célibataire
Pourquoi une assurance vie si je suis célibataire ?
Unsocial buttons
Notice buttons
Typography

Google Font : Lato  |  font-family: 'Lato', sans-serif;  |  $lato

Lato Light : 300

Grumpy wizards make toxic brew for the evil Queen and Jack.


Lato Regular : 400

Grumpy wizards make toxic brew for the evil Queen and Jack.


Lato Bold : 700

Grumpy wizards make toxic brew for the evil Queen and Jack.


Lato Black : 900

Grumpy wizards make toxic brew for the evil Queen and Jack.



Headings

Heading 1 - (Black, 30px)


Heading 2 - (Regular, 25px)


Heading 3 - (Bold, 21px)


Heading 4 - (Bold, 18px)



Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


Heading 2

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


Heading 3

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


Heading 4

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


UI Components

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Placeholder Image and Some Alt Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.


Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Figure-Caption

A placeholder figure image.
The figcaption element example

A placeholder figure image.
The figcaption element example

A placeholder figure image.
The figcaption element example

Details-Summary

The summary element example

The details example text. It may be styled differently based on what browser or operating system you are using.


Card with Animated Icon and CTA


Card with Static Icon and CTA

Je veux soumettre ma demande de réclamation d’assurance vie


Card Fullwidth with Text and CTA

Je suis intéressé par ce produit
Pas aussi compliqué que vous pensez Combien ca coûte ?

Tiles

Le contrat d'assurance Le contrat d'assurance est fondé sur la véracité de vtos déclarations et toute fausse déclaration peut entrainer la nullité.
Assurance vie temporaire ou Assurance vie permanente ?
Le contrat d'assurance Le contrat d'assurance est fondé sur la véracité de vtos déclarations et toute fausse déclaration peut entrainer la nullité.
Assurance vie temporaire ou Assurance vie permanente ?
Le contrat d'assurance Le contrat d'assurance est fondé sur la véracité de vtos déclarations et toute fausse déclaration peut entrainer la nullité.
Assurance vie temporaire ou Assurance vie permanente ?
Le contrat d'assurance Le contrat d'assurance est fondé sur la véracité de vtos déclarations et toute fausse déclaration peut entrainer la nullité.
Assurance vie temporaire ou Assurance vie permanente ?
Le contrat d'assurance Le contrat d'assurance est fondé sur la véracité de vtos déclarations et toute fausse déclaration peut entrainer la nullité.
Assurance vie temporaire ou Assurance vie permanente ?
Le contrat d'assurance Le contrat d'assurance est fondé sur la véracité de vtos déclarations et toute fausse déclaration peut entrainer la nullité.
Assurance vie temporaire ou Assurance vie permanente ?

Blog section

Voir l'Article

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
  • service à la clientèle
  • Comprendre l'assurance
  • Voir l'Article

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
  • service à la clientèle
  • Comprendre l'assurance
  • Voir l'Article

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
  • service à la clientèle
  • Comprendre l'assurance
  • Voir l'Article

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
  • service à la clientèle
  • Comprendre l'assurance
  • Voir l'Article

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
  • service à la clientèle
  • Comprendre l'assurance
  • Voir l'Article

    Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
  • service à la clientèle
  • Comprendre l'assurance


  • Search fields


    Recherchez




    Pagination


    Text Elements

    The a element and external a element examples

    The abbr element and an abbr element with title examples

    The ACRONYM element example

    The b element example

    The cite element example

    The code element example

    The data element example

    The del element example

    The dfn element and dfn element with title examples

    The em element example

    The i element example

    The ins element example

    The kbd element example

    The mark element example

    The q element example

    The q element inside a q element example

    The s element example

    The samp element example

    The small element example

    The span element example

    The strong element example

    The sub element example

    The sup element example

    The example

    The u element example

    The var element example


    Monospace / Preformatted

    Code block wrapped in "pre" and "code" tags

                    // Loop through Divs using Javascript.
                                var divs = document.querySelectorAll('div'), i;
                                for (i = 0; i < divs.length; ++i) {
                                  divs[i].style.color = "green";
                                }
                    
                

    Monospace Text wrapped in "pre" tags

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


    List Types

    Ordered List

    1. List Item 1
    2. List Item 2
    3. List Item 3
      1. List Item 3.1
      2. List Item 3.2
        1. List Item 3.2.1
        2. List Item 3.2.2
      3. List Item 3.3
    4. List Item 4


    Unordered List

    • List Item 1
    • List Item 2
    • List Item 3
      • List Item 3.1
      • List Item 3.2
        • List Item 3.2.1
        • List Item 3.2.2
      • List Item 3.3
    • List Item 4


    Definition List

    Definition Term 1
    Definition Description 1
    Definition Term 2
    Definition Description 2

    Tables

    This is a table caption
    Table Header 1 Table Header 2 Table Header 3
    Division 1 Division 2 Division 3
    Division 1 Division 2 Division 3
    Division 1 Division 2 Division 3
    A row with a cell spanning all 3 columns
    Table Footer 1 Table Footer 2 Table Footer 3

    Medias

    The Audio Element:


    The Video Element:


    Embedded content:

    YouTube video (iframe):


    Form Elements

    The Fieldset:
    Legend
    The Form:












    Radio Buttons:


    Specific widget radio


    Checkboxes:


    Specific Checkbox Icon
    Oui
    Non





    HTML5-specific Form Elements












    42



    350 degrees