Atoms

Les Atoms sont des composants minuscules

Alert

× Lorem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, commodi. 

  ×
  Lorem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, commodi.
× Lorem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, commodi. 

  ×
  Lorem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, commodi.
× Lorem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, commodi. 

  ×
  Lorem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, commodi.
× Lorem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, commodi. 

  ×
  Lorem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, commodi.

Blockquote

Retraites Populaires est fiable. Fondée il y a plus de 100 ans, elle est une partenaire de confiance sur laquelle la population et les entreprises peuvent compter en toute sécurité, en tant qu’institution de droit public avec des prestations garanties.
  
Retraites Populaires est fiable. Fondée il y a plus de 100 ans, elle est une partenaire de confiance sur laquelle la population et les entreprises peuvent compter en toute sécurité, en tant qu’institution de droit public avec des prestations garanties.

Button

  • 3.0.0 –

    Improvements to CSS, the .btn class has to have the .btn-primary class to be green. .btn-circle replaces the .arrow component

  • 3.1.0 –

    The btn-outline must have the btn-primary class to display the correct color and border-color

Can be wrapped in .theme-[theme] to change look

Button Bubble

Can be wrapped in .theme-[theme] to change look


  

  

    
  

  

    Lien

Funky Waves

Can be wrapped in .theme-[theme] to change look.
Can be used with the modifier has-header to add margin-top when used with fixed header.

Image de couverture 

  
      
      
      
      Image de couverture
Image de couverture 

  
      
      
      
      Image de couverture

Hamburger

Can be wrapped in .theme-[theme] to change look.

Menu
Fermer

  

    

      
      
      
    

    
      
    
  

  

    
Menu

    
Fermer

Highlight

Can be wrapped in .theme-[theme] to change look.

Retraites Populaires est responsable. Au coeur de sa raison d’être se trouve le respect des engagements.

Retraites Populaires est responsable. Au coeur de sa raison d’être se trouve le respect des engagements.

Icon Text

Can be wrapped in .theme-[theme] to change look.

Collectivités publiques

 

  
  
Collectivités publiques

Input Checkbox

Can be wrapped in .theme-[theme] to change look.

Input Datepicker

Can be wrapped in .theme-[theme] to change look.
We use the jQuery plugin bootstrap-datepicker, check the documentation for advanced usage & parameters.

Input File

  • 3.0.0 –

    Improvements to CSS, the .label class became .form-control-label.

Certificat de salaire 

  Certificat de salaire

Input Group

Input Radio

Can be wrapped in .theme-[theme] to change look.

Input Radio Button

Can be wrapped in .theme-[theme] to change look.

parfums

  

    

      
      
      
    

    
 parfums

Input Select

Can be wrapped in .theme-[theme] to change look.

Input Text

Can be wrapped in .theme-[theme] to change look

Input Textarea

Can be wrapped in .theme-[theme] to change look.

Label

Can be wrapped in .theme-[theme] to change look

Immobilier
Mon patrimoine
Mon patrimoine

Loader

Can be wrapped in .theme-[theme] to change look

Meta Box

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, laborum.


  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, laborum.

Organic Lines

This component requires MorphSVGPlugin library (shipped in /build directory) to work properly (animation).

You only need to insert the following div in your HTML, the rest is injected with Javascript:

<div class="organic-lines lines-cip"></div>

Can be wrapped in .theme-[theme] to change look. Wrap in a .organic-wrapper class to position the lines behind the content.

Slider

Needs jQuery.ui.slider for working and jQuery.ui.touch-punch for mobile support.

This code is the only needed, the rest is injected by jQuery.ui:

<div class="slider" data-step="1" data-max="100" data-min="0"></div>

Multiple data options can be set:

  • data-value: Default value
  • data-step: Number of step to move slider
  • data-max: Max number of the slider
  • data-min: Min number of the slider
  • data-range: To change type of jQuery.ui slider range (min (default), max, null)
  • data-labels: Key-Value object of labels to show
    • Key: To which value the label must be placed
    • Value: The label to show
    • The declaration must be compatible with JSON.parse() See and try it
  • data-show-pips: To show pips for non labeled steps (default: false)

Socials

.retraitespopulaires-icon-color (Takes the branded color of the social network)

Spacer

The spacer is used to create space between components !
Can be used with the modifier spacer-[xs|sm|md|lg|xlg] to change look.

Throbber

Drupal ajax.js places the following after the element that has triggered a loading action!

 

  
 
 

  
 

Tooltip

Add tooltip-shift to make the tooltip shift to the right

Well

Can be used with the modifier .well-[success|danger] to change look.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


  

    Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


  

    Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 


  

    Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.