Selectra's layout classes v3.3.1

An overview of the classes you can use on both selectra.info & comparateur.selectra.info with their examples and more...

  • Documentation for version 2.x available here

Queries

You want some new super powered classes ?

Yeah, I have great ideas

1. Introduction classes

Introduction paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores iusto, expedita iure veritatis labore, nulla, ullam commodi iste velit dicta adipisci illo natus voluptatem quos fuga beatae! Odit ullam doloremque obcaecati provident consequatur voluptates atque labore ab totam ipsum aperiam tempore hic itaque, eligendi iste. Sunt esse, fuga rerum vitae.


            

          

          
Summary

          

            

              
              

            

            

              

            

            

              
Caution! Be sure to use ordored lists, namely  <ol>...</ol>

            

          

          
Bullets summary

          

            

              
              

            

            

              

            

            

              
Caution! Be sure to use ordored lists, namely  <ol>...</ol>

            

          

          
2. Text boxes

          
You can use these classes on 2 types of HTML tag:

          
    
            
  • Paragraph: <p>...</p>
    • 
            
  • Generic element: <div>...</div>
    • 
          

          
Use <p>...</p> when the content is a paragraph

          
Use <div>...</div> when the content is generic, like an advert

          
Warning

          

            

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.

            

            

              

            

            

              
<span class="title">...</span> is optional, it allows you to add a title to the box.

            

          

          
Danger

          

            

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.

            

            

              

            

            

              
<span class="title">...</span> is optional, it allows you to add a title to the box.

            

          

          
GRDF

          

            

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.

            

            

              

            

            

              
<span class="title">...</span> is optional, it allows you to add a title to the box.

            

          

          
Note

          

            

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.

            

            

              

            

            

              
<span class="title">...</span> is optional, it allows you to add a title to the box.

            

          

          
Selectra

          

            

              
Déménagement ? Contactez Web Energie au 09 87 67 54 75 (lundi-vendredi 8H30-21H, samedi 9H-18H) pour mettre votre compteur d'électricité et/ou de gaz à votre nom ou ouvrir le compteur avec un fournisseur alternatif. Cette plateforme multifournisseurs se charge de vos démarches liées au déménagement et vous oriente vers l'offre partenaire la plus compétitive dans votre cas.Service téléphonique géré par la société Selectra qui prend en charge vos démarches de déménagement ou de changement de fournisseur en vous orientant vers les offres partenaires les plus compétitives dans votre cas. En savoir plusAnnonce

            

            

              

            

            

              
<span class="text-corner">...</span> allows you to add a mention with a tooltip. To change the tooltip text, edit the  title="..." attribute of the .text-corner element.

            

          

          
Check

          

            

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.

            

            

              

            

            

              
<span class="titre">...</span> is optional, it allows you to add a title to the box.

            

          

          
Namely

          

            

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.

            

            

              

            

            

              
<span class="title">...</span> is optional, it allows you to add a title to the box.

            

          

          
Laptop

          

            

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.

            

            

              

            

            

              
<span class="title">...</span> is optional, it allows you to add a title to the box.

            

          

          
Mobile

          

            

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.

            

            

              

            

            

              
<span class="title">...</span> is optional, it allows you to add a title to the box.

            

          

          
Thumbs up

          

            

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.

            

            

              

            

            

              
<span class="title">...</span> is optional, it allows you to add a title to the box.

            

          

          
PDF

          

            

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.

            

            

              

            

            

              
<span class="title">...</span> is optional, it allows you to add a title to the box.

            

          

          
Selectra's check

          

            

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.

            

            

              

            

            

              
<span class="title">...</span> is optional, it allows you to add a title to the box.

            

          

          
Advice

          

            

              
Aliens !TitleSubtitle
                
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Esse autem a offHereis ab quis. Eius, accusamus? Eos aut voluptas, modi commodi aliquam ullam, odio necessitatibus eius assumenda ipsa unde eligendi placeat at asperiores facilis optio reprehenderit temporibus itaque aperiam minus atque pariatur tempore. Repellat impedit cum consectetur distinctio necessitatibus, eveniet.

              

            

            

              

            

            

              
<span class="title">...</span> is optional, it allows you to add a title to the box.

              
<span class="subtitle">...</span> is optional, it allows you to add a subtitle to the box.

            

          

          
Expert's advice

          

            

              
An expert's advice
                
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Esse autem a offHereis ab quis. Eius, accusamus? Eos aut voluptas, modi commodi aliquam ullam, odio necessitatibus eius assumenda ipsa unde eligendi placeat at asperiores facilis optio reprehenderit temporibus itaque aperiam minus atque pariatur tempore. Repellat impedit cum consectetur distinctio necessitatibus, eveniet.

                
Aliens !
                  
The Amazing Alien Guy

                

              

            

            

              

            

            

              
<span class="title">...</span> is optional, it allows you to add a title to the box.

              
 <figure>...</figure> is optional, it allows you to add a picture of the expert.

              
 <figcaption>...</figcaption> is optional, it allows you to add legend to the picture of the expert.

            

          

          
Letter

          

            

              

                
Madame/ Monsieur,

                
Je suis aujourd’hui bénéficiaire d’un contrat d’assurance multirisques habitation, auprès de votre organisme d’assurance [Nom de l’entreprise]. Ce contrat souscrit le [date d’effet], portant le numéro [x], concerne [ma maison/ mon logement/ autre] situé (e) à [votre adresse]. Je souhaite aujourd’hui résilier mon contrat d’assurance habitation auprès de vos services. Conformément à la loi Hamon et à l’article L113-15-2 du Code des assurances, cette résiliation prendra effet, un mois à compter de la date de réception de ce courrier.

                
Je vous remercie d’avance de bien vouloir accéder à ma demande en prenant toutes les dispositions nécessaires et de me faire parvenir, à toutes fins utiles, une attestation à jour.

                
Dans l'attente d'une réponse de votre part, je vous prie, Madame, Monsieur, d'agréer mes sincères salutations.

                
[Signature de l’assuré]

              

            

            

              

            

          

          
Text corner (mention)

          

            

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.Annonce

              
OR

              
Lorem ipsum dolorLorem ipsum dolor sit amet, consectetur adipisHereng elit. Omnis repellendus autem commodi qui magnam, eligendi voluptate. Totam amet aperiam, ad ipsa quis consectetur necessitatibus recusandae doloremque inventore suscipit vel exercitationem, pariatur asperiores.Annonce

            

            

              

            

            

              
Caution! Make sure to place this element at the end of your text box.

              
To change the tooltip text, edit the  title="..." attribute of the .text-corner element.

              
You can replace the word Annonce by the one that fits your needs.

            

          

          
3. Lists

          
List box check

          

            

              
    
                
  • Lorem ipsum dolor sit amet, consectetur adipisHereng elit.
    • 
                
  • Lorem ipsum dolor sit amet.
    • 
                
  • Lorem ipsum dolor sit amet.
    • 
                
  • Lorem ipsum dolor sit amet.
    • 
              

            

            

              

            

            

              
<li class="title">...</li> is optional, it allows you to add a title to the list.

            

          

          
List with check mark

          

            

              
    
                
  • Lorem ipsum dolor sit amet.
    • 
                
  • Lorem ipsum dolor sit amet.
    • 
                
  • Lorem ipsum dolor sit amet.
    • 
              

            

            

              

            

          

          
List with cross mark

          

            

              
    
                
  • Lorem ipsum dolor sit amet.
    • 
                
  • Lorem ipsum dolor sit amet.
    • 
                
  • Lorem ipsum dolor sit amet.
    • 
              

            

            

              

            

          

          
Custom list (cross mark or check mark)

          

            

              
    
                
  • Lorem ipsum dolor sit amet.
    • 
                
  • Lorem ipsum dolor sit amet.
    • 
              

            

            

              

            

            

              
Each marker can be choosed regardless by applying the desired class:

              
    
                
  • Checkmark: class="b-check"
    • 
                
  • Crossmark: class="b-cross"
    • 
              

            

          

          
Numbered list

          

            

              
    
                
  1. Lorem ipsum dolor sit amet.
    2. 
                
  2. Lorem ipsum dolor sit amet.
    3. 
                
  3. Lorem ipsum dolor sit amet.
    4. 
                
  4. Lorem ipsum dolor sit amet.
    5. 
                
  5. Lorem ipsum dolor sit amet.
    6. 
                
  6. Lorem ipsum dolor sit amet.
    7. 
                
  7. Lorem ipsum dolor sit amet.
    8. 
                
  8. Lorem ipsum dolor sit amet.
    9. 
                
  9. Lorem ipsum dolor sit amet.
    10. 
                
  10. Lorem ipsum dolor sit amet.
    11. 
                
  11. Lorem ipsum dolor sit amet.
    12. 
                
  12. Lorem ipsum dolor sit amet.
    13. 
                
  13. Lorem ipsum dolor sit amet.
    14. 
                
  14. Lorem ipsum dolor sit amet.
    15. 
                
  15. Lorem ipsum dolor sit amet.
    16. 
              

            

            

              

            

            

              
The class can be used both on ordered list <ol>...</ol> or on an unordered list <ul>...</ul>

            

          

          
4. Icons

          
Numbered icons

          

            
                    

            

              

            

          

          
Checkmark icon

          

            

            

              

            

          

          
Crossmark icon

          

            

            

              

            

          

          
5. Quotations

          
Short quotation left

          

            

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, rem, officiis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est! Quasi iste natus illum sunt deserunt animi minus ullam recusandae vel cumque necessitatibus nam iure dolorem ex odio quo odit non reHereendis esse unde offHereis dignissimos, assumenda nostrum quas. Itaque doloremque molestiae alias laborum tempore maxime quidem. Soluta molestiae eaque consequuntur, labore earum, tempora nemo dolorem fugiat porro.

            

            

              

            

          

          
Short quotation right

          

            

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, rem, officiis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est! Quasi iste natus illum sunt deserunt animi minus ullam recusandae vel cumque necessitatibus nam iure dolorem ex odio quo odit non reHereendis esse unde offHereis dignissimos, assumenda nostrum quas. Itaque doloremque molestiae alias laborum tempore maxime quidem. Soluta molestiae eaque consequuntur, labore earum, tempora nemo dolorem fugiat porro.

            

            

              

            

          

          
Short quotation center

          

            

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, rem, officiis. Rerum provident optio. Repellendus, praesentium, est! Quasi iste natus illum sunt deserunt animi minus ullam recusandae vel cumque necessitatibus nam iure dolorem ex odio quo odit non reHereendis esse unde offHereis dignissimos, assumenda nostrum quas. Itaque doloremque molestiae alias laborum tempore maxime quidem. Soluta molestiae eaque consequuntur, labore earum, tempora nemo dolorem fugiat porro.

            

            

              

            

          

          
Long quotation left

          

            

              

                
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, rem, officiis.

                
Person citedsource

              

            

            

              

            

          

          
Long quotation right

          

            

              

                
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, rem, officiis.

                
Person citedsource

              

            

            

              

            

          

          
6. Image rules

          
          
7. Image boxes

          
Left image box

          

            

              
alt text
                
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis.

              

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

            

            

              

            

            

              
Multiple images can be inserted , then they'll be placed one below each other

              
 The caption is optional, the tag <figcaption>image caption</figcaption> can be omitted.

              
Caution! to avoid responsiveness problems, size attributes of the image width="..." and height="..." should be avoided.

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Left image box without border

          

            

              
alt text
                
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis.

              

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

            

            

              

            

            

              
Multiple images can be inserted , then they'll be placed one below each other

              
 The caption is optional, the tag <figcaption>image caption</figcaption>can be omitted.

              
Caution! to avoid responsiveness problems, size attributes of the image width="..." and height="..." should be avoided.

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Right image box

          

            

              
raccordement
                
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis.

              

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

            

            

              

            

            

              
Multiple images can be inserted , then they'll be placed one below each other

              
 The caption is optional, the tag <figcaption>image caption</figcaption>can be omitted.

              
Caution! to avoid responsiveness problems, size attributes of the image width="..." and height="..." should be avoided.

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Right image box without border

          

            

              
alt text
                
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis.

              

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

            

            

              

            

            

              
Multiple images can be inserted , then they'll be placed one below each other

              
 The caption is optional, the tag <figcaption>image caption</figcaption>can be omitted.

              
Caution! to avoid responsiveness problems, size attributes of the image width="..." and height="..." should be avoided.

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Centered image box

          

            

              
alt text
                
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis.

              

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

            

            

              

            

            

              
Multiple images can be inserted , then they'll be placed one below each other

              
 The caption is optional, the tag <figcaption>image caption</figcaption>can be omitted.

              
Caution! to avoid responsiveness problems, size attributes of the image width="..." and height="..." should be avoided.

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Centered image box without border

          

            

              
alt text
                
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis.

              

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

            

            

              

            

            

              
Multiple images can be inserted , then they'll be placed one below each other

              
 The caption is optional, the tag <figcaption>image caption</figcaption>can be omitted.

              
Caution! to avoid responsiveness problems, size attributes of the image width="..." and height="..." should be avoided.

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Adjacent image box

          

            

              
alt textalt text
                
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis.

              

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

            

            

              

            

            

              
 The caption is optional, the tag <figcaption>image caption</figcaption>can be omitted.

              
Caution! to avoid responsiveness problems, size attributes of the image width="..." and height="..." should be avoided.

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Adjacent image box without border

          

            

              
alt textalt text
                
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis.

              

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

              
Lorem ipsum dolor sit amet, consectetur adipisHereng elit. Vero, rem, offHereis. Mollitia impedit tempora et maxime, atque hic aperiam sit ab earum aut recusandae tempore amet obcaecati vitae minus reHereendis odio sequi quisquam ipsum? Corporis velit pariatur sapiente beatae nesciunt quos, facere animi hic temporibus molestias rerum provident optio. Repellendus, praesentium, est!

            

            

              

            

            

              
 The caption is optional, the tag <figcaption>image caption</figcaption>can be omitted.

              
Caution! to avoid responsiveness problems, size attributes of the image width="..." and height="..." should be avoided.

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
8. Text styles

          
Bold text

          

            

              
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem architecto, cupiditate molestiae nostrum delectus animi vitae nihil in porro dolorum.

            

            

              

            

          

          
Green text

          

            

              
 Lorem ipsum dolor sit amet,  consectetur adipisicing elit. Dolorem architecto, cupiditate molestiae nostrum delectus animi vitae nihil in porro dolorum.

            

            

              

            

          

          
Red text

          

            

              
 Lorem ipsum dolor sit amet,  consectetur adipisicing elit. Dolorem architecto, cupiditate molestiae nostrum delectus animi vitae nihil in porro dolorum.

            

            

              

            

          

          
Tel

          

            

              
 Lorem ipsum dolor sit amet,  consectetur adipisicing elit. Dolorem architecto, cupiditate molestiae nostrum delectus animi vitae nihil in porro dolorum.

            

            

              

            

          

          
Highlighted text

          

            

              
 Lorem ipsum dolor sit amet,  consectetur adipisicing elit. Dolorem architecto, cupiditate molestiae nostrum delectus animi vitae nihil in porro dolorum.

            

            

              

            

          

          
Deleted text

          

            

              
 Lorem ipsum dolor sit amet,  consectetur adipisicing elit. Dolorem architecto, cupiditate molestiae nostrum delectus animi vitae nihil in porro dolorum.

            

            

              

            

          

          
Underlined text

          

            

              
 Lorem ipsum dolor sit amet,  consectetur adipisicing elit. Dolorem architecto, cupiditate molestiae nostrum delectus animi vitae nihil in porro dolorum.

            

            

              

            

          

          
Small text

          

            

              
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem architecto, cupiditate molestiae nostrum delectus animi vitae nihil in porro dolorum.

            

            

              

            

          

          
Mention

          

            

              
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam sed exercitationem nesciunt recusandae, neque facilis. Learn more

            

            

              

            

            

              
With this class, links are in grey.

            

          

          
Emphasis text

          

            

              
 Lorem ipsum dolor sit amet,  consectetur adipisicing elit. Dolorem architecto, cupiditate molestiae nostrum delectus animi vitae nihil in porro dolorum.

            

            

              

            

          

          
Uppercase text

          

            

              
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem architecto, cupiditate molestiae nostrum delectus animi vitae nihil in porro dolorum.

            

            

              

            

          

          
Capitalized text

          

            

              
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem architecto, cupiditate molestiae nostrum delectus animi vitae nihil in porro dolorum.

            

            

              

            

          

          
Abbreviation (definition showed on hover)

          

            

              

                C.P.U.
              

            

            

              

            

          

          
9. Text alignments

          
Left aligned

          

            

              
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quae ipsa, eum consequuntur ipsum est tempora, recusandae mollitia. Impedit soluta, libero a nobis repellendus excepturi fugit repellat accusamus nisi velit voluptatem, harum mollitia odio animi earum sapiente nesciunt sint blanditiis vero. Architecto ex obcaecati, quod reprehenderit voluptate minus natus dolores.

            

            

              

            

          

          
Right aligned

          

            

              
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quae ipsa, eum consequuntur ipsum est tempora, recusandae mollitia. Impedit soluta, libero a nobis repellendus excepturi fugit repellat accusamus nisi velit voluptatem, harum mollitia odio animi earum sapiente nesciunt sint blanditiis vero. Architecto ex obcaecati, quod reprehenderit voluptate minus natus dolores.

            

            

              

            

          

          
Center aligned

          

            

              
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quae ipsa, eum consequuntur ipsum est tempora, recusandae mollitia. Impedit soluta, libero a nobis repellendus excepturi fugit repellat accusamus nisi velit voluptatem, harum mollitia odio animi earum sapiente nesciunt sint blanditiis vero. Architecto ex obcaecati, quod reprehenderit voluptate minus natus dolores.

            

            

              

            

          

          
Justify aligned

          

            

              
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quae ipsa, eum consequuntur ipsum est tempora, recusandae mollitia. Impedit soluta, libero a nobis repellendus excepturi fugit repellat accusamus nisi velit voluptatem, harum mollitia odio animi earum sapiente nesciunt sint blanditiis vero. Architecto ex obcaecati, quod reprehenderit voluptate minus natus dolores.

            

            

              

            

          

          
10. Table styles

          
Classic table

          

            

              

                

                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

              

            

            

              

            

            

              
Caution! Table have to be included in a <div class="table-responsive">...</div> and have the class .table to be responsive

            

          

          
Inverse table

          

            

              

                

                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

              

            

            

              

            

            

              
Caution! Table have to be included in a <div class="table-responsive">...</div> and have the class .table to be responsive

            

          

          
Striped table

          

            

              

                

                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

              

            

            

              

            

            

              
Caution! Table have to be included in a <div class="table-responsive">...</div> and have the class .table to be responsive

            

          

          
Bordered table

          

            

              

                

                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

              

            

            

              

            

            

              
Caution! Table have to be included in a <div class="table-responsive">...</div> and have the class .table to be responsive

            

          

          
Hoverable table

          

            

              

                

                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

              

            

            

              

            

            

              
Caution! Table have to be included in a <div class="table-responsive">...</div> and have the class .table to be responsive
The hover state is only working for tbody rows

            

          

          
Smaller table

          

            

              

                

                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

              

            

            

              

            

            

              
Caution! Table have to be included in a <div class="table-responsive">...</div> and have the class .table to be responsive

            

          

          
Fixed thead

          

            

              

                
                  

                    Lorem ipsum dolor.
                    Lorem ipsum dolor.
                    Lorem ipsum dolor.
                  

                
                
                  

                    Lorem ipsum dolor.
                    Lorem ipsum dolor.
                    Lorem ipsum dolor.
                  

                  

                    Lorem ipsum dolor.
                    Lorem ipsum dolor.
                    Lorem ipsum dolor.
                  

                  

                    Lorem ipsum dolor.
                    Lorem ipsum dolor.
                    Lorem ipsum dolor.
                  

                  

                    Lorem ipsum dolor.
                    Lorem ipsum dolor.
                    Lorem ipsum dolor.
                  

                
                
                  

                    Lorem ipsum dolor.
                    Lorem ipsum dolor.
                    Lorem ipsum dolor.
                  

                
              

            

            

              

            

            

              
Caution! For this particular class, the table must not be included inside <div class="table-responsive">...</div>

            

          

          
Thead background

          

            

              

                

                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

              

            

            

              

            

          

          
Thead inverse background

          

            

              

                

                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

              

            

            

              

            

          

          
Row background color

          

            

              

                

                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Active
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Primary
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Primary plain
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Secondary
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Secondary plain
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Success
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Success plain
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Warning
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Warning plain
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Danger
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Danger plain
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Info
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Info plain
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

              

            

            

              

            

          

          
Cell background color

          

            

              

                

                  
                    

                      Lorem ipsum.
                      Lorem.
                      Lorem.
                    

                  
                  
                    

                      Active.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Lorem ipsum dolor.
                      Primary.
                      Lorem ipsum dolor.
                    

                    

                      Lorem ipsum dolor.
                      Primary plain.
                      Lorem ipsum dolor.
                    

                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Secondary.
                    

                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Secondary plain.
                    

                    

                      Success.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Success plain.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Lorem ipsum dolor.
                      Warning.
                      Lorem ipsum dolor.
                    

                    

                      Lorem ipsum dolor.
                      Warning plain.
                      Lorem ipsum dolor.
                    

                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Danger.
                    

                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Danger plain.
                    

                    

                      Info.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                    

                      Info plain.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

              

            

            

              

            

          

          
Table caption

          

            

              

                

                   Lorem ipsum dolor sit amet.
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

              

            

            

              

            

          

          
Table legend

          

            

              

                

                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

                
Lorem ipsum dolor sit amet.

              

            

            

              

            

          

          
Table nowrap

          

            

              

                

                  
                    

                      Lorem ipsum dolor sit amet, consectetur.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                

              

            

            

              

            

            

              
Caution! Be careful with this class, if cell text is long this could lead to very long cell

            

          

          
Table vertical alignment

          

            

              

                

                  
                    

                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                      Lorem ipsum dolor.
                    

                  
                  
                    

                      Vertical align top
                      Vertical align middle
                      Vertical align bottom
                    

                  
                

              

            

            

              

            

          

          
11. Embed Youtube

          
Embed

          

            

              

            

            

              

            

            

              
How to: You must replace the data-id="..." value by the code you find next to the https://www.youtube.com/watch?v="..." url value

            

          

          
Embed 50%

          

            

              

            

            

              

            

            

              
How to: You must replace the data-id="..." value by the code you find next to the https://www.youtube.com/watch?v="..." url value

            

          

          
Embed 50% on the left

          

            

              

            

            

              

            

            

              
How to: You must replace the data-id="..." value by the code you find next to the https://www.youtube.com/watch?v="..." url value

            

          

          
Embed 50% on the right

          

            

              

            

            

              

            

            

              
How to: You must replace the data-id="..." value by the code you find next to the https://www.youtube.com/watch?v="..." url value

            

          

          
Embed 75%

          

            

              

            

            

              

            

            

              
How to: You must replace the data-id="..." value by the code you find next to the https://www.youtube.com/watch?v="..." url value

            

          

          
Embed 75% on the left

          

            

              

            

            

              

            

            

              
How to: You must replace the data-id="..." value by the code you find next to the https://www.youtube.com/watch?v="..." url value

            

          

          
Embed 75% on the right

          

            

              

            

            

              

            

            

              
How to: You must replace the data-id="..." value by the code you find next to the https://www.youtube.com/watch?v="..." url value

            

          

          
12. Badges

          
Badge sizes

          
Badges scale to match the size of the immediate parent

          

            

              
h1 heading with a badge OMG!

              
h2 heading with a badge OMG!

              
h3 heading with a badge OMG!

              
h4 heading with a badge OMG!

              
h5 heading with a badge OMG!

              
h6 heading with a badge OMG!

            

            

              

            

          

          
Badge colors

          

            
Primary Secondary Success Warning Danger

            

              

            

          

          
Badge icon

          
Icons scale to match the size of the badge

          

            

              
h1 heading with a badge 
                    
                  OMG!

              
h2 heading with a badge 
                    
                  OMG!

              
h3 heading with a badge 
                    
                  OMG!

              
h4 heading with a badge 
                    
                  OMG!

              
h5 heading with a badge 
                    
                  OMG!

            

            

              

            

          

          
13. Buttons

          
Button tags

          

            
Link    

            

              

            

            

              
If you want to center a button you'll have to add class="mx-auto" style="width: 200px;" where width: 200px; defines the width of your button (without a fixed width a button can't be centered)
Caution! lowest mobile width allowed is 320px

            

          

          
Button colors

          

            
    

            

              

            

          

          
Button sizes

          

            
  

            

              

            

            

              
Caution! You must always specify a size, or the render will be not be complete

            

          

          
Outline buttons

          

            
    

            

              

            

          

          
Buttons with icons

          

            
 

            

              

            

            

              
You can find the list of the avaible icons here

            

          

          
14. Responsive utilities

          
Hiding & showing classes

          
Use these utility classes for showing and hiding content by device via media query.

          

            

              
                

                  
                  Extra small devices
Portrait phones (<544px)		
                  Small devices
Landscape phones (≥544px - <768px)		
                  Medium devices
Tablets (≥768px - <992px)		
                  Large devices
Desktops (≥992px - <1200px)		
                  Extra large devices
Desktops (≥1200px)		
                

              
              
                

                  .u-display-block
.u-display-inline
.u-display-inline-block
.u-display-flex
.u-display-inline-flex
.u-display-table		
                  Visible
                  Visible
                  Visible
                  Visible
                  Visible
                

                

                  .u-display-xs-none
                  
                  Visible
                  Visible
                  Visible
                  Visible
                

                

                  .u-display-sm-none
                  
                  
                  Visible
                  Visible
                  Visible
                

                

                  .u-display-md-none
                  
                  
                  
                  Visible
                  Visible
                

                

                  .u-display-lg-none
                  
                  
                  
                  
                  Visible
                

                

                  .u-display-xl-none
.u-display-none		
                  
                  
                  
                  
                  
                

              
            

          

          
15. Action boxes 

          
Basic

          
Action boxes are fully customizable, you can change:

          
    
            
  • left image, title, text, forms and buttons
    • 
            
  • add an open/closed version
    • 
            
  • change the background/border color
    • 
            
  • make them fit in the half/third of the width
    • 
            
  • and so on... Only your imagination is the limit O_o
    • 
          

          

            

              
Open version

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
09 87 67 54 76ORFree call back

                

              

              
Closed version

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque aliquam unde impedit similique delectus, voluptatibus.

                  

                    

                      

                      

                      

                      

                    

                  

                

              

            

            

              

            

            

              
Caution! Follow theses constraints for your images

              
    
                
  • use .png or .jpg optimized with a compressor such as tiny png
    • 
                
  • size depends on the use case but at least 144px wide and 160px high
    • 
              

              
These images should be uploaded here: ../img/here/it/is/

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Closed bis

          

            

              
Open version

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
09 87 67 54 76ORFree call back

                

              

              
Closed version

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
Compare offersOROnline subscription

                

              

            

            

              

            

            

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Offer

          

            

              
Open version

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
09 87 67 54 76ORFree call back

                

              

              
Closed version

              

                
Our call platform is currently closed

                
Direct Energie
                  
We recommend Direct offer
Online subscription
                

              

            

            

              

            

            

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Link

          

            

              
Full size

              

                

                  
Put some text here
Some button text
                

              

              
Half the size

              

                

                  
Put some text here
Some button text
                

              

              
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, facilis laudantium excepturi provident, dolorum explicabo, voluptatum nihil fugiat nisi exercitationem atque eveniet deleniti porro sunt impedit consectetur animi. Mollitia voluptatem tempore iusto saepe vel. Odio laborum voluptatibus eos placeat ex inventore deserunt alias ea modi nam totam quidem nisi iure corrupti debitis nemo magnam quo ratione asperiores architecto, esse natus sed repellat sit. Iure quisquam magni hic quod eveniet? Pariatur ipsa cupiditate facilis maiores mollitia earum reiciendis perspiciatis blanditiis ducimus dignissimos? Eveniet explicabo eum dolore architecto suscipit quasi eaque soluta, ullam deserunt officia maxime ea asperiores, ipsam ratione maiores vitae pariatur praesentium neque culpa ducimus saepe cum rem. Laudantium voluptates minus culpa non tenetur architecto deleniti sunt vero sint, vitae maiores iste ipsum, fuga nulla reiciendis molestias, ea debitis. Doloremque vitae placeat voluptatibus voluptate quos atque, impedit odit reprehenderit inventore quidem voluptatum facilis doloribus fugit recusandae illum molestiae! Iusto, esse!

              
Third the size

              

                

                  
Put some text here
Some button text
                

              

              
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, facilis laudantium excepturi provident, dolorum explicabo, voluptatum nihil fugiat nisi exercitationem atque eveniet deleniti porro sunt impedit consectetur animi. Mollitia voluptatem tempore iusto saepe vel. Odio laborum voluptatibus eos placeat ex inventore deserunt alias ea modi nam totam quidem nisi iure corrupti debitis nemo magnam quo ratione asperiores architecto, esse natus sed repellat sit. Iure quisquam magni hic quod eveniet? Pariatur ipsa cupiditate facilis maiores mollitia earum reiciendis perspiciatis blanditiis ducimus dignissimos? Eveniet explicabo eum dolore architecto suscipit quasi eaque soluta, ullam deserunt officia maxime ea asperiores, ipsam ratione maiores vitae pariatur praesentium neque culpa ducimus saepe cum rem. Laudantium voluptates minus culpa non tenetur architecto deleniti sunt vero sint, vitae maiores iste ipsum, fuga nulla reiciendis molestias, ea debitis. Doloremque vitae placeat voluptatibus voluptate quos atque, impedit odit reprehenderit inventore quidem voluptatum facilis doloribus fugit recusandae illum molestiae! Iusto, esse!

            

            

              

            

          

          
Compare

          

            

              

                
Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  

                    

                      

                    

                  

                

              

            

            

              

            

            

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Prize list

          

            

              

                
Prize list

                

                  
Title goes here

                  
    
                    
  1. Direct Energie
    2. 
                    
  2. Lampiris
    3. 
                    
  3. EDF
    4. 
                  

                  
Voir le classement

                

              

            

            

              

            

            

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Different button usages

          

            

              
Exemple 1

              

                
Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
I subscribeKnow more

                

              

              
Exemple 2

              

                
Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
Go to a link

                

              

            

            

              

            

          

          
Subscription

          

            

              

                
test

                
Direct EnergieOnline subscription

              

            

            

              

            

          

          
Presentation

          

            

              

                

                  
laptop
                    
Put some text here

                    
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias placeat velit sint voluptatibus, expedita.
Some button text
                  

                  
smartphone
                    
Put some text here

                    
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias placeat velit sint voluptatibus, expedita.
Some button text
                  

                  
thumbs-up
                    
Put some text here

                    
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam molestias placeat velit sint voluptatibus, expedita.
Some button text
                  

                

              

            

            

              

            

            

              
Caution! Here you should usesvgicons

              
These icons should be uploaded here:../img/here/it/is/

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Half the width

          

            

              
Open version

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
09 87 67 54 76ORFree call back

                

              

              
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, facilis laudantium excepturi provident, dolorum explicabo, voluptatum nihil fugiat nisi exercitationem atque eveniet deleniti porro sunt impedit consectetur animi. Mollitia voluptatem tempore iusto saepe vel. Odio laborum voluptatibus eos placeat ex inventore deserunt alias ea modi nam totam quidem nisi iure corrupti debitis nemo magnam quo ratione asperiores architecto, esse natus sed repellat sit. Iure quisquam magni hic quod eveniet? Pariatur ipsa cupiditate facilis maiores mollitia earum reiciendis perspiciatis blanditiis ducimus dignissimos? Eveniet explicabo eum dolore architecto suscipit quasi eaque soluta, ullam deserunt officia maxime ea asperiores, ipsam ratione maiores vitae pariatur praesentium neque culpa ducimus saepe cum rem. Laudantium voluptates minus culpa non tenetur architecto deleniti sunt vero sint, vitae maiores iste ipsum, fuga nulla reiciendis molestias, ea debitis. Doloremque vitae placeat voluptatibus voluptate quos atque, impedit odit reprehenderit inventore quidem voluptatum facilis doloribus fugit recusandae illum molestiae! Iusto, esse!

              
Closed version

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque aliquam unde impedit similique delectus, voluptatibus.

                  

                    

                      

                            
                          
                            
                          

                      

                      

                      

                    

                  

                

              

              
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, facilis laudantium excepturi provident, dolorum explicabo, voluptatum nihil fugiat nisi exercitationem atque eveniet deleniti porro sunt impedit consectetur animi. Mollitia voluptatem tempore iusto saepe vel. Odio laborum voluptatibus eos placeat ex inventore deserunt alias ea modi nam totam quidem nisi iure corrupti debitis nemo magnam quo ratione asperiores architecto, esse natus sed repellat sit. Iure quisquam magni hic quod eveniet? Pariatur ipsa cupiditate facilis maiores mollitia earum reiciendis perspiciatis blanditiis ducimus dignissimos? Eveniet explicabo eum dolore architecto suscipit quasi eaque soluta, ullam deserunt officia maxime ea asperiores, ipsam ratione maiores vitae pariatur praesentium neque culpa ducimus saepe cum rem. Laudantium voluptates minus culpa non tenetur architecto deleniti sunt vero sint, vitae maiores iste ipsum, fuga nulla reiciendis molestias, ea debitis. Doloremque vitae placeat voluptatibus voluptate quos atque, impedit odit reprehenderit inventore quidem voluptatum facilis doloribus fugit recusandae illum molestiae! Iusto, esse!

            

            

              

            

          

          
Third the with

          

            

              
Open version

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
09 87 67 54 76ORFree call back

                

              

              
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, facilis laudantium excepturi provident, dolorum explicabo, voluptatum nihil fugiat nisi exercitationem atque eveniet deleniti porro sunt impedit consectetur animi. Mollitia voluptatem tempore iusto saepe vel. Odio laborum voluptatibus eos placeat ex inventore deserunt alias ea modi nam totam quidem nisi iure corrupti debitis nemo magnam quo ratione asperiores architecto, esse natus sed repellat sit. Iure quisquam magni hic quod eveniet? Pariatur ipsa cupiditate facilis maiores mollitia earum reiciendis perspiciatis blanditiis ducimus dignissimos? Eveniet explicabo eum dolore architecto suscipit quasi eaque soluta, ullam deserunt officia maxime ea asperiores, ipsam ratione maiores vitae pariatur praesentium neque culpa ducimus saepe cum rem. Laudantium voluptates minus culpa non tenetur architecto deleniti sunt vero sint, vitae maiores iste ipsum, fuga nulla reiciendis molestias, ea debitis. Doloremque vitae placeat voluptatibus voluptate quos atque, impedit odit reprehenderit inventore quidem voluptatum facilis doloribus fugit recusandae illum molestiae! Iusto, esse!

              
Closed version

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque aliquam unde impedit similique delectus, voluptatibus.

                  

                    

                      

                            
                          
                            
                          

                      

                      

                      

                    

                  

                

              

              
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, facilis laudantium excepturi provident, dolorum explicabo, voluptatum nihil fugiat nisi exercitationem atque eveniet deleniti porro sunt impedit consectetur animi. Mollitia voluptatem tempore iusto saepe vel. Odio laborum voluptatibus eos placeat ex inventore deserunt alias ea modi nam totam quidem nisi iure corrupti debitis nemo magnam quo ratione asperiores architecto, esse natus sed repellat sit. Iure quisquam magni hic quod eveniet? Pariatur ipsa cupiditate facilis maiores mollitia earum reiciendis perspiciatis blanditiis ducimus dignissimos? Eveniet explicabo eum dolore architecto suscipit quasi eaque soluta, ullam deserunt officia maxime ea asperiores, ipsam ratione maiores vitae pariatur praesentium neque culpa ducimus saepe cum rem. Laudantium voluptates minus culpa non tenetur architecto deleniti sunt vero sint, vitae maiores iste ipsum, fuga nulla reiciendis molestias, ea debitis. Doloremque vitae placeat voluptatibus voluptate quos atque, impedit odit reprehenderit inventore quidem voluptatum facilis doloribus fugit recusandae illum molestiae! Iusto, esse!

            

            

              

            

          

          
Background & border colors

          

            

              
Blue version

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
09 87 67 54 76ORFree call back

                

              

              
Light blue version

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
09 87 67 54 76ORFree call back

                

              

              
Blue border version

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
09 87 67 54 76ORFree call back

                

              

            

            

              

            

            

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Image Variants

          

            

              
Energy & Telecom call

              

                
Energy Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
09 87 67 54 76ORFree call back

                

              

              
Online subscription Telecom

              

                
Energy Call

                
Direct EnergieOnline subscription

              

              
Propane call

              

                
Propane Call

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
09 87 67 54 76ORFree call back

                

              

              
Comparator

              

                
Comparator

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  

                    

                      

                    

                  

                

              

              
Group purchases

              

                
Group purchases

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
I subscribeKnow more

                

              

              
Domotic call

              

                
Domotic

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
09 87 67 54 76ORFree call back

                

              

              
Moving in/out

              

                
Moving in/out

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam debitis minus officiis magni.

                  
09 87 67 54 76ORFree call back

                

              

              
Invoices

              

                
Invoices

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam.

                  
Text goes here

                

              

              
Cancellation

              

                
Cancellation

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam.

                  
Text goes here

                

              

              
Link to an article

              

                
Cancellation

                

                  
Title goes here

                  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint minima quisquam.

                  
Text goes here

                

              

            

            

              

            

            

              
Lazy Loading: If lazy loading is activated, you should replace the src="..." by data-src="..." attribute.

            

          

          
Tooltip

          

            

              
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Aperiam, tenetur.

            

            

              

            

            

              
Tooltip can be added to any tag of your choice.

              
To change the content of the tooltip, you have to edit the title attribute.

              
Caution! Don't forget to add the tabindex="0"  or the tooltip will not work.