Selectra Layout
  • Classes (MEP)
  • Blocks (Selectra Yaml)
  • Icons list
  • Charts

Layout Blocks (Selectra Yaml)

  • Heroes / Banners
  • Hero-btn
  • Hero--comparator
  • Hero--cta-cards
  • Hero--background
  • Hero--dropdown
  • Hero--comparator v2-img
  • Hero--comparator v2-text
  • Hero--gradient
  • Hero--hn-cards
  • Hero--media
  • Hero--product
  • Hero--mistletoe
  • Hero--providers-list
  • Hero--video
  • Banner--callback
  • Banner--map
  • Banner--optional-img
  • Banner--prov-cta
  • Banner--trust
  • URL-specific
  • Article-list--home
  • Article-list--press
  • Versus Page
  • Versus--card-prod
  • Versus--comments
  • Versus--list-icons
  • Versus--list
  • Versus--prices
  • Versus--pros-cons
  • Versus--reviews
  • Versus--contact
  • Benefits
  • Benefits--bg
  • Benefits--list
  • Benefits--media
  • Card--banner
  • Cards--articles
  • Cards--btn-grp
  • Cards--comparative
  • Cards--cta
  • Cards--filter
  • Cards--icon
  • Cards--image
  • Cards--image-cta
  • Cards--info-ext
  • Cards--link
  • Cards--main
  • Cards--position
  • Cards--product
  • Cards--slider
  • Cards--steps
  • Comparator-cta
  • Contact
  • Contact--cta
  • Contact--complex
  • Contact--provider
  • Cta
  • Faq
  • Iframe
  • Image--2-cols
  • Image--aside
  • Links-list
  • Numbers
  • Process
  • Process--horizontal
  • Process--image
  • Providers
  • Providers--list
  • Providers--static
  • Sat-customers
  • Sat-cust--dynamic
  • Share
  • Small-print
  • Text--img-altern
  • Text--numbers

Hero--background ⬇ (click to see options)

Variable name Type Required Amount Description
background ⤵ Object Yes 1 Config for the image on hero's background.
 background.image_url String Yes 1 Content of the src attribute of hero's background image.
 background.image_alt String Yes 1 Content of the alt attribute of hero's background image.
logos ⤵ Object No 0 or 2 Config of each logo image. Expected to be an amount between 0 and 2.
 logos.image_url String Yes 1 Content of the src attribute of each logo displayed.
 logos.image_alt String Yes 1 Content of the alt attribute of each logo displayed.
logo_selectra ⤵ Object No 0 or 1 Config of Selectra's logo image (will be a bit wider than the others).
 logo_selectra.image_url String No 0 or 1 Content of the src attribute of Selectra's logo.
 logo_selectra.image_alt String No 0 or 1 Content of the alt attribute of Selectra's logo.
title String Yes 1 Content of the hero's title, in a <h1> tag.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h1.
subtitle String No 0 or 1 Content of the hero's subtitle, in a <p> tag.
subheading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is p.
Énergies Solidaires
Logo Ilek
Logo Ilek
Logo Selectra

Lorem ipsum dolor amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis mauris, malesuada consectetur nibh tristique, luctus finibus enim. Suspendisse in tortor vitae enim lobortis dignissim sit amet sed ante


Hero-btn ⬇ (click to see options)

Variable name Type Required Amount Description
header String No 0 or 1 The first line of text appearing in smaller and secondary color at the top. It's part of the heading.
title_first String No 0 or 1 The first part of the title, not highlighted.
title_highlighted String No 0 or 1 The highlighted part of the title.
title_second String No 0 or 1 The last part of the title, after the highlighted text.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Default is h1.
money String No 0 or 1 Choose between euro or yen, and the background img will change. By default is euro
button_help ⤵ Object No 0 or 1 Config for the optional button-help at the end of the block's title.
 button_help.title String Yes 1 Text to be displayed on hover.
 button_help.typeText Boolean Yes 1 Set as true if you want to display text rather than the "info" icon.
 button_help.text String Yes 1 The text to be displayed as button-help. Required only if typeText is true.
button ⤵ Object No 0 or 1 Config for the button at the bottom of the block.
 button.url String Yes 1 The content of the href attribute of the button.
 button.extra-attributes String No 0 or 1 Optional extra attributes you may need to apply to the button, like target="_blank" rel="noopener".
 button.icon_left String No 0 or 1 Optional id of the icon to be displayed at the left of the button. You also can add flags adding flag name ( flag-es ) for example.
 button.text String Yes 1 Text to be displayed in the button.
 button.icon_right String No 0 or 1 Optional id of the icon to be displayed at the right of the button. You also can add flags adding flag name ( flag-es ) for example.
 button.big_text Boolean No 0 or 1 Optional. Put true if you want a bigger text in the button. If not, delete the variable or set it false

Electricité / GazEconomisez jusqu'à 400€ par an sur votre facture d'énergie

Connaître mes économies en 1 min

Hero--comparator ⬇ (click to see options)

Variable name Type Required Amount Description
heading_title String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h1.
title String Yes 1 The title of your block.
heading_subtitle String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
subtitle String No 0 or 1 The subtitle of your block.
buttons ⤵ Array of objects Yes 1 Config for the buttons under subtitle. May contain between 1 and 3 buttons.
 buttons[i].icon String Yes 1 Id of the icon (from the sprite) to be displayed on the left of the button. You also can add flags adding flag name ( flag-es ) for example.
 buttons[i].title String Yes 1 The title of the button (small text on top).
 buttons[i].label String Yes 1 The label of the button (bigger text on the bottom).
 buttons[i].href String Yes 1 The content of the href attribute of the button itself.
 buttons[i].arrow Boolean No 0 or 1 Put false if you do not want to see the arrow in the button. By default is "true".
 buttons[i].extra_attributes String Yes 1 Extra attributes for the link, such as target="_blank" rel="noopener".
sub_text String Yes 1 Content of the text under the buttons. RawHTML allowed.
image ⤵ Object Yes 1 Config for the image at the right of the hero.
 image.url String Yes 1 The location of the image to be displayed. Preferably an svg file.
 image.alt String Yes 1 The alternative text of your image.
button_help ⤵ Object Yes 1 Config of the btn-help at the end of the sub_text.
 button_help.title String Yes 1 Text that will be displayed on hover. Raw HTML is allowed.
 button_help.title String Yes 1 Config of the btn-help at the end of the sub_text.
 button_help.typeText Boolean Yes 1 If true, the "info" icon will disappear in favor of the text you provide in the next variable text.
 button_help.text String Yes 1 Content of the hoverable text that can replace the "info" icon in button_help.

Comparateur d’énergie

Comparez les fournisseurs et trouvez la meilleure offre d’énergie en 5 min !

ComparaisonÉlectricité
ComparaisonGaz
ComparaisonÉlec + Gaz
Vous pouvez aussi nous appeler au 09 73 72 73 00 ou vous faire rappeler gratuitement
bulb

Hero--comparator-v2-img ⬇ (click to see options)

Variable name Type Required Amount Description
heading_pretitle String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h1.
pretitle String No 0 or 1 The pretitle of your block.
heading_title String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is p.
title String No 0 or 1 The title of your block.
heading_subtitle String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is p.
subtitle String No 0 or 1 The subtitle of your block. You can add here HTML code.
cta ⤵ Object Yes 1 Config for the CTA button. If you do not fill the LINK, CTA button will not appear.
 cta.text String Yes 1 Text in the CTA Button
 cta.link String No 0 or 1 The link of the button (if you do not fill the LINK, CTA button will not appear).
 cta.extra_attributes String No 0 or 1 Extra attributes for the cta, such as target="_blank" rel="noopener".
 cta.icon String No 0 or 1 Id of the icon (from the sprite) to be displayed on the button's content. You also can add flags adding flag name ( flag-es ) for example.
 cta.icon_position String No 0 or 1 You can choose between left or right.
star_rating ⤵ Object Yes 1 Config for the star_rating.
 star_rating.average Number Yes 1 Average of the score. For example: 4.5
 star_rating.num_reviews String Yes 1 Number of votes.
 star_rating.link_reviews String No 0 or 1 Optional link of reviews.
 star_rating.extra_attributes String No 0 or 1 Extra attributes for the cta, such as target="_blank" rel="noopener".
img ⤵ Object Yes 1 Config of the images.
 img.alt String Yes 1 Alternative text for Img.
 img.type String No 0 or 1 You can choose betweenenergy (to use energy images), or insurance ( to use insurance images). but if you want to add your own custom images, delete this variable and add the source images in the next variables. PS. If you add "energy" or "insurance" type, you don't have to add source images.
 img.mobile ⤵ Object Yes 1 Config for IMG Mobile size
  img.mobile.src String Yes 1 Source for Img in mobile.
 img.tablet ⤵ Object Yes 1 Config for Img tablet size
  img.tablet.src String Yes 1 Source for Img in tablet.
 img.desktop ⤵ Object Yes 1 Config for Img desktop size
  img.desktop.src String Yes 1 Source for Img in desktop.
reassurance ⤵ Object Yes 1 Config of the reassurance element.
 reassurance.text_1 String Yes 1 Text 1. Raw HTML is allowed.
 reassurance.text_2 String No 0 or 1 Text 2. Optional. Raw HTML is allowed.
 reassurance.text_3 String No 0 or 1 Text 3. Optional. Raw HTML is allowed.

Comparateur électricité / comparateur gaz

Augmentez votre pouvoir d'achat, agissez sur vos factures d’énergie

Les ménages français perdent en moyenne200€/an à rester chez le même fournisseur, ne faites pas comme eux.

Comparer en 5 min
4.8/51956 votes
alt text
Service100% gratuit
Toutes les offres du marché
Démarchesimple et sans tracas

Hero--comparator-v2-text ⬇ (click to see options)

Variable name Type Required Amount Description
heading_pretitle String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h1.
pretitle String No 0 or 1 The pretitle of your block.
heading_title String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is p.
title String No 0 or 1 The title of your block.
heading_subtitle String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is p.
subtitle String No 0 or 1 The subtitle of your block. You can add here HTML code.
cta ⤵ Object Yes 1 Config for the CTA button. If you do not fill the LINK, CTA button will not appear.
 cta.text String Yes 1 Text in the CTA Button
 cta.link String No 0 or 1 The link of the button (if you do not fill the LINK, CTA button will not appear).
 cta.extra_attributes String No 0 or 1 Extra attributes for the cta, such as target="_blank" rel="noopener".
 cta.icon String No 0 or 1 Id of the icon (from the sprite) to be displayed on the button's content. You also can add flags adding flag name ( flag-es ) for example.
 cta.icon_position String No 0 or 1 You can choose between left or right.
star_rating ⤵ Object Yes 1 Config for the star_rating.
 star_rating.average Number Yes 1 Average of the score. For example: 4.5
 star_rating.num_reviews String Yes 1 Number of votes.
 star_rating.link_reviews String No 0 or 1 Optional link of reviews.
 star_rating.extra_attributes String No 0 or 1 Extra attributes for the cta, such as target="_blank" rel="noopener".
reassurance ⤵ Object Yes 1 Config of the reassurance element.
 reassurance.text_1 String Yes 1 Text 1. Raw HTML is allowed.
 reassurance.text_2 String No 0 or 1 Text 2. Optional. Raw HTML is allowed.
 reassurance.text_3 String No 0 or 1 Text 3. Optional. Raw HTML is allowed.

Comparateur électricité / comparateur gaz

Augmentez votre pouvoir d'achat, agissez sur vos factures d’énergie

Les ménages français perdent en moyenne200€/an à rester chez le même fournisseur, ne faites pas comme eux.

Comparer en 5 min
4.8/51956 votes
Service100% gratuit
Toutes les offres du marché
Démarchesimple et sans tracas

Hero--cta-cards ⬇ (click to see options)

Variable name Type Required Amount Description
title String Yes 1 Content of the bigger heading, which will be displayed in a p tag. Raw HTML allowed.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is p.
subtitle String No 0 or 1 Content of the subtitle, which will be displayed in a h1 tag for SEO purposes. Raw HTML allowed.
subheading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h1.
without_image Boolean No 0 or 1 If you don't want to see the background image, put this variable true. By default is false.
cta ⤵ Object Yes 1 Config for the CTA button under subtitle.
 cta.url String No 0 or 1 Content of the href attribute of hero's CTA. If you don't fill it you won't see the CTA button.
 cta.attributes String No 0 or 1 Extra attributes for the link, such as target="_blank" rel="noopener".
 cta.text String Yes 1 Text that will be displayed inside of the button.
 cta.color String No 0 or 1 Color of the cta button. You can choose between primary, secondary, ternary, warning, danger, neutral or success. By default is secondary
 cta.classes String Yes 1 Extra classes to be applied to the button, such as btn--big-text if the button contains a number, or btn--outline for example.
 cta.icon_left String No 0 or 1 Id of the icon (from the sprite) to be displayed on the left of the button's content. You also can add flags adding flag name ( flag-es ) for example.
 cta.icon_right String No 0 or 1 Id of the icon (from the sprite) to be displayed on the right of the button's content. You also can add flags adding flag name ( flag-es ) for example.
card_left ⤵ Object Yes 1 Config of the left card.
 card_left.title String Yes 1 Title of the left card. RawHTML allowed.
 card_left.paragraph String No 0 or 1 Description of the left card. RawHTML allowed.
 card_left.list ⤵ Array of objects No 0 or 1 Config for the optional checklist under the card's description.
  card_left.list[i].url String No 0 or more Content of the href attribute of the link on item nºi of the list. If you don't fill it, you're going to have an span instead of an a
  card_left.list[i].title String No 0 or more Visible text of the item nºi of the list.
 card_left.marquee ⤵ Object No 0 or 1 Config of card_left's marquee.
  card_left.marquee.title String No 0 or 1 Text displayed right before the marquee.
  card_left.marquee.list ⤵ Array of objects No 0 or more Config of the list of images displayed in the marquee.
   card_left.marquee.list[j].agrippa_image_id String No 0 or 1 Id of the image nº j to be used through agrippa_image(id, marquee) function.
   card_left.marquee.list[j].url String No 0 or 1 Url of the image nºj of the marquee.
   card_left.marquee.list[j].alt String No 0 or 1 Alternative text of the image nºj of the marquee.
  card_left.marquee.more ⤵ Object No 0 or 1 Configuration for the button showed on hover over the marquee, intended to show all the providers.
   card_left.marquee.more.text String No 0 or 1 Content of the button "show more".
   card_left.marquee.more.url String No 0 or 1 Content of the href attribute of the button "show more".
 card_left.cta ⤵ Object Yes 1 Config of the button at the bottom of the card.
  card_left.cta.text String Yes 1 Text displayed inside the button.
  card_left.cta.url String No 0 or 1 Content of the href attribute of the button.
  card_left.cta.modal String No 0 or 1 ID of the modal you want to add instead of a normal link.
card_right ⤵ Object Yes 1 Config of the right card.
 card_right.title String Yes 1 Title of the right card. RawHTML allowed.
 card_right.paragraph String No 0 or 1 Description of the right card. RawHTML allowed.
 card_right.list ⤵ Array of objects No 0 or 1 Config for the optional checklist under the card's description.
  card_right.list[k].url String No 0 or more Content of the href attribute of the link on item nºi of the list. If you don't fill it, you're going to have an span instead of an a
  card_right.list[k].title String No 0 or more Visible text of the item nºi of the list.
 card_right.marquee ⤵ Object No 0 or 1 Config of card_right's marquee.
  card_right.marquee.title String No 0 or 1 Text displayed right before the marquee.
  card_right.marquee.list ⤵ Array of objects No 0 or more Config of the list of images displayed in the marquee.
   card_right.marquee.list[l].agrippa_image_id String No 0 or 1 Id of the image nº l to be used through agrippa_image(id, marquee) function.
   card_right.marquee.list[l].url String No 0 or 1 Url of the image nºl of the marquee.
   card_right.marquee.list[l].alt String No 0 or 1 Alternative text of the image nºl of the marquee.
  card_right.marquee.more ⤵ Object No 0 or 1 Configuration for the button showed on hover over the marquee, intended to show all the providers.
   card_right.marquee.more.text String No 0 or 1 Content of the button "show more".
   card_right.marquee.more.url String No 0 or 1 Content of the href attribute of the button "show more".
 card_right.cta ⤵ Object Yes 1 Config of the button at the bottom of the card.
  card_right.cta.text String Yes 1 Text displayed inside the button.
  card_right.cta.url String No 0 or 1 Content of the href attribute of the button.
  card_right.cta.modal String No 0 or 1 ID of the modal you want to add instead of a normal link.
banner ⤵ Object No 0 or 1 Config for the optional banner under the two main cards. Note that on mobile, the banner is displayed before those two main cards.
 banner.title String No 0 or 1 Title of the banner's card. It will be visible only on mobile version. It will be visible only on mobile version. If you don't fill it nor description you will see in mobile the img.
 banner.description String No 0 or 1 Description of the banner's card. It will be visible only on mobile version. It will be visible only on mobile version. If you don't fill it nor title you will see in mobile the img.
 banner.link String No 0 or 1 Content of the href attribute of the card.
 banner.button_text String No 0 or 1 Text encouraging the user to click. On mobile, it will be displayed as a one-item list under the description. On desktop, it will be a button showed on hover over the banner.
 banner.image_url String No 0 or 1 Url of the image to be displayed on the desktop version of the banner. That image has to be designed specially for this purpose, preferably in svg format.
 banner.image_alt String No 0 or 1 Alternative text of the banner's image.
cards ⤵ Array of objects No 0 or more, ideally 4 Config for the small cards (card--cta) at the end of the component.
 cards[m].title String No 0 or 1 Title of the card nºm.
 cards[m].paragraph String No 0 or 1 Description of the card nºm.
 cards[m].cta ⤵ Array of objects No 0 or more Config for the CTAs of the card. On mobile they are displayed as a list under the description, on desktop they are showed on hover.
  cards[m].cta[n].link String No 0 or 1 Content of the href attribute of the CTA nºn.
  cards[m].cta[n].text String No 0 or 1 Text of the CTA nºn.
  cards[m].cta[n].icon ⤵ Object No 0 or 1 Config for the icon inside CTA nºn.
   cards[m].cta[n].icon.position String No 0 or 1 Position of the icon, can be left or right.
   cards[m].cta[n].icon.name String No 0 or 1 Id of the icon (from the sprite) to be displayed on the right of the button's content. You also can add flags adding flag name ( flag-es ) for example.
   cards[m].cta[n].icon.extra_class String No 0 or 1 Set an additional CSS class for the icon, for example 270 for it to be rotated 270º clockwise (useful for arrow icons).
 cards[m].footer ⤵ Object Yes 1 Config for the image at the bottom of the card.
  cards[m].footer_image.url String Yes 1 Url of the image to be displayed. Has to be designed for this very purpose, in svg format.
  cards[m].footer_image.alt String Yes 1 Alternative text of the footer image.

Lorem Ipsum Dolor ?

Phasellus velit dolor eget quam quis sodales ultricies lacus. Duis turpis mauris, malesuada consectetur nibh tristique, luctus finibus enim.

06 66 66 66 66

Nemo enim ipsam quis nostrum

Excepteur sint occaecat cupidatat non proident

  • Quis autem vel eum iure reprehenderit
  • Unt in culpa qui officia deserunt

Sed do eiusmod:

  • Logo Engie
  • Logo Lampiris
Beatae vitae dicta
Exercitationem ullam

Ut enim ad minim veniam

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium

  • Quis autem vel eum iure reprehenderit
  • Unt in culpa qui officia deserunt

Sed do eiusmod:

  • Logo Alterna
  • Logo EDF
Beatae vitae dicta
Exercitationem ullam

Phasellus velit dolor

Excepteur sint occaecat cupidatat non proident voluptatem accusantium doloremque laudantium

Lorem Ipsum Lorem
Excepteur

Phasellus velit

Excepteur sint occaecat cupidatat non proident voluptatem accusantium doloremque laudantium

  • Excepteur
  • Excepteur
insurance
Excepteur sintCupidatat

Phasellus velit

Sunt in culpa qui officia deserunt mollit anim id est laborum

  • Ut enim
  • Cupidatat
finance
Duis turpis mauris

Phasellus velit

Excepteur sint occaecat cupidatat non proident voluptatem accusantium doloremque laudantium

  • Excepteur
  • Cupidatat
domotic
Excepteur sintCupidatat

Phasellus velit

Sunt in culpa qui officia deserunt mollit anim id est laborum

  • Ut enim
  • Cupidatat
propane-butane

Hero--dropdown ⬇ (click to see options)

Variable name Type Required Amount Description
title String Yes 1 The content for the heading of this block.
heading_title String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Default is h1.
img_bg String No 0 or 1 Background image. You can choose between "plants", "keys" or "documents". By defauly is "documents"
img_top_dropdown String No 0 or 1 Image source before dropdown. It is optional. You can delete the variable and you will not see any image.
img_top_dropdown_alt String No 0 or 1 Alternative text for the image before dropdown.
title_dropdown String Yes 1 Dropdown title. This title appears inside the card.
heading_title_dropdown String Yes 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Default is h3.
btn_dropdown String Yes 1 Text that you see in dropdown before open it.
title_blind_people String Yes 1 Title for blind people. Describe the action for the dropwdown. This is not visible.
list ⤵ Array of objects Yes 1 Config for the options inside the dropdown.
 list[i].text String Yes 1 Text of the option number i
 list[i].link String Yes 1 Link of the option number i . You can add a pdf adding rout-to-pdf.pdf
 list[i].icon String Yes 1 Id of the icon (from the sprite) to be displayed on the option nº i. It is optional, if you delete this variable, any icon is going to appear. You also can add flags adding flag name ( flag-es ) for example.
 list[i].icon_position String Yes 1 Position of the icon. You can choose between "left" and "right".
 list[i].custom_attr String No 1 Attributes by default are: target="_blank" rel="nofollow noopener" if you fill this variable you will replace these attributes by attributes you want. If not, you will see the default attr.

Title for hero dropdown

Title for for hero dropdown

dropdown before img alt

Title for dropdown element

Title for blind people
  • First option
  • Second option
  • Third option

Hero--gradient ⬇ (click to see options)

Note: The image and the gradient on the hero's background are not customizable for now.

Variable name Type Required Amount Description
title String No 0 or 1 The content for the heading of this block.
heading_title String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h1.
card_1 ⤵ Object Yes 1 Config for the left card.
 card_1.title String Yes 1 Title of the card, displayed in a <h2> tag.
card_1.heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
 card_1.button_text String Yes 1 Text displayed on the button.
 card_1.button_url String Yes 1 Content for the href attribute of the link.
 card_1.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
card_2 ⤵ Object Yes 1 Config for the right card.
 card_2.title String Yes 1 Title of the card, displayed in a <h2> tag.
card_2_heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
 card_2.button_text String Yes 1 Text displayed on the button.
 card_2.button_url String Yes 1 Content for the href attribute of the link.
 card_2.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"

Title

Lorem ipsum dolor amet

Quisque dapibus

Phasellus velit dolor, vulputate eget quam

Curabitur

Hero--hn-cards ⬇ (click to see options)

Variable name Type Required Amount Description
img_src String No 0 or 1 If you want to change the default background img, add here the path of your img. IMPORTANT!! The img size HAS to be 1440x480 px
img_alt String No 0 or 1 If you have added a custom background img, here you can add the alternative img.
h1 String No 0 or 1 Title of the hero, displayed in a <h1> tag by default. Raw HTML is allowed.
first_heading String No 0 or 1 The HTML tag for the first title (for example h3) to be chosen depending on your purposes regarding SEO. Required only if h1 is not empty. Default is h1.
h2 String No 0 or 1 Second title of the hero, displayed in a <h2> tag by default. Raw HTML is allowed.
second_heading String No 0 or 1 The HTML tag for the second title (for example h3) to be chosen depending on your purposes regarding SEO. Required only if h2 is not empty. Default is h2.
btn_help Boolean Yes 1 Specifies wether a hoverable "button help" is required or not.
tooltip_text String No 0 or 1 Required only if btn_help is true. Text to be displayed on the tooltip on "button help"'s hover.
card_1 ⤵ Object Yes 1 Config for the first card.
 card_1.title String Yes 1 Title for the first card.
 card_1.title_tag String No 0 or 1 The HTML tag for the card 1 title (for example h3) to be chosen depending on your purposes regarding SEO. Required only if h2 is not empty. Default is h2.
 card_1.button_url String Yes 1 URL for the button in first card.
 card_1.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 card_1.button_text String Yes 1 Text for the button in first card.
card_2 ⤵ Object Yes 1 Config for the second card.
 card_2.title String Yes 1 Title for the second card.
 card_2.title_tag String No 0 or 1 The HTML tag for the card 2 title (for example h3) to be chosen depending on your purposes regarding SEO. Required only if h2 is not empty. Default is h2.
 card_2.button_url String Yes 1 URL for the button in second card.
 card_2.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 card_2.button_text String Yes 1 Text for the button in second card.

Title Hero

Subtitle Hero

Card title 1

Button card 1

Card title 2

Button card 2

Hero--media ⬇ (click to see options)

Variable name Type Required Amount Description
logos ⤵ Array of objects No 1 Config for the logos on top.
 logos.url String No 0 or more Source of the logo image.
 logos.alt String No 0 or more Alternative text for the logo image.
title String No 0 or 1 Title of the hero, displayed in a <h1> tag. Raw HTML is allowed.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h1.
subtitle String No 0 or 1 Subitle of the hero, displayed in a <p> tag by default. Raw HTML is allowed.
subheading String No 0 or 1 The HTML tag for the subtitle (for example h3) to be chosen depending on your purposes regarding SEO. Required only if subtitle is not empty. Default is p.
center_text Boolean No 0 or 1 If you add false the title and subtitle will be centered in mobile and aligned to left in tablet and desktop. If you put true or delete the variable, the title and subtitle will be centered.
checklist ⤵ Array of objects Yes 1 Config for the checklist.
 checklist.item_text String Yes 1 or more Text for the checklist item. Raw HTML is allowed.
video Boolean Yes 1 If true, displays the video player for specified video id.
video_id String No 1 Specifies the id of the video to be displayed. Required only if video is true.
video_img_src String No 1 Specifies the source of the image to be displayed if you don't want to use the default cover image. Required only if video is true.
image ⤵ Object No 1 Config for the image optionally displayed instead of the video. Required if video is false.
 image.url String No 1 Source of the image to be displayed.
 image.alt String No 1 Alternative text of the image to be displayed.
button_1 ⤵ Object Yes 1 Config for the left button.
 button_1.url String Yes 1 Content of the href attribute of the button.
 button_1.text String Yes 1 Text displayed inside the button. If you don't fill it, the button won't appear.
 button_1.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 button_1.icon ⤵ Object No 1 Config for the button's icon.
  button_1.icon.position String No 1 Set left or right position for the icon.
  button_1.icon.name String No 1 Set the id of the icon to be used. You also can add flags adding flag name ( flag-es ) for example.
  button_1.icon.extra_class String No 0 or 1 Set an additional CSS class for the icon, for example 270 for it to be rotated 270º clockwise (useful for arrow icons).
button_2 ⤵ Object Yes 1 Config for the left button.
 button_2.url String Yes 1 Content of the href attribute of the button.
 button_2.text String Yes 1 Text displayed inside the button. If you don't fill it, the button won't appear.
 button_2.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 button_2.icon ⤵ Object No 1 Config for the button's icon.
  button_2.icon.position String No 1 Set left or right position for the icon.
  button_2.icon.name String No 1 Id of the icon (from the sprite) to be used. You also can add flags adding flag name ( flag-es ) for example.
  button_2.icon.extra_class  String No 1 Set an additional CSS class for the icon, for example 270 for it to be rotated 270º clockwise (useful for arrow icons).
Logo Familles de France
Logo Kovers
Logo Selectra

Phasellus velit dolor eget quam quis
sodales ultricies lacus

This is a subtitle


Vivamus eu

Nunc vehicula

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Luctus finibus enim. Suspendisse in tortor vitae enim lobortis

Sed vitae nunc elementum, porta leo vitae, dapibus orci. Cras vel gravida purus. Vivamus eu nunc vehicula, aliquam turpis et, tempus justo. Morbi quis enim odio.

Offre spéciale COP 23

Vivamus eu

Nunc vehicula

Hero--mistletoe ⬇ (click to see options)

Variable name Type Required Amount Description
title String Yes 1 Title of the hero, displayed in a <h1> tag. Raw HTML is allowed.
heading_title String No 0 or 1 The HTML tag for the heading (for example h2) to be chosen depending on your purposes regarding SEO. Default is h1.
subtitle String Yes 1 Subtitle, displayed in a <p> tag by default. Raw HTML is allowed.
heading_subtitle String No 0 or 1 The HTML tag for the heading subtitle (for example h3) to be chosen depending on your purposes regarding SEO. Default is p.
btn_link String Yes 1 Link for the button.
custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
btn_text String Yes 1 Text for the button.
btn_color String No 0 or 1 Color of the button. You can choose between primary, secondary or ternary.

Prix Selectra du meilleur fournisseur d'énergie

Tous les ans, Selectra récompense les meilleurs fournisseurs, à partir d'éléments objectifs. Le but ? Donner des repères supplémentaires aux consommateurs pour bien choisir !

Découvrir les lauréats 2021

Hero--product ⬇ (click to see options)

Note: The image of the hero's background is not customizable for now.

Variable name Type Required Amount Description
h1 String Yes 1 Content of title, displayed in a <h1> tag. Raw HTML is allowed.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if h1 is not empty. Default is h1.
subtitle String No 0 or 1 Content of subtitle. Raw HTML is allowed.
subheading String Yes 1 The HTML tag for the subheading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if subtitle is not empty. Default is p.
satisfied_customers ⤵ Object Yes 1 Config of the "satisfied customers" block.
 satisfied_customers.title String No 0 or 1 Content of the text displayed right above the stars.
 satisfied_customers.rating String Yes 1 Average rating to be displayed. Has to be a floating point number or an integer.
 satisfied_customers.evaluations String No 0 or 1 Content of the text displayed right after the stars. Raw HTML is allowed.
old_price ⤵ Object No 0 or 1 Config of the optional "old price" in card's header.
 old_price.text String Yes 1 Content of the text displayed right above the stricked number.
 old_price.number String Yes 1 Content of the striked text (old price). Should be a number.
 old_price.unit String Yes 1 Unit of the striked text (old price).
new_price ⤵ Object Yes 1 Config of the "new price" in card's header.
 new_price.text String No 0 or 1 Content of the optional text displayed right above the non-stricked number.
 new_price.number String Yes 1 Content of the non-striked text (new price). Should be a number.
 new_price.unit String Yes 1 Unit of the non-striked text (new price).
card_title String Yes 1 Title of the card
characteristics ⤵ Array of objects Yes 1 Config for the card's checklist
 characteristics.name String Yes 1 or more Text displayed on checklist's item.
button ⤵ Object Yes 1 Config for the button at the bottom of the card.
 button.link String Yes 1 Content for the href attribute of the button's link.
 button.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 button.text String Yes 1 Text displayed inside the button.

Duis turpis mauris, malesuada consectetur

Phasellus velit dolor eget quam quis sodales ultricies lacus

Enim lobortis dignissim sit amet sed ante

4.5/5

Phasellus velit dolor, vulputate eget quam

Da99,99euros / m
Pellentesque11,11euros / m

Quisque dapibus ante sed ligula sag

  • Donec a velit nec
  • Nullam fermentum
  • Cras vel gravida puru

Hero--providers-list ⬇ (click to see options)

Variable name Type Required Amount Description
title String Yes 1 The title of your block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h1.
intro ⤵ Object Yes 1 Config for the introduction text.
 intro.text String Yes 1 Text to be displayed, can be as long as you need.
 intro.seeMore String Yes 1 Content of the "See more" clickable text.
 intro.seeLess String Yes 1 Content of the "See less" clickable text.
 intro.fullwidth Boolean Yes 1 Specify wether the intro text will be full-width or not. Normally, as it's a hero it should be true.
best_providers Object Yes 1 Config for the three "best providers" to be displayed. You can choose not to display it, specifying the next variable to false.
 best_providers.display Boolean Yes 1 Specify wether you want "best providers" to be displayed or not.
 best_providers.subtitle String No 0 or 1 Optional subtitle to be displayed above the "best providers" logos.
 best_providers.subheading String No 0 or 1 The HTML tag for the subheading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if best_providers.subtitle is not empty. Default is p.
 best_providers.link ⤵ Object No 0 or 1 Configuration for the link under "best providers" logos, required only if best_providers.display is true.
  best_providers.link.text String Yes 1 Text to be displayed as a link under the "best providers" logos.
  best_providers.link.url String Yes 1 The content of the href attribute of the link.
 best_providers.providers ⤵ Array of objects Yes 1 Configuration for the "best providers" logos to be displayed.
  best_providers.providers.id Number Yes 3 The provider's id for which you want the logo + name to be displayed.

Liste des fournisseurs d’électricité et de gaz en France en 2020

En plus des fournisseurs historiques EDF et Engie, le marché de l'électricité et du gaz naturel compte aujourd'hui 40 fournisseurs alternatifs de plus petite taille. Chacun se dote d'atouts spécifiques pour conquérir les clients : offres duales, à prix fixe, énergie verte, 100%. En plus des fournisseurs historiques EDF et Engie, le marché de l'électricité et du gaz naturel compte aujourd'hui 40 fournisseurs alternatifs de plus petite taille. Chacun se dote d'atouts spécifiques pour conquérir les clients : offres duales, à prix fixe, énergie verte 100%.

Voir plusVoir moins

Voici les meilleurs fournisseurs 2020

lauriers
logo Ilek

Ilek

lauriers
logo Ilek

Ilek

lauriers
logo Ilek

Ilek

lauriers
En savoir plus sur les prix Selectra

Hero--video ⬇ (click to see options)

Variable name Type Required Amount Description
title String Yes 1 Content of the title, displayed in a <h1> tag. Raw HTML is allowed.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h1.
subtitle String No 0 or 1 Content of the subtitle. Raw HTML is allowed.
subheading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is p.
intro String No 0 or 1 Content of the intro. Raw HTML is allowed.
video_id String Yes 1 Id of the video to be displayed.

Nullam at volutpat tellus!

Phasellus velit dolor eget quam quis sodales ultricies lacus

Integer quis eleifend dolor. Sed vitae nunc elementum, porta leo vitae, dapibus orci.


Banner--callback ⬇ (click to see options)

Variable name Type Required Amount Description
img_src String No 0 or 1 If you want to change the default background img, add here the path of your img. IMPORTANT!! The img size HAS to be 1440x480 px
img_alt String No 0 or 1 If you have added a custom background img, here you can add the alternative img.
title String Yes 1 Content of the title, displayed in a <p> tag. Raw HTML is allowed.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is p.
subtitle String No 0 or 1 Content of the subtitle, displayed in a <p> tag. Raw HTML is allowed.
subheading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO.
btn_left ⤵ Object Yes 1 Config for the left button.
 btn_left.link String Yes 1 Content of the href attribute of the button.
 btn_left.text String Yes 1 Visible content of the button.
 btn_left.icon_left String No 0 or 1 Id of the icon (from the sprite) to be displayed on the left. You also can add flags adding flag name ( flag-es ) for example.
 btn_left.icon_right String No 0 or 1 Id of the icon (from the sprite) to be displayed on the right. You also can add flags adding flag name ( flag-es ) for example.
 btn_left.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
separator String Yes 1 Word separating the two buttons.
btn_right ⤵ Object Yes 1 Config for the left button.
 btn_right.link String Yes 1 Content of the href attribute of the button.
 btn_right.text String Yes 1 Visible content of the button.
 btn_right.icon_left String No 0 or 1 Id of the icon (from the sprite) to be displayed on the left. You also can add flags adding flag name ( flag-es ) for example.
 btn_right.icon_right String No 0 or 1 Id of the icon (from the sprite) to be displayed on the right. You also can add flags adding flag name ( flag-es ) for example.
 btn_right.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
btn_help Boolean Yes 1 Specifies wether a hoverable "button help" is required or not.
tooltip_text String No 0 or 1 Required only if btn_help is true. Text to be displayed on the tooltip on "button help"'s hover.
disclaimer_text String Yes 1 Disclaimer text to be displayed at the bottom of the card. Raw HTML is allowed.

Duis turpis mauris, malesuada consectetur 5 nibutes

Ut enim ad minim veniam, quis nostrud exercitation ullamco

06 66 66 66 66
EU
Lorem Ipsum
Axcepteur - Selintna occaecat cupidatat non proident

Banner--map ⬇ (click to see options)

Variable name Type Required Amount Description
img_src String No 0 or 1 If you want to change the default background img, add here the path of your img. IMPORTANT!! The img size HAS to be 1440x480 px
img_alt String No 0 or 1 If you have added a custom background img, here you can add the alternative img.
title String Yes 1 Content of the title, displayed in a <p> tag. Raw HTML is allowed.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is p.
subtitle String No 0 or 1 Content of the subtitle, displayed in a <p> tag. Raw HTML is allowed.
subheading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO.
cta_title String Yes 1 Content of the title of the CTA button, displayed in a <p> tag. Raw HTML is allowed.
btn ⤵ Object Yes 1 Config for the CTA button.
 btn.link String Yes 1 Content of the href attribute of the button.
 btn.text String Yes 1 Visible content of the button.
 btn.icon_position String Yes 1 Position for the icon in CTA button. You can choose only between left or right
 btn.icon String Yes 1 Id of the icon (from the sprite) to be displayed on the right. You also can add flags adding flag name ( flag-es ) for example.
 btn.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
timetable ⤵ Object Yes 1 Config for the timetable.
 timetable.first String Yes 1 First part of the timetable.
 timetable.second String Yes 1 Second part of the timetable.
benefits ⤵ Object Yes 1 Config for the benefits section.
 benefits.first ⤵ Object Yes 1 Config for the first benefits column.
  benefits.first.icon Object Yes 1 Id of the icon (from the sprite). You also can add flags adding flag name ( flag-es ) for example.
  benefits.first.p Object Yes 1 Content under the benefitd icon, displayed in a <p> tag. Raw HTML is allowed.
 benefits.second ⤵ Object Yes 1 Config for the second benefits column.
  benefits.second.icon Object Yes 1 Id of the icon (from the sprite). You also can add flags adding flag name ( flag-es ) for example.
  benefits.second.p Object Yes 1 Content under the benefitd icon, displayed in a <p> tag. Raw HTML is allowed.
 benefits.third ⤵ Object Yes 1 Config for the third benefits column.
  benefits.third.icon Object Yes 1 Id of the icon (from the sprite). You also can add flags adding flag name ( flag-es ) for example.
  benefits.third.p Object Yes 1 Content under the benefitd icon, displayed in a <p> tag. Raw HTML is allowed.
btn_help Boolean Yes 1 Specifies wether a hoverable "button help" is required or not.
tooltip_text String No 0 or 1 Required only if btn_help is true. Text to be displayed on the tooltip on "button help"'s hover.
disclaimer_text String Yes 1 Disclaimer text to be displayed at the bottom of the card. Raw HTML is allowed.
image ⤵ Object Yes 1 Config for the map image.
 image.url String Yes 1 URL of the map image.
 image.alt String Yes 1 Alternative text of the image.

Duis turpis mauris, malesuada consectetur 5 nibutes

Ut enim ad minim veniam, quis nostrud exercitation ullamco

Dolore eu:

06 66 66 66 66

Lor-Ip 8h-21h ; Dol 8h30-18h30 ;
Am 9h-17h

Excepteur sint occaecat cupidatat non proident

Sunt in culpa qui officia deserunt mollit anim id

Excepteur sint occaecat cupidatat non proident

Axcepteur - Selintna occaecat cupidatat non proident
Non proident

Banner--optional-img ⬇ (click to see options)

Variable name Type Required Amount Description
title String Yes 1 Content of the title.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Default is h1.
subtitle String Yes 1 Content of the subtitle.
subheading String No 0 or 1 The HTML tag for the subheading (for example h3) to be chosen depending on your purposes regarding SEO. Default is p.
with_image Boolean Yes 1 If you want to add an image, put true, if not, put false.
img_src String No 0 or 1 If you have added in variable with_image: true you have to add here the img's source.
img_alt String No 0 or 1 If you have added in variable with_image: true you have to add here the img's alt.

Banner--optional-img With Img

Image background alt

Nos partenaires super titre sur deux lignes

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Banner--optional-img Without Img

Nos partenaires super titre sur deux lignes

Lorem ipsum dolor sit amet, consectetur adipiscing 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.


Banner--provider-cta ⬇ (click to see options)

Variable name Type Required Amount Description
background_pastel Boolean No 0 or 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
title String Yes 1 Content of the title.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is p.
img ⤵ Object Yes 1 Config for the image.
 img.name String No 0 or 1 Name of the image. You can choose between "binoculars", "graph" or "screen".
 img.alt String Yes 1 Alt text for the image.
 img.src String No 0 or 1 If you want to choose your own image, add here the path of the image. Image max width has to be 230px.
display_logo Boolean No 0 or 1 If false, there won't be any logo above the CTA. Else, you'll have to provide config for the image except if you are on a provider page and you want to use that provider's logo.
logo ⤵ Object Yes 1 Config for the logo.
 logo.id Number No* 0 or 1 The ID of the image you want to be displayed. Leave empty if you are on a "provider" content type and you want to use that provider's logo.
 logo.alt String No 0 or 1 Required only if you specify the logo.id.
button_first ⤵ Object Yes 1 Config for the first button.
 button_first.modal_name String No 0 or 1 If you want to add a modal link, add here the modal name. If you don't want a modal link, don't fill it.
 button_first.link String Yes 1 Content of the href attribute.
 button_first.custom_attr String No 0 or 1 If the link is not a modal, you can add custom attributes. Like target="_blank" rel="nofollow"
 button_first.tooltip String No 0 or 1 Text inside tooltip in first button in mobile and tablets. Only works if first button is a modal link. If you don't fill it you won't see the tooltip in mobile version.
 button_first.color String Yes 1 First button color. It can be "primary or "secondary".
 button_first.outline Boolean Yes 1 Put true if you want the have the color "outlined". Turn to false if not.
 button_first.icon_position String Yes 1 The icon position. You can choose between "left" or "right"
 button_first.icon_name String Yes 1 The icon name. For example: "smartphone".Name of the icon (from the sprite). You also can add flags adding flag name ( flag-es ) for example.
 button_first.text String Yes 1 Text inside first button.
button_second ⤵ Object Yes 1 Config for the second button.
 button_second.modal_name String No 0 or 1 If you want to add a modal link, add here the modal name. If you don't want a modal link, don't fill it.
 button_second.link String Yes 1 Content of the href attribute. If it's a phone, add "tel: " before. For example: "tel:+33972737200"
 button_second.cusotm_attr String No 0 or 1 If the link is not a modal, you can add custom attributes. Like target="_blank" rel="nofollow"
 button_second.tooltip String No 0 or 1 Text inside tooltip in second button in mobile and tablets. Only works if second button is a modal link. If you don't fill it you won't see the tooltip in mobile version.
 button_second.color String Yes 1 Second button color. It can be "primary or "secondary".
 button_second.outline Boolean Yes 1 Put true if you want the have the color "outlined". Turn to false if not.
 button_second.icon_position String Yes 1 The icon position. You can choose between "left" or "right"
 button_second.icon_name String Yes 1 The icon name. For example: "arrow-curved-right".Name of the icon (from the sprite). You also can add flags adding flag name ( flag-es ) for example.
 button_second.text String Yes 1 Text inside second button.
ad_tooltip ⤵ Object No 0 or 1 Config for the ad tooltip.
 ad_tooltip.text_outside String Yes 1 Text with tooltip.
 ad_tooltip.text_inside String No 0 or 1 Text inside tooltip (when you put your mouse). If you not fill text_inside the ad_tooltip is not going to appear.
Banner monetization illustration

Je fais une simulation avec Total Direct Energie

Direct Energie 09 73 72 73 00 Rappel gratuit
Rappel gratuit
Annonce

Banner--trust ⬇ (click to see options)

Variable name Type Required Amount Description
img_src String No 0 or 1 If you want to change the default background img, add here the path of your img. IMPORTANT!! The img size HAS to be 1440x480 px
img_alt String No 0 or 1 If you have added a custom background img, here you can add the alternative img.
title String Yes 1 Content of the title, displayed in a <p> tag. Raw HTML is allowed.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is p.
subtitle String No 0 or 1 Content of the subtitle, displayed in a <p> tag. Raw HTML is allowed.
btn_left ⤵ Object Yes 1 Config for the left button.
 btn_left.link String Yes 1 Content of the href attribute of the button.
 btn_left.cusotm_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 btn_left.text String Yes 1 Visible content of the button.
 btn_left.icon_left String No 0 or 1 Id of the icon (from the sprite) to be displayed on the left. You also can add flags adding flag name ( flag-es ) for example.
 btn_left.icon_right String No 0 or 1 Id of the icon (from the sprite) to be displayed on the right. You also can add flags adding flag name ( flag-es ) for example.
separator String Yes 1 Word separating the two buttons.
btn_right ⤵ Object Yes 1 Config for the left button.
 btn_right.link String Yes 1 Content of the href attribute of the button.
 btn_right.cusotm_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 btn_right.text String Yes 1 Visible content of the button.
 btn_right.icon_left String No 0 or 1 Id of the icon (from the sprite) to be displayed on the left. You also can add flags adding flag name ( flag-es ) for example.
 btn_right.icon_right String No 0 or 1 Id of the icon (from the sprite) to be displayed on the right. You also can add flags adding flag name ( flag-es ) for example.
rating ⤵ Object Yes 1 Config for the rating.
 rating.title String Yes 1 Bigger text at the left of the rating section.
 rating.link String Yes 1 Content of the href attribute wrapping the stars.
 rating.cusotm_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 rating.rate Number Yes 1 Rate given. Use either an integer or a floating-point number (remember to use a dot, not a comma).
 rating.baseline String Yes 1 Text at the right of the stars. Raw HTML is allowed.
benefits ⤵ Object Yes 1 Config for the benefits.
 benefits.first ⤵ Object Yes 1 Config for the first benefit.
  benefits.first.icon String Yes 1 Id of the icon (from the sprite) to be displayed on this benefit. You also can add flags adding flag name ( flag-es ) for example.
  benefits.first.p String Yes 1 Text describing this benefit. Raw HTML is allowed.
 benefits.second ⤵ Object Yes 1 Config for the second benefit.
  benefits.second.icon String Yes 1 Id of the icon (from the sprite) to be displayed on this benefit. You also can add flags adding flag name ( flag-es ) for example.
  benefits.second.p String Yes 1 Text describing this benefit. Raw HTML is allowed.
 benefits.third ⤵ Object Yes 1 Config for the third benefit.
  benefits.third.icon String Yes 1 Id of the icon (from the sprite) to be displayed on this benefit. You also can add flags adding flag name ( flag-es ) for example.
  benefits.third.p String Yes 1 Text describing this benefit. Raw HTML is allowed.
btn_help Boolean Yes 1 Specifies wether a hoverable "button help" is required or not.
tooltip_text String No 0 or 1 Required only if btn_help is true. Text to be displayed on the tooltip on "button help"'s hover.
disclaimer_text String Yes 1 Disclaimer text to be displayed at the bottom of the card. Raw HTML is allowed.

Duis turpis mauris malesuada consectetur a Nibutes

Ut enim ad minim veniam, quis nostrud exercitation ullamco

06 66 66 66 66
EU
Lorem Ipsum

6,7 ipsum Excepteur sint occaecat cupidatat

4.8/5

Duis in 1789 reprehenderit

Excepteur sint occaecat cupidatat non proident

Sunt in culpa qui officia deserunt mollit anim id

Excepteur sint occaecat cupidatat non proident

Axcepteur - Selintna occaecat cupidatat non proident

Article-list--home ⬇ (click to see options)

🔍 Note: This block displays articles dynamically using the agrippa_articles(type, amount) function, which returns a specified amount of articles based on the current url. Therefore, it will only work on homepages and first level urls.

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
sort_enable Boolean No 0 or 1 If true the block will allow sorting the articles, showing an inline menu (right under the title) displaying all the categories and linking to corresponding /category/news page.
articles_type String Yes 1 Must be one of news or guides. It will be passed as the first parameter to the agrippa_articles() function to return one or the other article type.
articles_amount Integer Yes 1 Sets the amount of articles to be returned by the agrippa_articles function. It corresponds to the second parameter to be passed to the function. We recommend using 6 for it to display correctly either with 2 or 3 columns (depending on the device).
more_button_enable Boolean No 0 or 1 If true the block will display a link at the bottom, intended to allow user to see "all articles".
more_button ⤵ Object No 0 or 1 Only needed if more_button_enable is set to true.
 more_button.text String No 0 or 1 The text to be displayed as an anchor to show all articles.
 more_button.url String No 0 or 1 The content of the href attribute of the "Show all articles" button.

Lorem ipsum dolor sit amet

Transition énergétique : quelle place pour le nucléaire ?
image alt
Assurance-18/08/2020

Transition énergétique : quelle place pour le nucléaire ?

Electricité : hausse des tarifs EJP d'EDF en août 2020
image alt
Banque et Finance-18/08/2020

Electricité : hausse des tarifs EJP d'EDF en août 2020

Energies renouvelables : le Ministère de la Transition Energétique publie les chiffres clés
image alt
Déménagement-18/08/2020

Energies renouvelables : le Ministère de la Transition Energétique publie les chiffres clés

Plan de relance de la France : quelle place pour l'écologie et la Transition Energétique ?
image alt
Domotique-18/08/2020

Plan de relance de la France : quelle place pour l'écologie et la Transition Energétique ?

Tarif réglementé du gaz : Augmentation de 0,6% en septembre 2020 par rapport à l’année dernière
image alt
Energie-18/08/2020

Tarif réglementé du gaz : Augmentation de 0,6% en septembre 2020 par rapport à l’année dernière

Chèque énergie 2019 : encore un mois pour les utiliser !
image alt
Telecoms-18/08/2020

Chèque énergie 2019 : encore un mois pour les utiliser !

Voir toutes les actualités

Article-list--press ⬇ (click to see options)

🔍 Note: This block displays articles dynamically using the agrippa_articles() function, which returns a specified amount of articles based on the current url. Therefore, it will only work on the very specific url that you set up as press page.

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
intro String No 0 or 1 The intro for the heading of this component. Raw HTML is allowed.
subheading String No 0 or 1 The HTML tag for the subheadings (for example h4) to be chosen depending on your purposes regarding SEO. Required only if releases_title and articles_title are not empty.
releases_title String No 0 or 1 The first subheading, naming the press releases part.
releases_amount Integer Yes 1 The amount of press releases to be displayed
articles_title String No 0 or 1 The second subheading, naming the press articles part.
articles_amount Integer Yes 1 The amount of press articles to be displayed.
press_releases_link_text String No 0 or 1 The text inside buttons links in press releases. If you don't add it, by default is "Go to article".
press_releases_pdf_text String No 0 or 1 The text inside buttons with pdf link in press releases. If you don't add it, by default is "Press release".
press_articles_link_text String No 0 or 1 The text inside buttons links in press articles. If you don't add it, by default is "Go to article".
press_articles_pdf_text String No 0 or 1 The text inside buttons with pdf link in press articles. If you don't add it, by default is "Press release".

Nos communiqués de presse

Selectra est une start-up née en 2007 sur les bancs de Sciences Po. Loin des projecteurs de la French Tech, l'entreprise est sans doute une des plus belles réussites françaises en termes de croissance sans levée de fonds. En janvier 2020, elle compte plus de 1000 salariés, réalise la moitié de ses 50 millions de chiffre d'affaire à l'étranger et appartient toujours à 100% à ses fondateurs.


Nos communiqués de presse

logo

Description Press Release

See Press Release
logo

Description Press Release

See Press Release
logo

Description Press Release

See Press Release
logo

Description Press Release

See Press Release

Selectra dans les médias

logo

Description article

See article
logo

Description article

See article
logo

Description article

See article
logo

Description article

See article

Benefits ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
plus Boolean Yes 1 If true, will display a icon-plus (from our sprite) between each benefit.
We strongly recommend not to use plus and slider at the same time, as each icon-plus will create one slide.
slider Boolean Yes 1 If true, will turn into a slider on small devices.
We strongly recommend not to use plus and slider at the same time, as each icon-plus will create one slide.
vertical Boolean Yes 1 If true, will display the benefits vertically (recommended when there are more than 3). Else they will be displayed horizontally.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
benefits ⤵ Array of objects Yes 2 or more Config for the benefits of this component.
 benefits[i].icon String No 0 or 1 Id of the icon (from the sprite) to be displayed on the benefit nºi. You also can add flags adding flag name ( flag-es ) for example.
 benefits[i].color String No 0 or 1 Color of the icon to be displayed on the benefit nºi. Can be one of primary, secondary, ternary, success, warning, danger or neutral.
 benefits[i].img_src String No 0 or 1 If you do not want an icon and you prefer an image, add the image'\s path. If you delete the variable img_src you will see the icon.
 benefits[i].img_alt String No 0 or 1 If you add a custom img, the alternative text of the img.
 benefits[i].name String No 0 or 1 Title (highlighted text) of the benefit nºi. Raw HTML is allowed.
 benefits[i].name_tag String No 0 or 1 The HTML tag for the name (for example h3) to be chosen depending on your purposes regarding SEO. Required only if name variable is not empty. Default is h4.
 benefits[i].name_color String No 0 or 1 Color for the title of the benefits nªi. You can choose between "primary", "secondary", "ternary" and "black". By default is "secondary".
 benefits[i].description String No 0 or 1 Description of the benefit nºi. Raw HTML is allowed.
 benefits[i].button ⤵ Object No 1 Config for the optional button at the bottom of the benefit.
  benefits[i].button.url String Yes 1 Content of the href attribute of the button.
  benefits[i].button.extra_attributes String No 1 Extra attributes for your link, such as target="_blank" rel="noopener".
  benefits[i].button.text String Yes 1 Content of the button.
  benefits[i].button.color String No 0 or 1 Color of the button.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

  • Neque porro quisquam est

    Qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore.

  • Ut enim ad minima veniam

    Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat.

  • Lorem ipsum dolor sit amet

    Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.


Benefits--background ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
benefits ⤵ Array of objects Yes 1 Config for the benefits of this component.
 benefits[i].image ⤵ Object Yes 1 Configuration for the image to be displayed on the benefit nºi.
  benefits[i].image.url String Yes 1 Location of the image to be displayed on the benefit nº i. svg format is strongly recommended.
  benefits[i].image.alt String Yes 1 Alternative text of the image.
 benefits[i].description String Yes 1 Description of the benefit nºi. Raw HTML is allowed.
background_image ⤵ Object Yes 1 Config for the background image of this component.
 background_image.url String Yes 1 Location of the image to be displayed on the component's background. svg format is strongly recommended. The size of this img has to be 969x192px
 background_image.alt String Yes 1 Alternative text of the background image.

Magni dolores eos qui ratione
voluptatem ea commodi consequatur
sequi 2 nesciunt.

  • GoodQui dolorem ipsum quia amet
    ea commodi consequatur
    consectetur, adipisci velit.
  • BetterInteger quis eleifend dolor
    ea commodi consequatur
    sed vitae nunc elementum
  • BestNisi ut aliquid ex aequo
    ea commodi consequatur
    vitae nunc elementum sed
Lorem ipsum

Benefits--list ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
withAside Boolean Yes 1 If true, the component will add a class to style it with an aside block. Set it as true for all pages that contain an aside block.
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
title String No 0 or 1 The content for the heading of this block. Raw HTML is allowed.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
list ⤵ Array of objects Yes 1 Config for the list of this component.
 list[i].title String Yes 1 Title of the benefit number i. Raw HTML is allowed.
 list[i].title_heading String No 0 or 1 The HTML tag for the heading for the benefit number i (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
 list[i].icon String No 0 or 1 Id of the icon (from the sprite) to be displayed on the benefit nº i. You also can add flags adding flag name ( flag-es ) for example.
 list[i].img_src String No 0 or 1 If you do not want an icon and you prefer an image, add the image'\s path. If you delete the variable img_src you will see the icon.
 list[i].img_alt String No 0 or 1 If you add a custom img, the alternative text of the img.
 list[i].text String Yes 1 Text in benefit number i. Raw HTML is allowed.

Bénéficiez de 10% de remise par rapport aux tarifs réglementés de l'électricité HT ! Cela représente, pour un compteur en option tarifaire Base :

  • Aucun jour de pointe mobile

    les journées rouges en plein hiver, c'est fini ! Un prix du kWh unique pour un confort égal toute l'année.

  • Un prix du kWh H.T moins cher que le tarif EJP :

    • 2,2 % moins cher que le tarif EJP "jour normal"
    • 68% moins cher que le tarif EJP "jour de pointe mobile"
    • Un tarif d'abonnement presque identique au tarif EJP

  • Accompagnement EJP personnalisé

    Et en plus, Total Direct Energie vous rembourse les frais liés au changement de votre compteur E.J.P et vous accompagne avec des conseillers spécialement formés !

  • Souscription par téléphone

    Appelez le 09 87 98 64 98 pour plus de renseignements ou pour bénéficier de l'offre. Pour toutes questions, écrivez-nous à ejp@selectra.info.


Benefits--media ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
benefits ⤵ Array of objects Yes 1 Config for the benefits of this component.
 benefits[i].title String Yes 1 Title of the benefit number i
 benefits[i].title_color String No 0 or 1 Color of the title of the benefit number i. You can choose between "primary", "secondary", "ternary" and "black". By default is "secondary"
 benefits[i].check_color String No 0 or 1 Color of the check of the benefit number i. You can choose between "primary", "secondary", "ternary" and "black". By default is "primary"
 benefits[i].description String Yes 1 Text of the benefit number i
video_id String No 0 or 1 Description of the benefit number id of the video you want to be displayed.
image ⤵ Object No 0 or 1 Config for the optional image to be displayed instead of the video. Required if video_id is empty.
 image.url String Yes 1 Url of the image to be displayed.
 image.alt String Yes 1 Alternative text of the image to be displayed.

Magni dolores eos qui ratione
voluptatem ea commodi consequatur
sequi 2 nesciunt.

  • Magni dolores

    Qui dolorem ipsum quia amet ea commodi consequatur consectetur, adipisci velit. Consequatur consectetur, adipisci velit.

  • Eos qui ratione

    Integer quis eleifend dolor ea commodi consequatur sed vitae nunc elementum consequatur consectetur, adipisci.

  • Voluptatem ea comodi

    Nisi ut aliquid ex aequo ea commodi consequatur vitae nunc elementum sed consequatur consectetur velit.


Card--banner ⬇ (click to see options)

Variable name Type Required Amount Description
title String Yes 1 Title of the banner's card. It will be visible only on mobile version. If you don't fill it nor description you will see in mobile the img.
heading String No 0 or 1 The HTML tag for the title (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
description String Yes 1 Description of the banner's card. It will be visible only on mobile version. It will be visible only on mobile version. If you don't fill it nor title you will see in mobile the img.
link String Yes 1 Content of the href attribute of the card.
custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
button_text String Yes 1 Text encouraging the user to click. On mobile, it will be displayed as a one-item list under the description. On desktop, it will be a button showed on hover over the banner.
image_url String Yes 1 Url of the image to be displayed on the desktop version of the banner. That image has to be designed specially for this purpose, preferably in svg format.
image_alt String Yes 1 Alternative text of the banner's image.

Phasellus velit dolor

Excepteur sint occaecat cupidatat non proident voluptatem accusantium doloremque laudantium

Lorem Ipsum Lorem

Card--articles ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
articles ⤵ Array of objects Yes 1 or more Config for the benefits of this component.
 articles[i].title String Yes 1 Content of the article's title, displayed right under the logo and linked to an url to be specified.
 articles[i].link String Yes 1 Content of the title's href attribute.
 articles[i].link_attributes String No 0 or 1 Extra attributes for the link, such as target="_blank" rel="noopener".
 articles[i].image ⤵ Object Yes 1 Config for the displayed image (should be a logo).
  articles[i].image.url String Yes 1 Url of the image to be displayed.
  articles[i].image.alt String Yes 1 Alternative text of the image to be displayed.

Turpis mauris adipiscing elit

Logo FDF
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Logo Kovers
Duis turpis mauris, malesuada consectetur
Logo Ilek
Quisque dapibus ante sed ligula sagittis
Logo Selectra
Phasellus nibh tellus, egestas sed volutpat eu, dictum sed mi.

Cards--btn-grp ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
bg_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
subtitle String No 0 or 1 Add a subtitle with a p tag if you want. Also, you can add HTML tags here.
cards ⤵ Array of objects Yes 1 or more Config for the cards.
 cards[i].link_provider String Yes 1 Content of the href attribute of the image in the card. Usually, the link of the provider's page.
 cards[i].custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 cards[i].logo_src String Yes 1 Url of the image to be displayed on the desktop version of the banner. That image has to be designed specially for this purpose, preferably in svg format.
 cards[i].logo_alt String Yes 1 Alternative text of the card's image. usually, the provider's name.
 cards[i].btn_grp_1 ⤵ Object No 0 or 1 Config for the first button in the card.
  cards[i].btn_grp_1.icon String Yes 1 Id of the icon (from the sprite) to be used. You also can add flags adding flag name ( flag-es ) for example.
  cards[i].btn_grp_1.link String Yes 1 Content of the href attribute of the first button in the card.
  cards[i].btn_grp_1.custom_attr String Yes 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
  cards[i].btn_grp_1.text String Yes 1 Text inside the first button in the card.
 cards[i].btn_grp_2 ⤵ Object No 0 or 1 Config for the second button in the card. It's optional.
  cards[i].btn_grp_2.icon String Yes 1 Id of the icon (from the sprite) to be used. You also can add flags adding flag name ( flag-es ) for example.
  cards[i].btn_grp_2.link String Yes 1 Content of the href attribute of the second button in the card.
  cards[i].btn_grp_2.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
  cards[i].btn_grp_2.text String Yes 1 Text inside the second button in the card.
 cards[i].btn_grp_3 ⤵ Object No 0 or 1 Config for the third button in the card. It's optional.
  cards[i].btn_grp_3.icon String Yes 1 Id of the icon (from the sprite) to be used. You also can add flags adding flag name ( flag-es ) for example.
  cards[i].btn_grp_3.link String Yes 1 Content of the href attribute of the third button in the card.
  cards[i].btn_grp_3.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
  cards[i].btn_grp_3.text String Yes 1 Text inside the third button in the card.
 cards[i].button_footer ⤵ Object No 0 or 1 Config for the button in the footer of the card. It's optional.
  cards[i].button_footer.link String Yes 1 Content of the href attribute of the footer button in the card.
  cards[i].button_footer.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
  cards[i].button_footer.color String Yes 1 Color of the footer button in the card. You can choose between primary, secondary or ternary.
  cards[i].button_footer.text String Yes 1 Text inside the footer button in the card.

Phasellus velit dolor

Duis finibus urna elit, sed ullamcorper lectus auctor eu. Ut sit amet sodales turpis, ac congue odio. Cras felis lacus, bibendum at augue id, rutrum pharetra purus. Morbi est tortor, blandit eu sem sed, suscipit tristique eros.

logo alt
Btn 1 Btn 2 Btn 3
Button
logo alt
Btn 1 Btn 2 Btn 3
Button
logo alt
Btn 1 Btn 2 Btn 3
Button

Card--comparative ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
bg_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
advantages_title String Yes 1 Header of the advantages card.
advantages_title_heading String No 0 or 1 The HTML tag for each card title (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h3.
list_check ⤵ Array of objects Yes 1 Config for the list check card.
 list_check[i].text_list String Yes 1 or more Text displayed in the card. You can add the ones you want. Raw HTML is allowed.
inconvenients_title String Yes 1 Header of the inconvenients card.
inconvenients_title_heading String No 0 or 1 The HTML tag for each card title (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h3.
list_cross ⤵ Array of objects Yes 1 or more Config for the list cross card.
 list_cross[i].text_list String Yes 1 Text displayed in the card. You can add the ones you want. Raw HTML is allowed.
show_more_arrow ⤵ Object No 0 or 1 Config for the show_more_arrow to be displayed. It is optional.
 intro String Yes 1 Text you can see.
 openButton String Yes 1 Text with arrow to open collapse.
 closeButton String Yes 1 Text with arrow to close collapse
 collapseContent String Yes 1 Text inside collapse. Raw HTML is allowed.

Les plus et les moins

Les avantages de l'offre Online

  • Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi.
  • Ullamcorper velit sed ullamcorper morbi tincidunt ornare.
  • Ornare massa eget egestas.
  • Vestibulum mattis ullamcorper velit morbi.

Les inconvénients de l'offre Online

  • Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi.
  • Ullamcorper velit sed ullamcorper morbi tincidunt ornare.
  • Ornare massa eget egestas.
  • Vestibulum mattis ullamcorper velit morbi.

Card--cta ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
intro String No 0 or 1 Optional introduction text (highlighted) for this component. Raw HTML is allowed.
text String No 0 or 1 Optional text for this component. Raw HTML is allowed.
cards3Fullwidth Boolean No 0 or 1 This variable is designed to when you have 3 cards and you want them to be full width. By default is false. If you have 3 cards only and you want them to be full width, put true
cards ⤵ Array of objects Yes 1 or more Config for the cards displayed on this component.
 cards[i].title String Yes 1 Title of the card.
 cards[i].heading String No 0 or 1 The HTML tag for each card title (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
 cards[i].paragraph String No 0 or 1 Text of the card. Raw HTML is allowed.
 cards[i].cta ⤵ Array of objects Yes 1 or more Config for the cta buttons displayed on the links list (mobile) or hover on the card (desktop).
  cards[i].cta[j].link String Yes 1 Content of the button's href attribute.
  cards[i].cta[j].custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
  cards[i].cta[j].text String Yes 1 Text displayed inside the button.
  cards[i].cta[j].icon ⤵ Object No 0 or 1 Text displayed inside the button.
   cards[i].cta[j].icon.position String No 0 or 1 Position of the icon in the button. Can be left or right.
   cards[i].cta[j].icon.name String No 0 or 1 Id of the icon (from the sprite) to be displayed. You also can add flags adding flag name ( flag-es ) for example.
   cards[i].cta[j].icon.extra_class String No 0 or 1 Set an additional CSS class for the icon, for example 270 for it to be rotated 270º clockwise (useful for arrow icons).
  cards[i].cta[j].outline Boolean No 0 or 1 If true, the button will be outlined.
 cards[i].footer_image ⤵ Object Yes 1 Config for the image of card's footer.
 cards[i].footer_image.url String Yes 1 Url of the image to be displayed. The imagehas to be created for this purpose in svg format.
 cards[i].footer_image.alt String Yes 1 Alternative text of the image to be displayed.

Duis mauris

Pellentesque commodo quam hendrerit dignissim blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae

00 00 00 00 00

Vestibulum ante

Sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.

  • 00 00 00 00 00
Quasi architecto
Ut enim ad

Beatae vitae dicta

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit

  • Ut enim ad
Quasi architecto
00 00 00 00 00

Anim id est laborum

Adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

  • 00 00 00 00 00
Quasi architecto
00 00 00 00 00

Vestibulum ante

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur

  • 00 00 00 00 00
Quasi architecto

Cards--filter ⬇ (click to see options)

Note: You have to use a period(.) instead of a comma(,) for floating numbers.
Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
bg_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
options ⤵ Array of objects Yes 1 or more Config for the options filters. Add as many as you want.
 options[i].name String Yes 1 Name for the filter. If you put "all" all cards are going to be visible. You can not add spaces or accents or accents or ñ. Ex: energie-verte
cards ⤵ Array of objects Yes 1 or more Config for the cards. Add as many as you want.
 cards[i].card_section String Yes 1 value/s to filter your card in sort-buttons. You can add more than 1 value. You can not add spaces or accents or accents or ñ. Ex: energie-verte nos-suggestions
 cards[i].card_product_rounded ⤵ String Yes 1 Config for the card.
  cards[i].card_product_rounded.card_color String Yes 1 Color of the card header. You can choose: primary, secondary, ternary, warning, danger, success and neutral.
  cards[i].card_product_rounded.text_inline String No 0 or 1 Text in top of card.
  cards[i].card_product_rounded.header_top String No 0 or 1 Text in top of header card.
  cards[i].card_product_rounded.header_number Number No 0 or 1 A big number in header card.
  cards[i].card_product_rounded.header_perTime String No 0 or 1 Text "per time". Ex: /h, /annual
  cards[i].card_product_rounded.header_bottom String No 0 or 1 Text in bottom of header card.
  cards[i].card_product_rounded.provider_logo_source String No 0 or 1 Logo image source.
  cards[i].card_product_rounded.provider_name String No 0 or 1 Name for the provider's logo.
  cards[i].card_product_rounded.upi String No 0 or 1 The UPI of the provider you want the reviews to be displayed about. Required only if you are not on a provider's page, or if you are but you want the reviews of a different provider to be displayed.
To know it, go to /admin/content/customer_reviews and you will see each provider UPI.
If you add the UPI and the star_rating value, you will see the UPI. Important! You only can add the UPI if you have enabled selectra_reviews_admin or selectra_reviews_client module.
  cards[i].card_product_rounded.star_rating ⤵ Object No 0 or 1 Config for the rating.
   cards[i].card_product_rounded.star_rating.rating Number No 0 or 1 The number (integer or one-decimal) corresponding to the average rating to be displayed.
  cards[i].card_product_rounded.card_title String Yes 1 Title for the card.
  cards[i].card_product_rounded.characteristics ⤵ Array of objects Yes 1 or more Config for the text inside cards. You can add as many you want.
   cards[i].card_product_rounded.characteristics[j].text String Yes 1 Text inside the card. Raw HTML is allowed.
   cards[i].card_product_rounded.characteristics[j].trait_green Boolean No 0 or 1 Trait green can be true or false. If you put true your sentence will be green. By default is false
  cards[i].card_product_rounded.footer_text String No 0 or 1 Text in the card bottom. Small sentence with Selectra's logo.
  cards[i].card_product_rounded.button ⤵ Object Yes 1 Config for the button in the card.
   cards[i].card_product_rounded.button.text String No 0 or 1 Text inside the button in the card. If you delete this variable, this button won0t appear.
   cards[i].card_product_rounded.button.link String No 0 or 1 Button link.
   cards[i].card_product_rounded.button.modal String No 0 or 1 ID of the modal you want to add instead of a normal link.
   cards[i].card_product_rounded.button.title String Yes 1 Title for the button in the card.
   cards[i].card_product_rounded.button.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
  cards[i].card_product_rounded.button_2 ⤵ Object No 0 or 1 Config for the second button in the card.
   cards[i].card_product_rounded.button_2.text String No 0 or 1 Text inside the button in the card. If you don't fill it you won't see the second button.
   cards[i].card_product_rounded.button_2.link String No 0 or 1 Button link.
   cards[i].card_product_rounded.button_2.modal String No 0 or 1 ID of the modal you want to add instead of a normal link.
   cards[i].card_product_rounded.button_2.title String No 0 or 1 Title for the button in the card.
   cards[i].card_product_rounded.button_2.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
   cards[i].card_product_rounded.button_2.color String Yes 1 Color of the second button. You can choose between primary, secondary, ternary, success, warning, danger, info.
   cards[i].card_product_rounded.button_2.outline Boolean No 0 or 1 Change to true if you want to put the button outlined.
other_content ⤵ Array of objects No 1 or more Config for the "other content". Here you can add HTML and it will be filtered like cards. Add as many as you want.
 other_content[i].section String Yes 1 value/s to filter your content in sort-buttons, like in cards. You can add more than 1 value. You can not add spaces or accents or accents or ñ. Ex: energie-verte nos-suggestions
 other_content[i].content String Yes 1 Content inside the filtered element. Raw HTML is allowed.

Notre sélection des meilleures offres du mois

Meilleur fournisseur d’électricité 2020

-17%par rapport aux tarifs réglementés
Logo alt

100% Online & Green

  • Électricité verte standard (garanties d’origines)
  • 100% online
Souscription facile

Meilleur fournisseur d’électricité 2020

-17%par rapport aux tarifs réglementés
Logo alt

Online Électricité + Gaz

  • Électricité et gaz naturel standard
  • 100% online
Souscription facile
Économisez jusqu’à230€/an
Logo alt

Astucio Eco Electricité + Gaz

  • Électricité et gaz naturel standard
  • Prix fixe 3 ans révisable à la baisse
Souscription facile
Économisez jusqu’à230€/an

Astucio Eco Electricité + Gaz

  • Électricité et gaz naturel standard
  • Prix fixe 3 ans révisable à la baisse
Souscription facile
Économisez jusqu’à230€/anI'm headerBottom
Logo alt

Astucio Eco Electricité + Gaz

  • Électricité et gaz naturel standard
  • Prix fixe 3 ans révisable à la baisse
Souscription facile
Content in offres-vertes. Here you can add HTML
Content in nos-suggestions. Here you can add HTML
Content in moins-cheres. Here you can add HTML

Card--icon ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
cards ⤵ Array of objects Yes 1 or more Config for the cards displayed on this component.
 cards[i].icon String Yes 1 Id of the icon (from the sprite) to be used. You also can add flags adding flag name ( flag-es ) for example.
 cards[i].text String Yes 1 Text inside the card. Raw HTML is allowed.

Duis turpis mauris

Simplicite.
Le client peut régler toutes ses démarches par téléphone ou en ligne.
Simplicite.
Le client peut régler toutes ses démarches par téléphone ou en ligne.
Simplicite.
Le client peut régler toutes ses démarches par téléphone ou en ligne.

Card--image ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
cards_heading String No 0 or 1 The HTML tag for the card's heading (for example p) to be chosen depending on your purposes regarding SEO. By default is h4
cards ⤵ Array of objects Yes 1 or more Config for the cards displayed on this component.
 cards[i].title String Yes 1 Title of the card.
 cards[i].text String Yes 1 Text of the card. Raw HTML is allowed.
 cards[i].cta ⤵ Object Yes 1 Config for the cta buttons displayed on the links list (mobile) or hover on the card (desktop).
  cards[i].cta.link String Yes 1 Content of the button's href attribute.
  cards[i].cta.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
  cards[i].cta.color String No 0 or 1 Color of the button. You can choose between primary, secondary or ternary.
  cards[i].cta.outline String No 0 or 1 Choose if you want an outlined button. by default is false
  cards[i].cta.text String Yes 1 Text displayed inside the button.
 cards[i].image ⤵ Object Yes 1 Config for the image of cardr.
 cards[i].image.url String Yes 1 Url of the image to be displayed.
 cards[i].image.alt String Yes 1 Alternative text of the image to be displayed.
 cards[i].image.position String Yes 1 Position of the image in the card. You can choose between left or right.

Pour consommer plus malin, consultez les guides pratiques

Alt img

Card Title

Identifier les sources principales de vos émissions permettra de fixer des objectifs de réduction stratégiques et significatifs, basés sur la science (SBT). La mise en place d’un plan d’actions est donc recommandée dans votre parcours bas carbone. Selectra Climate Consulting vous propose également de suivre votre évolution au cours des années grâce au reporting et à la comparaison de vos bilans.

Beatae vitae dicta

Card Title

Identifier les sources principales de vos émissions permettra de fixer des objectifs de réduction stratégiques et significatifs, basés sur la science (SBT). La mise en place d’un plan d’actions est donc recommandée dans votre parcours bas carbone. Selectra Climate Consulting vous propose également de suivre votre évolution au cours des années grâce au reporting et à la comparaison de vos bilans.

Beatae vitae dicta
Alt img
Alt img

Card Title

Identifier les sources principales de vos émissions permettra de fixer des objectifs de réduction stratégiques et significatifs, basés sur la science (SBT). La mise en place d’un plan d’actions est donc recommandée dans votre parcours bas carbone. Selectra Climate Consulting vous propose également de suivre votre évolution au cours des années grâce au reporting et à la comparaison de vos bilans.

Beatae vitae dicta

Card--image-cta ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
intro String No 0 or 1 Optional introduction text (highlighted) for this component. Raw HTML is allowed.
cards_heading String Yes 1 The HTML tag for the card's heading (for example h4) to be chosen depending on your purposes regarding SEO.
cards ⤵ Array of objects Yes 1 or more Config for the cards displayed on this component.
 cards[i].image ⤵ Object Yes 1 Config for the image of cardr.
 cards[i].image.url String Yes 1 Url of the image to be displayed.
 cards[i].image.alt String Yes 1 Alternative text of the image to be displayed.
 cards[i].title String Yes 1 Title of the card.
 cards[i].paragraph String No 0 or 1 Text of the card. Raw HTML is allowed.
 cards[i].cta ⤵ Object Yes 1 Config for the cta buttons displayed on the links list (mobile) or hover on the card (desktop).
  cards[i].cta.link String Yes 1 Content of the button's href attribute.
  cards[i].cta.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
  cards[i].cta.color String No 0 or 1 Color of the button. You can choose between primary, secondary or ternary.
  cards[i].cta.outline String No 0 or 1 Choose if you want an outlined button. by default is false
  cards[i].cta.text String Yes 1 Text displayed inside the button.

Duis turpis mauris

Duis finibus urna elit, sed ullamcorper lectus auctor eu. Ut sit amet sodales turpis, ac congue odio. Cras felis lacus, bibendum at augue id, rutrum pharetra purus. Morbi est tortor, blandit eu sem sed, suscipit tristique eros.

Pellentesque commodo quam hendrerit dignissim blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae

Logo Welcome to the Jungle

Nemo enim ipsam quis

Excepteur sint occaecat cupidatat non proident

Beatae vitae dicta

Card--info-extended ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
text String No 0 or 1 Optional text for this component. Raw HTML is allowed.
cards ⤵ Array of objects Yes 1 or more Config for the cards to be displayed.
 cards[i].header_image ⤵ Object No 0 or 1 Config for the card's optional header image.
  cards[i].header_image.url String Yes 1 Url of the image on card's header.
  cards[i].header_image.alt String Yes 1 Alternative text of the image on card's header.
 cards[i].header_logo ⤵ Object Yes 1 or more Config for the logo right under the card's header.
  cards[i].header_logo.url String No 0 or 1 Url of the logo right under card's header. If you delete it, logo won't appear.
  cards[i].header_logo.alt String Yes 1 Alternative text of the logo right under card's header.
 cards[i].title ⤵ Object Yes 1 or more Config for card's title.
  cards[i].title.icon String Yes 1 Id of the icon (from the sprite) to be displayed just before the title. You also can add flags adding flag name ( flag-es ) for example.
  cards[i].title.text String Yes 1 The content for card's title.
 cards[i].description String Yes 1 The content for card's description, right under the title. Raw HTML is allowed.
 cards[i].list ⤵ Array of objects No 0 or 1 Config for the checklist under card's description.
  cards[i].list[j].text String No 0 or more Text for each item in checklist. Raw HTML is allowed.
 cards[i].collapse_title ⤵ Object Yes 1 Config for the checklist under card's description.
  cards[i].collapse_title.icon String Yes 1 Id of the icon (from the sprite) to be displayed just before the collapse's title. You also can add flags adding flag name ( flag-es ) for example.
  cards[i].collapse_title.text String Yes 1 Text for the collapse's title.
 cards[i].collapse_description ⤵ Object Yes 1 Config for the checklist inside card's collapse.
  cards[i].collapse_description.paragraph_before String Yes 1 Text displayed inside the collapse, just before the checklist. Raw HTML is allowed.
  cards[i].collapse_description.checklist ⤵ Array of objects Yes 1 Text for the collapse's title.
   cards[i].collapse_description.checklist[k].text String Yes 1 or more Text for each item of the checklist inside the collapse. Raw HTML is allowed.
  cards[i].collapse_description.paragraph_after String Yes 1 Text displayed inside the collapse, just after the checklist. Raw HTML is allowed.
 cards[i].button_1 ⤵ Object Yes 1 Config for card's first button.
  cards[i].button_1.link String Yes 1 Content of the href attribute of first button.
  cards[i].button_1.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
  cards[i].button_1.color String No 0 or 1 Color of the button. You can choose between primary, secondary or ternary.
  cards[i].button_1.text String Yes 1 Text displayed inside first button.
  cards[i].button_1.icon ⤵ Object No 0 or 1 Config for the optional icon inside first button.
   cards[i].button_1.icon.name String No 0 or 1 Id of the icon (from the sprite) to be displayed inside first button. You also can add flags adding flag name ( flag-es ) for example.
   cards[i].button_1.icon.position String No 0 or 1 Position of the icon. Can be left or right.
 cards[i].button_2 ⤵ Object No 0 or 1 Config for card's second button.
  cards[i].button_2.link String Yes 1 Content of the href attribute of second button.
  cards[i].button_2.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
  cards[i].button_2.color String No 0 or 1 Color of the button. You can choose between primary, secondary or ternary.
  cards[i].button_2.text String Yes 1 Text displayed inside second button.
  cards[i].button_2.icon ⤵ Object No 0 or 1 Config for the optional icon inside second button.
   cards[i].button_2.icon.name String No 0 or 1 Id of the icon (from the sprite) to be displayed inside second button. You also can add flags adding flag name ( flag-es ) for example.
   cards[i].button_2.icon.position String No 0 or 1 Position of the icon. Can be left or right.
 cards[i].footer ⤵ Object Yes 1 Config for card's footer.
  cards[i].footer.info String Yes 1 Text at the bottom of the card, right before the links. Raw HTML is allowed.
  cards[i].footer.links ⤵ Array of objects Yes 1 or more Config for the links displayed at the bottom of the card.
   cards[i].footer.links[l].link String Yes 1 Content of the href attribute of each link.
   cards[i].footer.links[l].text String Yes 1 Text of each link.
   cards[i].footer.links[l].attributes String No 0 or 1 Extra attributes for the link, such as target="_blank" rel="noopener".

Turpis mauris

Pellentesque commodo quam hendrerit dignissim blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae

Img alt
logo alt
La mission HANDICAP INTERNATIONAL

Depuis 1982, Handicap International intervient dans les situations de pauvreté et d’exclusion, de conflits et de catastrophes aux côtés des personnes handicapées et des populations vulnérables.

  • Aide d’urgence, appareillage, rééducation, déminage, prévention.
  • Interventions dans près de 60 pays à travers le monde.
  • Plus de 2,5 millions de personnes aidées par Handicap International en 2019 !

Que finance ma facture ?

Les besoins financiers d’Handicap International sont nombreux et chaque euro compte. Très concrètement, avec ilek, votre facture d’énergie pourra contribuer à financer chaque année :

  • 50 € : une prothèse pour une personne handicapée ;
  • 100 € : la mise à disposition à une enfant d’un fauteuil roulant.

… sans que ça ne vous coûte un centime de plus qu’avec les fournisseurs historiques !

Souscrire à cette offre 00 00 00 00 00

9h à 19h du lundi au vendredi. Appel non surtaxé

Voir le descriptif completAccéder à la grille tarifaire
Img alt
logo alt
La mission HANDI’CHIENS

HANDI’CHIENS éduque et remet gratuitement des chiens d’assistance à des personnes en situation de handicap. Objectifs : offrir plus d’autonomie, aider au quotidien, et au-delà, créer plus de lien social… Des vies transformées !

  • 150 chiens remis chaque année ;
  • 22 mois d’éducation nécessaires pour former un chien d’assistance ;
  • Plus de 2 400 bénéficiaires depuis 1989 !

Que finance ma facture ?

Éduquer et remettre un chien d’assistance coûte 15 000 € à l’association. Très concrètement, avec ilek, votre facture d’énergie pourra contribuer à financer :

  • L’achat d’un chiot, futur chien d’assistance ;
  • L’alimentation et le suivi vétérinaire d'un Handi’chiens
  • Les jeux nécessaires à son bien-être et son éducation
  • La remise du chien à son bénéficiaire ;

… sans que ça ne vous coûte un centime de plus qu’avec les fournisseurs historiques !

Souscrire à cette offre 00 00 00 00 00

9h à 19h du lundi au vendredi. Appel non surtaxé

Voir le descriptif completAccéder à la grille tarifaire
Img alt
logo alt
La mission FERMES D'AVENIR

Accélérer la transition agroécologique en faisant pousser des fermes respectueuses de la nature et des humains partout en France :

  • Production de nourriture saine et qualitative ;
  • Préservation du capital naturel planétaire ;
  • Activité viable, vivable et résiliente pour les agriculteurs.

Que finance ma facture ?

Fermes d’Avenir accompagne des porteurs de projets, des entreprises et des collectivités à lancer des projets agricoles vertueux. Très concrètement, avec ilek, votre facture d’énergie pourra contribuer à financer :

  • Des programmes d’accompagnement auprès d’agriculteurs en transition ;
  • Des formations à l’agroécologie ;
  • Des projets concrets et durables sur des fermes agroécologiques ;
  • Des actions de sensibilisation à l’agroécologie ;

… sans que ça ne vous coûte un centime de plus qu’avec les fournisseurs historiques !

Souscrire à cette offre 00 00 00 00 00

9h à 19h du lundi au vendredi. Appel non surtaxé

Voir le descriptif completAccéder à la grille tarifaire

Card--link ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
intro String No 0 or 1 Optional introduction text (highlighted) for this component. Raw HTML is allowed.
text String No 0 or 1 Optional text for this component. Raw HTML is allowed.
cards ⤵ Array of objects Yes 1 or more Config for the cards displayed on this component.
 cards[i].link String Yes 1 Content.
 cards[i].title String Yes 1 Title of the card. Raw HTML is allowed.
 cards[i].attributes String No 0 or 1 Extra attributes for the link, such as target="_blank" rel="noopener".

Duis turpis mauris

Pellentesque commodo quam hendrerit dignissim blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae

Sed ut perspiciatis
Nemo enim ipsam
Neque porro quisquam
Ut enim ad minima
Quis autem
Consequuntur

Card--main ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
intro String No 0 or 1 Optional introduction text (highlighted) for this component. Raw HTML is allowed.
text String No 0 or 1 Optional text for this component. Raw HTML is allowed.
card_left ⤵ Object Yes 1 or more Config for the left card.
 card_left.title String Yes 1 Title of the card. Raw HTML is allowed.
 card_left.heading String No 0 or 1 The HTML tag for the card left title (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
 card_left.paragraph String Yes 1 Text of the card, under the title. Raw HTML is allowed.
 card_left.list ⤵ Array of objects No 0 or 1 Config for the list under the description.
  card_left.list[i].url String No 0 or 1 Content of the href attribute of the link.
  card_left.list[i].title String No 0 or 1 Text of each item of the list. Raw HTML is allowed.
  card_left.list[i].custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 card_left.marquee ⤵ Object No 0 or 1 Config for the list under the description.
  card_left.marquee.title String No 0 or 1 Text displayed right at the left of the marquee.
  card_left.marquee.list ⤵ Array of objects No 0 or 1 Config for the logos in the marquee.
   card_left.marquee.list[j].agrippa_image_id String No 0 or 1 Id of the image nº j to be used through agrippa_image(id, marquee) function.
   card_left.marquee.list[j].url String No 0 or more Url for each image in the marquee (should be a logo).
   card_left.marquee.list[j].alt String No 0 or more Alternative text for each image in the marquee.
  card_left.marquee.more ⤵ Object No 0 or 1 Config for the button displayed on marquee hover.
   card_left.marquee.more.text String No 0 or 1 Text inside the button displayed on marquee hover.
   card_left.marquee.more.url String No 0 or 1 Content of the href attribute of the button displayed on marquee hover.
 card_left.cta ⤵ Object Yes 1 Config for the button at the bottom of the card.
  card_left.cta.text String Yes 1 Text to be displayed inside the button.
  card_left.cta.url String Yes 1 Content of the href attribute of the button at the bottom of the card.
  card_left.cta.button_color String No 0 or 1 Color of the button. You can choose between primary, secondary or ternary.
  card_left.cta.button_outline Boolean No 0 or 1 Choose if you want an outlined button. by default is true
  card_left.cta.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
card_right ⤵ Object Yes 1 or more Config for the right card.
 card_right.title String Yes 1 Title of the card. Raw HTML is allowed.
 card_right.heading String No 0 or 1 The HTML tag for the card right title (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
 card_right.paragraph String Yes 1 Text of the card, under the title. Raw HTML is allowed.
 card_right.list ⤵ Array of objects No 0 or 1 Config for the list under the description.
  card_right.list[i].url String No 0 or 1 Content of the href attribute of the link.
  card_right.list[i].title String No 0 or 1 Text of each item of the list. Raw HTML is allowed.
  card_right.list[i].custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 card_right.marquee ⤵ Object No 0 or 1 Config for the list under the description.
  card_right.marquee.title String No 0 or 1 Text displayed right at the left of the marquee.
  card_right.marquee.list ⤵ Array of objects No 0 or 1 Config for the logos in the marquee.
   card_right.marquee.list[j].agrippa_image_id String No 0 or 1 Id of the image nº j to be used through agrippa_image(id, marquee) function.
   card_right.marquee.list[j].url String No 0 or more Url for each image in the marquee (should be a logo).
   card_right.marquee.list[j].alt String No 0 or more Alternative text for each image in the marquee.
  card_right.marquee.more ⤵ Object No 0 or 1 Config for the button displayed on marquee hover.
   card_right.marquee.more.text String No 0 or 1 Text inside the button displayed on marquee hover.
   card_right.marquee.more.url String No 0 or 1 Content of the href attribute of the button displayed on marquee hover.
 card_right.cta ⤵ Object Yes 1 Config for the button at the bottom of the card.
  card_right.cta.text String Yes 1 Text to be displayed inside the button.
  card_right.cta.url String Yes 1 Content of the href attribute of the button at the bottom of the card.
  card_right.cta.button_color String Yes 1 Color of the button. You can choose between primary, secondary or ternary.
  card_right.cta.button_outline Boolean No 0 or 1 Choose if you want an outlined button. by default is true
  card_right.cta.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"

Duis turpis mauris

Pellentesque commodo quam hendrerit dignissim blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae

Nemo enim ipsam quis nostrum

Excepteur sint occaecat cupidatat non proident

  • Quis autem vel eum iure reprehenderit
  • Unt in culpa qui officia deserunt

Sed do eiusmod:

  • Logo Engie
  • Logo Lampiris
Beatae vitae dicta
Exercitationem ullam

Ut enim ad minim veniam,

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium

  • Quis autem vel eum iure reprehenderit
  • Unt in culpa qui officia deserunt

Sed do eiusmod:

  • Logo Alterna
  • Logo EDF
Voluptatem accusantium
Beatae vitae dicta

Card--position ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
intro String No 0 or 1 Optional introduction text (highlighted) for this component. Raw HTML is allowed.
text String No 0 or 1 Optional text for this component. Raw HTML is allowed.
cards_heading String Yes 1 The HTML tag for the card's heading (for example h4) to be chosen depending on your purposes regarding SEO.
cards ⤵ Object Yes 1 or more Config for the cards.tr
 card.image ⤵ Object Yes 1 Config for the card's image. It should be a portrait.
  card.image.url String Yes 1 Location of the image to be displayed.
  card.image.visible_on_mobile Boolean No 0 or 1 By default the img doesn't appear in mobile. If you change this variable to true you will see the image in mobile also.
  card.image.alt String Yes 1 Alternative text of the image.
 card.position String Yes 1 The position of the person described. Raw HTML is allowed, you can use a
tag to separate it in two lines.
 card.title String Yes 1 Title of the card. Raw HTML is allowed.
 card.paragraph String Yes 1 Text of the card, it should be the resume of the person on the card. Raw HTML is allowed.

Duis turpis mauris

Duis finibus urna elit, sed ullamcorper lectus auctor eu. Ut sit amet sodales turpis, ac congue odio. Cras felis lacus, bibendum at augue id, rutrum pharetra purus. Morbi est tortor, blandit eu sem sed, suscipit tristique eros.

Pellentesque commodo quam hendrerit dignissim blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae

Portrait de Leo Paul

NEMO IPSAM
VESTIBULUM ANTE PRIMIS

Excepteur sint occaecat cupidatat

Duis finibus urna elit, sed ullamcorper lectus auctor eu. Ut sit amet sodales turpis, ac congue odio. Cras felis lacus, bibendum at augue id, rutrum pharetra purus. Morbi est tortor, blandit eu sem sed, suscipit tristique eros. Duis finibus urna elit, sed ullamcorper lectus auctor eu. Ut sit amet sodales turpis, ac congue odio. Cras felis lacus, bibendum at augue id, rutrum pharetra purus. Morbi est tortor, blandit eu sem sed, suscipit tristique eros.

Portrait de Thomas

NEMO IPSAM
VESTIBULUM ANTE PRIMIS

Duis finibus urna elit

Excepteur sint occaecat cupidatat, sed ullamcorper lectus auctor eu. Ut sit amet sodales turpis, ac congue odio. Cras felis lacus, bibendum at augue id, rutrum pharetra purus. Morbi est tortor, blandit eu sem sed, suscipit tristique eros. Duis finibus urna elit, sed ullamcorper lectus auctor eu. Ut sit amet sodales turpis, ac congue odio. Cras felis lacus, bibendum at augue id, rutrum pharetra purus. Morbi est tortor, blandit eu sem sed, suscipit tristique eros.


Card--product ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
text String No 0 or 1 Optional text for this component. Raw HTML is allowed.
cards ⤵ Array of objects Yes 1 or more Config for the cards to be displayed. Add as many as you want.
 cards[i].color String Yes 1 Color of the card's header. Can be one of primary, secondary, ternary, success, warning, danger or neutral.
 cards[i].old_price ⤵ Object No 0 or 1 Config of the optional "old price" in card's header.
  cards[i].old_price.text String Yes 1 Content of the text displayed right above the stricked number.
  cards[i].old_price.number String Yes 1 Content of the striked text (old price). Should be a number.
  cards[i].old_price.unit String Yes 1 Unit of the striked text (old price).
 cards[i].new_price ⤵ Object Yes 1 Config of the "new price" in card's header.
  cards[i].new_price.text String No 0 or 1 Content of the optional text displayed right above the non-stricked number.
  cards[i].new_price.number String Yes 1 Content of the non-striked text (new price). Should be a number.
  cards[i].new_price.unit String Yes 1 Unit of the non-striked text (new price).
 cards[i].logo ⤵ Object Yes 1 Config for the logo displayed at the top of the card.
  cards[i].logo.url String Yes 1 Url for the location of the image. Should be a logo.
  cards[i].logo.alt String Yes 1 Alternative text for the image.
 cards[i].title String Yes 1 Title of the card
 cards[i].characteristics ⤵ Array of objects Yes 1 Config for the card's checklist
  cards[i].characteristics.name String Yes 1 or more Text displayed on checklist's item.
 cards[i].button ⤵ Object Yes 1 Config for the button at the bottom of the card.
  cards[i].button.link String No 0 or 1 Content for the href attribute of the button's link.
  cards[i].button.modal String No 0 or 1 ID of the modal you want to add instead of a normal link.
  cards[i].button.text String Yes 1 Text displayed inside the button.
  cards[i].button.attributes String No 0 or 1 Extra attributes for the link, such as target="_blank" rel="noopener".

Duis turpis mauris

Pellentesque commodo quam hendrerit dignissim blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae

Da34,95euros / m
Promozione25,95euros / m
Logo alt

Fastweb casa

  • Internet ilimitado
  • Chiamate illimitate
  • Nessun vincolo
  • Attivazione gratuita
Da32,95euros / m
Promozione27,90euros / m
Logo alt

Internet unlimited

  • Internet ilimitado
  • Chiamate illimitate
  • Nessun vincolo
  • Attivazione gratuita
Da34,95euros / m
Promozione25,95euros / m
Logo alt

Fastweb casa

  • Internet ilimitado
  • Chiamate illimitate
  • Nessun vincolo
  • Attivazione gratuita
Da38,90euros / m
Promozione27,90euros / m
Logo alt

Internet unlimited

  • Internet ilimitado
  • Chiamate illimitate
  • Nessun vincolo
  • Attivazione gratuita

Card--slider ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
cards_heading String Yes 1 The HTML tag for the cards' headings (for example h3 ) to be chosen depending on your purposes regarding SEO.
medias ⤵ Array of objects Yes 1 or more Config for the cards of the slider.
 medias[i].name String No 0 or 1 Title displayed on top of the card.
 medias[i].link String Yes 1 Content of the href attribute of the card's link.
 medias[i].custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 medias[i].image ⤵ Object Yes 1 Config for the image of the card.
  medias[i].image.url String Yes 1 Source of the image to be displayed. Should be a logo.
  medias[i].image.alt String Yes 1 Alternative text of the image to be displayed.

Phasellus velit dolor

  • Lorem

    Lorem

    Logo FDF
  • Ipsum

    Ipsum

    Logo Kovers
  • Dolor

    Dolor

    Logo Ilek
  • Consectur

    Consectetur

    Logo Selectra

Card--steps ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
bg_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
card_text_1 String No 0 or 1 The text for the first card. Raw HTML is allowed.
card_text_2 String No 0 or 1 The text for the second card. Raw HTML is allowed.
img_1 String No 0 or 1 The source for the img for the first card.
img_2 String No 0 or 1 The source for the img for the second card.
btn_link_1 String Yes 1 The link for the button.
btn_icon_1 String No 0 or 1 The icon for the button.
btn_text_1 String Yes 1 The text for the button.
show_more_arrow ⤵ Object No 0 or 1 Config for the show_more_arrow to be displayed. It is optional.
 intro String Yes 1 Text you can see.
 openButton String Yes 1 Text with arrow to open collapse.
 closeButton String Yes 1 Text with arrow to close collapse
 collapseContent String Yes 1 Text inside collapse. Raw HTML is allowed.

Section title

alt
123
1

This was the first step.

alt
123
2

This is the second step.

alt
123
3

This will be the third step.

06 66 66 66 66
Rappel gratuit

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident...

, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Voir plusVoir moins


Comparator-cta ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
withAside Boolean No 0 or 1 Put true, if in your page has an aside block.
heading_title String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
title String Yes 1 The title of your block. Raw HTML allowed.
title__alignment String Yes 1 Alignment for the title. You can choose between center or left
center_buttons Boolean No 0 or 1 Put true if you want to center the buttons. By default is false. You can choose between true or false
buttons ⤵ Array of objects Yes 1 Config for the buttons under subtitle. May contain between 1 and 3 buttons.
 buttons[i].icon String Yes 1 Id of the icon (from the sprite) to be displayed on the left of the button. You also can add flags adding flag name ( flag-es ) for example.
 buttons[i].title String Yes 1 The title of the button (small text on top).
 buttons[i].label String Yes 1 The label of the button (bigger text on the bottom).
 buttons[i].href String Yes 1 The content of the href attribute of the button itself.
 buttons[i].extra_attributes String Yes 1 Extra attributes for the link, such as target="_blank" rel="noopener".
 buttons[i].modal String No 0 or 1 ID of the modal you want to add instead of a normal link.

Comparez les fournisseurs et trouvez la meilleure offre d'énergie en 5 min !

ComparaisonÉlectricité
ComparaisonGaz
ComparaisonÉlec + Gaz

Contact ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
image ⤵ Object Yes 1 Config for the image displayed on top of the component.
 image.url String Yes 1 Url for the location of the image. Should be a logo.
 image.alt String Yes 1 Alternative text of the image.
info ⤵ Array of objects Yes 1 Config for the lines of information displayed under the image.
 info.line String Yes 1 or more Content for each line of information displayed under the image.
links ⤵ Array of objects Yes 1 Config for the links displayed at the bottom.
 links.link String Yes 1 or more Content of the href attribute of each link.
 links.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 links.text String Yes 1 or more Text displayed for each link.

Contact

Logo Selectra

66 rue Sébastien Mercier
75015 Paris

contact@selectra.info00 00 00 00 00

Contact--cta ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
contact ⤵ Object Yes 1 Config for the contact info. A name + e-mail + phone number is expected.
 contact.name Object Yes 1 Name of the contact. Displayed right under the heading.
 contact.phone_number String No 0 or 1 Phone number in E.164 format, with a structure like +33000000000 (including the country code, without spaces or extra zeros at the beginning, etc...). This number will be used in the href attribute of the link.
 contact.phone_number_displayed String No 0 or 1 Phone number displayed in the link. Use this variable to format the number as you want, with spaces and the structure you want.
 contact.email String No 0 or 1 Email that will be used both in the href attribute and displayed to the user.
buttons ⤵ Array of objects Yes 1 or more Config for the buttons. Add as many buttons as you want.
 buttons[i].link String Yes 1 Content for the href attribute of the button's link.
 buttons[i].attributes String No 0 or 1 Extra attributes for the link, such as target="_blank" rel="noopener".
 buttons[i].text String Yes 1 Text displayed inside the button.
 buttons[i].classes String No 0 or 1 Button classes to customize your button, such as btn--primary btn--outline btn--pill. If empty, the button will be btn--secondary by default.
 buttons[i].icon ⤵ String No 0 or 1 Config for the icons inside the button.
  buttons[i].icon.position String No 0 or 1 Set left or right position for the icon.
  buttons[i].icon.name String No 0 or 1 Id of the icon (from the sprite) to be displayed on the button. You also can add flags adding flag name ( flag-es ) for example.
  buttons[i].icon.extra_class String No 0 or 1 Set an additional CSS class for the icon, for example 270 for it to be rotated 270º clockwise (useful for arrow icons).

Consequntur magni dolores

Lorem-Ipsum Dolor

contact@selectra.info

00 00 00 00 00

Excepteur sint occaecatDuis aute irure dolor

Contact--complex ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
contacts ⤵ Array of objects Yes 1 Config for each card to be displayed.
 contacts[i].name String Yes 1 Name of the person described.
 contacts[i].position String No 0 or 1 Position of the person described.
 contacts[i].image ⤵ String Yes 1 Config for the person's picture.
  contacts[i].image.url String Yes 1 Location of the person's picture.
  contacts[i].image.alt String Yes 1 Alternative text of the person's picture.
 contacts[i].social ⤵ Array of objects Yes 1 Config for the person's profiles in social media.
  contacts[i].social[j].name String Yes 1 or more Name of the media. Has to be one of email, facebook, twitter or linkedin.
  contacts[i].social[j].address String Yes 1 or more Content of the href attribute on the icon's link.
  contacts[i].social[j].label String Yes 1 or more Content of the aria-label attribute on the icon's link. For accessibility purposes.
 contacts[i].phone ⤵ Object No 0 or 1 Config for the person's optional phone button.
  contacts[i].phone.number String No 0 or 1 Content of the href attribute on the icon's link. Should be the number in E.164 format, with a structure like +33000000000 (including the country code, without spaces or extra zeros at the beginning, etc...).
  contacts[i].phone.button_text String No 0 or 1 Text to be displayed in the button..
  contacts[i].phone.label String No 0 or 1 Content of the aria-label attribute on the icon's link. For accessibility purposes.
 contacts[i].description String Yes 1 Description of the person.

Nemo enim ipsam voluptatem

  • Lorem-Ipsum Dolor

    Lorem-Ipsum Dolor

    Vitae dicta sunt explicabo

    • 06 66 66 66 66

    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.


Contact--provider ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
bg_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
not_client ⤵ Object Yes 1 or more Config for "not client" tab.
 not_client.title String Yes 1 Title for tab "not client"
 not_client.button_link String Yes 1 Button link in "not client" tab.
 not_client.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 not_client.button_icon String Yes 1 Button icon in "not client" tab.Id of the icon (from the sprite) to be displayed on the left of the button. You also can add flags adding flag name ( flag-es ) for example.
 not_client.button_text String Yes 1 Button text in "not client" tab.
client ⤵ Object Yes 1 or more Config for "not client" tab.
 client.title String Yes 1 Title for tab "client"
 client.button_link String Yes 1 Button link in "client" tab.
 client.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 client.button_icon String Yes 1 Button icon in "client" tab.Id of the icon (from the sprite) to be displayed on the left of the button. You also can add flags adding flag name ( flag-es ) for example.
 client.button_text String Yes 1 Button text in "client" tab.
Schedule String Yes 1 Schedule for your call-center.
contact_title String Yes 1 Title for contact block.
map_src String Yes 1 Link to map in Google. To do it, go to google maps, search an address, click on 3 lines (settings), then click on share or embed map, click on embed map and copy ONLY URL (starts with https://)
address ⤵ Array of bbjects Yes 1 or more COnfig for the address section.
 address.text Array of bbjects Yes 1 or more Text in address. You can add the ones you need.
show_more_arrow ⤵ Object No 0 or 1 Config for the show_more_arrow to be displayed. It is optional.
 intro String Yes 1 Text you can see.
 openButton String Yes 1 Text with arrow to open collapse.
 closeButton String Yes 1 Text with arrow to close collapse
 collapseContent String Yes 1 Text inside collapse. Raw HTML is allowed.

Le service client Total Direct Energie

  • Je ne suis pas client.e
  • Je suis déjà client.e
Je ne suis pas client.e
09 73 72 73 00 Rappel gratuit
Je suis déjà client.e
Rappel gratuit
(Lun - Ven 9H-19H ; Sam 10H-19H)

Adresse postale du siège social de Total Direct Energie

Total Direct Energie

TSA 21519

75901 Paris CEDEX 15

Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan...

text introEngie

more content inside

OpenClose


Cta ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
aside Boolean Yes 1 If true, the buttons will be pushed to the right half of the component while the text (title and text_before) will stay on the left. Also the text_after (if any) will not be included as it makes no sense in the "aside" case.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
text_before ⤵ Array of objects No 0 or more Config for each paragraph to be displayed before the button.
 text_before[i].paragraph String No 0 or more Content of the paragraph to be displayed before the button. Raw HTML is allowed.
buttons ⤵ Array of objects Yes 1 or more Config for each button to be displayed.
 buttons[j].url String Yes 1 Content of the href attribute on the button's link.
 buttons[j].attributes String No 0 or 1 Extra attributes for the link, such as target="_blank" rel="noopener"
 buttons[j].text String Yes 1 Text to be displayed inside the button.
 buttons[j].size String Yes 1 Size of the desired button. Has to be one of xs, sm, md, lg or xl.
 buttons[j].color String Yes 1 Desired color of the button. Has to be one of primary, secondary, ternary, success, warning, danger or neutral.
 buttons[j].classes String No 0 or 1 Extra classes for the button, such as btn--pill btn--outline
 buttons[j].icon_left String No 0 or 1 Id of the icon (from the sprite) to be displayed on the left of the button. You also can add flags adding flag name ( flag-es ) for example.
 buttons[j].icon_right String No 0 or 1 Id of the icon (from the sprite) to be displayed on the right of the button. You also can add flags adding flag name ( flag-es ) for example.

Nemo enim? Ipsam voluptatem ad

Excepteur sint occaecat cupidatat non proident, sunt in culpa. Qui officia deserunt mollit anim id est laborum.

Deserunt mollit
Sunt in culpa

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.


Faq ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
narrow Boolean No 0 or 1 If true, some extra margin will be added to the sides.
list ⤵ Array of objects Yes 1 or more Config for the questions/answers. Add as many as you want.
 list[i].opened String No 0 or 1 Default state for each collapse. Fill it as true only if you want the collapse to be open by default (recommended for the first question). Else, leave empty or remove it.
 list[i].question String Yes 1 Text of each "Frequent Asked Question". Corresponds to collapse's header.
 list[i].answer String Yes 1 Text of each "Frequent Asked Question"'s answer. Corresponds to collapse's content. Raw HTML is allowed.
 list[i].badges ⤵ Array of objects No 0 or more Config to display optional badges (as "tags" of the content).
  list[i].badges[j].text String Yes 1 Text displayed inside the badge.
  list[i].badges[j].url String Yes 1 Url the badge points to.
  list[i].badges[j].url String No 0 or 1 Optional extra attributes to your anchor tag, like target="_blank" rel="noopener".

Finibus Aliqua Quis

Nisi ut aliquid ex ea commodi consequatur?

Germentum iaculis eu non diam phasellus vestibulum lorem sed risus ultricies tristique nulla aliquet enim tortor at auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget duis at tellus at urna condimentum mattis pellentesque id nibh tortor id aliquet lectus proin nibh nisl condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas sed tempus urna et pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna eget est lorem ipsum dolor sit amet consectetur.

Vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut?

Llabore 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


Iframe ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
url String Yes 1 Content of the src attribute of the iframe tag. It's the location of the content you want to embed in your frame.
height String Yes 1 Height (in pixels) of the iframe. Should obviously be a number (integer).

Image--2-cols ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
heading String Yes 1 The HTML tag for the column's headings (for example h3) to be chosen depending on your purposes regarding SEO.
title String No 0 or 1 The content for the heading of this block.
heading_title String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
cols ⤵ Array of objects Yes 1 or more Config for the columns. Add as many as you want.
 cols[1].title String Yes 1 Content of each column's heading.
 cols[1].id No 0 or 1 Optional id to be added to the heading of the column, for it to be targetable by anchors or auto-summary.
 cols[1].text String No 0 or 1 Content of each column's description. Raw HTML is allowed.
 cols[1].image ⤵ Object Yes 1 Config of each column's image.
  cols[1].image.url String Yes 1 Location of the image to be displayed.
  cols[1].image.alt String Yes 1 Alternative text of the image to be displayed.

Section title

Guy

Lorem Ipsum

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Guy

Dolor Sit Amet

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem.


Image--aside ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
text String No 0 or 1 The text displayed at the top of left column. Raw HTML is allowed.
highlighted String No 0 or 1 The highlighted text (in bold) displayed at the bottom of left column. Raw HTML is allowed.
image ⤵ Object Yes 1 Config for the columns. Add as many as you want.
 image.url Array Yes 1 Location of the image to be displayed.
 image.alt Array Yes 1 Alternative text of the image to be displayed.
cta ⤵ Object No 0 or 1 Config for the cta at the end of the component.
 cta.link String No 0 or 1 Content of the href attribute of the link.
 cta.text String No 0 or 1 Text displayed inside the button.
 cta.attributes String No 0 or 1 Extra attributes for the link, such as target="_blank" rel="noopener".
 cta.color String No 0 or 1 Color of the button. You can choose between primary, secondary or ternary.

Lorem Ipsum

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.

Guy
Magnam aliquam

Links-list ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
links ⤵ Array of objects Yes 1 or more Config for the links to be displayed. Add as many as you want.
 links[i].link String Yes 1 Content of the href attribute of the link.
 links[i].attributes String No 0 or 1 Extra attributes for the link, such as target="_blank" rel="noopener".
 links[i].text String Yes 1 Text displayed on the link.
Magnam aliquamExcepteur sint occaecatError sit voluptatem

Numbers ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
text_before String Yes 1 The text displayed right before the numbers.
text_after String Yes 1 The text displayed right after the numbers.
color String Yes 1 Desired color of the counter + button. Has to be one of primary, secondary, ternary, success, warning, danger or neutral.
numbers ⤵ Array of objects Yes 1 or more Config for the numbers to be displayed. Add as many as you want.
 numbers[i].number String Yes 1 Digit to be displayed on each block of the counter. Obviously it has to be a one-digit number.
cta ⤵ Object No 0 or 1 Config for the button to be displayed at the right side of the component.
 cta.url String No 1 Content of the href attribute of the button.
 cta.custom_attr String No 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 cta.text String No 1 Text displayed inside the button.
 cta.icon ⤵ Object No 1 Config for the button's icon.
  cta.icon.position String No 1 Set left or right position for the icon.
  cta.icon.name String No 1 Id of the icon (from the sprite) to be used. You also can add flags adding flag name ( flag-es ) for example.
  cta.icon.extra_class String No 0 or 1 Set an additional CSS class for the icon, for example 270 for it to be rotated 270º clockwise (useful for arrow icons).
Magnam aliquam
9
9
9
9
9
9
excepteur
Velit esse

Process ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
icons_color String Yes 1 Color of the icons to be displayed for the steps. Can be one of primary, secondary, ternary, success, warning, danger or neutral.
steps ⤵ Array of objects Yes 2 or more Config for the steps of the component. Add as many as you want.
 steps[i].icon String Yes 1 Id of the icon (from the sprite) to be used. You also can add flags adding flag name ( flag-es ) for example.
 steps[i].text String Yes 1 Description of the step. Raw HTML is allowed.

Lorem Ipsum

1

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

3

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

4

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.


Process--horizontal ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
icons_color String Yes 1 Color of the icons to be displayed for the steps. Can be one of primary, secondary, ternary, success, warning, danger or neutral.
steps ⤵ Array of objects Yes 2 or more Config for the steps of the component. We recommend to add not more than 4.
 steps[i].icon String Yes 1 Id of the icon (from the sprite) to be used. You also can add flags adding flag name ( flag-es ) for example.
 steps[i].name String No 0 or 1 Name of the step (big highlighted text). Raw HTML is allowed.
 steps[i].text String No 0 or 1 Description of the step (normal text). Raw HTML is allowed.

Lorem Ipsum

1

Dolor sit

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

2

Duis aute urur

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

3

Finibus Bonorum

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

4

Duis aute urur

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.


Process--image ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
steps ⤵ Array of objects Yes 2 or more Config for the steps of the component. We recommend to add not more than 4.
 steps[i].image ⤵ Object Yes 1 Config for the image to be displayed.
  steps[i].image.url String Yes 1 Location of the image to be used.
  steps[i].image.alt String Yes 1 Alternative text of the image to be used.
 steps[i].name String No 0 or 1 Name of the step (big highlighted text). Raw HTML is allowed.
 steps[i].text String No 0 or 1 Description of the step (normal text). Raw HTML is allowed.
  • Lorem
    Lorem Ipsum
    Voluptatem accusantium doloremque laudantium
  • Lorem
    Demque laudantium
    Totam rem aperiam, eaque ipsa quae ab illo inventore
  • Lorem
    Sed quia non numquam
    Neque porro quisquam est, qui dolorem ipsum quia dolor

Providers ⬇ (click to see options)

Variable name Type Required Amount Description
container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
withAside Boolean No 1 Put true, if in your page has an aside block.
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
providers ⤵ Array of objects Yes 1 or more Config for images to be displayed on the marquee. Add as many as you want.
 providers[i].agrippa_image_id String Yes 1 Id of the image nº j to be used through agrippa_image(id, marquee) function.
 providers[i].image_url String No 0 or 1 Location of the image. Should be a logo. Needed only if agrippa_image_id is empty.
 providers[i].image_alt String Yes 1 Alternative text of the image.
button_hover Boolean Yes 1 If true, the button will be displayed on hover over the marquee. Else, it will be statically displayed under the marquee.
see_all ⤵ Object Yes 1 Config for the button.
 see_all.link String Yes 1 Content of the href attribute of the button's link
 see_all.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
 see_all.text String Yes 1 Text to be displayed inside the button.
 see_all.typeBtn Boolean Yes 1 If true, the link will be displayed as a btn--seconday button. Else it will simply be a link.

Ullam corporis suscipit

  • Lorem
  • Ipsum
  • Dolor
Quis nostrum exercitationem

Providers List ⬇ (click to see options)

Important!

  • This block only can have before hero--provider-list block. Also, a small block like a text-box or action-box. If you add another block, the aside is not going to work.
  • You only can use this block in a wide container (full width) content type.
  • The content after the provider list yaml block has to be inside the body. If you want to add yaml blocks, create a new custom block and add here your yaml blocks. Then, add the token in the body
  • You can add a badge__provider. This badge is designed to add a link to the rates. You can add it in the summary of the provider page, adding this markup: <div> <a class="badge__provider" href="#your-link"> Your text </a> </div>
Variable name Type Required Amount Description
title String No 0 or 1 The content for the heading of this block.
heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
base_url String No 0 or 1 The optional url to get the providers. If you delete it, it will take current url as base url. For example: 'energie/fournisseurs'
global_partners String No 0 or 1 It's optional. By default it's false If you put true all providers your site have, will appear (energy, telecom, finance...)
priority_list Array of objects No 0 or 1 It's optional. You can prioritized providers. They are going to appear first in the providers list. To do it, add the provider ID You can add all prioritized providers you want.
aside_filter ⤵ Object Yes 1 Config for the aside_filter component.
 aside_filter.title String Yes 1 Title for the aside component. For example: "Filter les fournisseurs"
 aside_filter.title_sm String Yes 1 Text inside the button that appears in tablet and mobiles sizes (the button will open a modal). For example: "Filter"
 aside_filter.apply String Yes 1 Text inside the button in the modal filter. This button applies the filters. For example: "Apply the filters"
 aside_filter.sort_providers ⤵ Object Yes 1 Config for the content inside the filter elements.
  aside_filter.sort_providers.group_label String Yes 1 Text to identify the filters. For example, if you're showing energy providers, you can write "Energy offered"
  aside_filter.sort_providers.label_for_all String Yes 1 Word to identify "all" filter. The normal use is to put "All" in your language.

Fournisseurs Electricité et Gaz : la liste en 2022

Remove Filters
Filtrer les fournissuers
logo Ekomi
1236 avis
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Badge link provider
    Logo SelectraSouscription facile
    En savoir plus
    logo Engie
    1236 avis
    Lorem ipsum dolor sit amet, consectetur adipiscing 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.
      Logo SelectraSouscription facile
      En savoir plus
      logo Alterna
      Lorem ipsum dolor sit amet, consectetur adipiscing 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.
        En savoir plus

        Direct Energie

        logo Direct Energie
        1236 avis
        Lorem ipsum dolor sit amet, consectetur adipiscing 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.
        Badge Provider Link
          Logo SelectraSouscription facile
          En savoir plus
          logo Antargaz
          Lorem ipsum dolor sit amet, consectetur adipiscing 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.
            En savoir plus
            logo EDF
            Lorem ipsum dolor sit amet, consectetur adipiscing 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.
              En savoir plus
              logo Enercoop
              Lorem ipsum dolor sit amet, consectetur adipiscing 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.
                En savoir plus

                Lampiris

                logo Lampiris
                Lorem ipsum dolor sit amet, consectetur adipiscing 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.
                  En savoir plus
                  logo Energem
                  1236 avis
                  Lorem ipsum dolor sit amet, consectetur adipiscing 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.
                    Logo SelectraSouscription facile
                    En savoir plus

                    Providers Static ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
                    bg_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
                    withAside Boolean No 1 Put true, if in your page has an aside block.
                    title String No 0 or 1 The content for the heading of this block.
                    heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
                    heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
                    providers ⤵ Array of objects Yes 1 or more Config for images to be displayed on the marquee. Add as many as you want.
                     providers[i].link String Yes 1 Link to provider page
                     providers[i].alt String No 0 or 1 Alternative text of the image.
                     providers[i].src String Yes 1 Suorce of logo.
                     providers[i].link_2 String Yes 1 Link to provider page
                     providers[i].alt_2 String No 0 or 1 Alternative text of the image.
                     providers[i].src_2 String Yes 1 Suorce of logo.
                    btn_more_info ⤵ Object Yes 1 Config for the button more info.
                     btn_more_info.text String Yes 1 Text displayed as link.
                     btn_more_info.link String Yes 1 Content of the href attribute of the button's link.
                     btn_more_info.icon String Yes 1 Icon to be displayed inside the button. You also can add flags adding flag name ( flag-es ) for example.
                     btn_more_info.custom_attributes String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
                    show_more_arrow ⤵ Object No 0 or 1 Config for the show_more_arrow to be displayed. It is optional.
                     intro String Yes 1 Text you can see.
                     openButton String Yes 1 Text with arrow to open collapse.
                     closeButton String Yes 1 Text with arrow to close collapse
                     collapseContent String Yes 1 Text inside collapse. Raw HTML is allowed.

                    Selectra compare 40 fournisseurs d’énergie de manière impartiale

                    AlternaAntargaz
                    Direct EnergieEDF
                    EnercoopEnergem
                    LamprisEngie
                    Voir la liste complète des fournisseurs

                    Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan...

                    text introEngie

                    more content inside

                    OpenClose


                    Satisfied Customers ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
                    bg_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
                    withAside Boolean No 1 Put true, if in your page has an aside block.
                    title String No 0 or 1 The content for the heading of this block.
                    heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
                    heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
                    star_rating ⤵ Object Yes 1 Config for the global rating.
                    rating Number Yes 1 The number (integer or one-decimal) corresponding to the average rating to be displayed. Note: You have to use a period(.) instead of a comma(,) for floating numbers.
                    evaluations String Yes 1 Text displayed right under the stars. Raw HTML is allowed.
                    dealers ⤵ Array of objects No 0 or 1 Config for the rating entities. Add no more than 3. You can choose between "dealers" and "progress_bar", but can't choose both at the same time.
                     dealers[i].logo_link String Yes 1 Content of the href attribute of the link (on the logo).
                     dealers[i].logo_src String Yes 1 Location of the image to display. Should be the logo of the dealer.
                     dealers[i].logo_custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
                     dealers[i].logo_alt String Yes 1 Alternative text of the image to display.
                     dealers[i].number Number Yes 1 The number (integer or one-decimal) corresponding to the rating to be displayed. Note: You have to use a period(.) instead of a comma(,) for floating numbers.
                     dealers[i].fraction Number No 0 or 1 The number corresponding to the max rating. By default it is 5.
                    progress_bar ⤵ Objects No 0 or 1 Config for the progress bar reviews. You can choose between "dealers" and "progress_bar", but can't choose both at the same time.
                     rating_1 Number Yes 1 Number of ratings for rating 1.
                     rating_2 Number Yes 1 Number of ratings for rating 2.
                     rating_3 Number Yes 1 Number of ratings for rating 3.
                     rating_4 Number Yes 1 Number of ratings for rating 4.
                     rating_5 Number Yes 1 Number of ratings for rating 5.
                    testimonials ⤵ Array of objects Yes 1 or more Config for the cusomers' reviews. Add no more than 3.
                     reviews[j].author String No 0 or 1 Name of the customer that left the review. By default it is "Anonymous".
                     reviews[j].rating Number Yes 1 The number (integer or one-decimal) corresponding to the rating from the customer. Note: You have to use a period(.) instead of a comma(,) for floating numbers.
                     reviews[j].show_more ⤵ Object Yes 1 Config for "show more" component.
                      reviews[j].show_more.text String Yes 1 Comment left by the customer. If it is longer than 100 characters, it will be cut and hidden unless the user makes the action of opening the whole comment. Raw HTML is allowed.
                      reviews[j].show_more.seeMore String Yes 1 Text corresponding to "show more" or "show whole comment" on comments longer than 100 chars. This variable was added for translation purposes.
                      reviews[j].show_more.seeLess String Yes 1 Text corresponding to "show less" on comments longer than 100 chars. This variable was added for translation purposes.
                    btn_more_info ⤵ Object No 0 or 1 Config for the first link at the bottom of the component. This button is optional.
                     btn_more_info.text String Yes 1 Text displayed on the link.
                     btn_more_info.link String Yes 1 Content of the href attribute of the link.
                     btn_more_info.custom_attributes String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
                    btn_share ⤵ Object No 0 or 1 Config for the first link at the bottom of the component. This button is optional.
                     btn_share.text String Yes 1 Text displayed on the link.
                     btn_share.link String Yes 1 Content of the href attribute of the link.
                     btn_share.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"

                    Ils ont comparé les offres avec Selectra, voici leurs avis

                    4.6/5
                    Note moyenne basée sur plus de 3000 avis
                    img ekomi
                    4.9/5
                    img trustpilot
                    4.9/5
                    img google
                    4.7/5
                    Gilles

                    Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus.

                    See moreClose
                    Robby

                    Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla.

                    See moreClose
                    Mercedes

                    Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Etiam tristique egestas mauris eu fringilla. Phasellus ac neque a orci mattis tincidunt eget eget ante. Maecenas placerat sapien quis purus scelerisque sed porta urna vehicula. Sed eros turpis, bibendum non ullamcorper at, euismod in nulla. Morbi eleifend sodales risus. Maecenas eu nisl ut ante dictum scelerisque.

                    See moreClose
                    Voir la liste complète des avis clients Partager mon expérience

                    Satisfied Customers (Dynamic) ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
                    bg_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
                    withAside Boolean No 1 Put true, if in your page has an aside block.
                    title String No 0 or 1 The content for the heading of this block.
                    heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
                    heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
                    upi String No* 0 or 1 The UPI of the provider you want the reviews to be displayed about. Required only if you are not on a provider's page, or if you are but you want the reviews of a different provider to be displayed.
                    To know it, go to /admin/content/customer_reviews and you will see each provider UPI.

                    Lorem Ipsum Dolor Sit Amet

                    4.6/5
                    Note moyenne basée sur plus de 3000 avis
                    img ekomi
                    4.9/5
                    img trustpilot
                    4.9/5
                    img google
                    4.7/5
                    Gilles

                    Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus.

                    See moreClose
                    Robby

                    Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla.

                    See moreClose
                    Mercedes

                    Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum varius sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Etiam tristique egestas mauris eu fringilla. Phasellus ac neque a orci mattis tincidunt eget eget ante. Maecenas placerat sapien quis purus scelerisque sed porta urna vehicula. Sed eros turpis, bibendum non ullamcorper at, euismod in nulla. Morbi eleifend sodales risus. Maecenas eu nisl ut ante dictum scelerisque.

                    See moreClose
                    Voir la liste complète des avis clients Partager mon expérience

                    Share ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
                    background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
                    withAside Boolean No 1 Put true, if in your page has an aside block.
                    title String No 0 or 1 The content for the heading of this block.
                    heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
                    heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
                    icons_size String Yes 1 Desired size of the buttons. Has to be one of xs, sm, md, lg or xl.
                    networks ⤵ Array of objects Yes 1 or more Config for the icons to be displayed. Add as many as you want but keep in mind that only Facebook, Twitter and Linkedin are supported.
                     networks[i].name String Yes 1 Name of the network. Has to be one of facebook, twitter or linkedin.
                     networks[i].url String Yes 1 Content of the href attribute of the link.
                     networks[i].attributes String No 0 or 1 Extra attributes for the link, such as target="_blank" rel="noopener".

                    Reprehenderit


                    Small-print ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
                    background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
                    text ⤵ Array of objects Yes 1 or more Config for the paragraphs to be displayed. Add as many as you want.
                     text[i].paragraph String Yes 1 Text to be displayed in each paragraph. Raw HTML is allowed.

                    (1) Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

                    (2) Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

                    (3) Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.


                    Text--images-alternating ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
                    background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
                    withAside Boolean No 1 Put true, if in your page has an aside block.
                    title String No 0 or 1 The content for the heading of this block.
                    heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
                    heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
                    intro String No 0 or 1 Optional introduction text (highlighted) for this component. Raw HTML is allowed.
                    hide_images_mobile Boolean No 1 or 0 If true, the images will be hidden on mobile devices.
                    blocks_heading String Yes 1 The HTML tag for the blocks heading (for example h4) to be chosen depending on your purposes regarding SEO.
                    blocks ⤵ Array of objects Yes 1 or more Config for the blocks to be displayed. Add as many as you want, they will alternate automatically.
                     blocks[i].title String No 0 or 1 Title of each block.
                      blocks[i].paragraphs[j] Array of strings Yes 1 or more Content of each paragraph on the block.
                     blocks[i].image ⤵ Object Yes 1 Configuration for the image of each block.
                      blocks[i].image.url String Yes 1 Location of the image to display. It should be in svg format.
                      blocks[i].image.alt String Yes 1 Alternative text of the image.
                      blocks[i].image.caption String No 0 or 1 Optional caption for the image.

                    Quis autem vel eum iure reprehenderit

                    Duis finibus urna elit, sed ullamcorper lectus auctor eu. Ut sit amet sodales turpis, ac congue odio. Cras felis lacus, bibendum at augue id, rutrum pharetra purus. Morbi est tortor, blandit eu sem sed, suscipit tristique eros.

                    Pellentesque commodo quam hendrerit dignissim blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae

                    Pellentesque
                    From 65 sells in 2007 to 800K in 2019!

                    Eu auctor Selectra

                    2007: ANTE IPSUM

                    Duis finibus urna elit, sed ullamcorper lectus auctor eu. Ut sit amet sodales turpis, ac congue odio. Cras felis lacus, bibendum at augue id, rutrum pharetra purus. Morbi est tortor, blandit eu sem sed, suscipit tristique eros.

                    Pellentesque commodo quam hendrerit dignissim blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

                    Posuere

                    Selectra quam henderit

                    Duis finibus urna elit, sed ullamcorper lectus auctor eu. Ut sit amet sodales turpis, ac congue odio. Cras felis lacus, bibendum at augue id, rutrum pharetra purus. Morbi est tortor, blandit eu sem sed, suscipit tristique eros.

                    Pellentesque commodo quam hendrerit dignissim blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

                    Pellentesque
                    Progression of customers since 2014

                    Eu auctor Selectra

                    2007: ANTE IPSUM

                    Duis finibus urna elit, sed ullamcorper lectus auctor eu. Ut sit amet sodales turpis, ac congue odio. Cras felis lacus, bibendum at augue id, rutrum pharetra purus. Morbi est tortor, blandit eu sem sed, suscipit tristique eros.

                    Pellentesque commodo quam hendrerit dignissim blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

                    Posuere

                    Selectra quam henderit

                    Duis finibus urna elit, sed ullamcorper lectus auctor eu. Ut sit amet sodales turpis, ac congue odio. Cras felis lacus, bibendum at augue id, rutrum pharetra purus. Morbi est tortor, blandit eu sem sed, suscipit tristique eros.

                    Pellentesque commodo quam hendrerit dignissim blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.


                    Text--numbers ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    container Boolean Yes 1 If true, the component will be contained in a wrapper preventing it to take the whole width of the page. Set it as false for all pages that are not full-width (they have an aside).
                    background_pastel Boolean Yes 1 If true, the component's whole section will have a pastel blue background. Use it to distinguish sections only on full-width pages.
                    withAside Boolean No 1 Put true, if in your page has an aside block.
                    title String No 0 or 1 The content for the heading of this block.
                    heading String No 0 or 1 The HTML tag for the heading (for example h3) to be chosen depending on your purposes regarding SEO. Required only if title is not empty. Default is h2.
                    heading_id String No 0 or 1 The optional id to be added to the heading of the block, for it to be targetable by anchors or auto-summary.
                    paragraphs ⤵ Array of objects Yes 1 or more Config for the paragraphs to be displayed. Add as many as you want.
                     paragraphs[i].paragraph String Yes 1 Content of each paragraph. Raw HTML is allowed.
                    numbers ⤵ Object Yes 1 Configuration for the numbers on the right side of the block.
                     numbers.number String Yes 1 Big number you want to highlight. Should obviously be a number.
                     numbers.unit String Yes 1 Unit of the number. Has to be very short.
                     numbers.text String Yes 1 Big text right under the number.
                     numbers.disclaim String Yes 1 Small text at the bottom.

                    Quis autem vel eum iure reprehenderit

                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

                    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet. Ut enim ad.

                    Nisi ut aliquid ex (ea commodi consequatur).

                    999Munde omnis istenatus error sit voluptatem accusantium


                    Versus--card-prod ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    header ⤵ Object Yes 1 Config for the header
                     header.text_top String No 0 or 1 Text in the header at top.
                     header.big_number String Yes 1 Text bigger in the header.
                     header.text_bottom String No 0 or 1 Text in the header at bottom.
                    card_title String Yes 1 The card title.
                    list ⤵ Array Yes 1 Config for the list.
                     list.text String Yes 1 Content of the item in the list. Raw HTML is allowed.
                     list.green Boolean Yes 1 If it is true the item text will be in green. If you put false it will be in grey.
                    button ⤵ Object Yes 1 Config for the button.
                     button.link String Yes 1 Link of the button.
                     button.text String Yes 1 Text of the button.
                     button.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
                    Logo provider
                    Header Top text-5%Header Bottom text
                    Title card
                    • item in list
                    • item in list
                    • item in list

                    Versus--comments ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    sort String Yes 1 You can choose between best, most_useful, worst or all to select your comment to show.
                    Logo provider
                    Name28/10/21

                    Je tiens particulièrement à remercier votre conseillère que j'ai eu ce matin concernant ma situation de déménagement : un très bon relationnel avec une voix très agréable, elle a répondu à mes questions et l'entretien a été très clair et s'est très bien déroulé...Bravo!

                    See moreSee less
                    More info

                    Versus--contact ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    btn ⤵ Object Yes 1 Config for the list.
                     btn.color String Yes 1 Select the button color. You can choose between primary, secondary or ternary.
                     btn.outline Boolean Yes 1 Put true if you want your button outlined. If not, change to false
                     btn.pill Boolean Yes 1 Put true if you want your button like a pill. If not, change to false
                     btn.text String Yes 1 Text inside the button.
                     btn.link String Yes 1 Link added in the button.
                     btn.custom_attr String No 0 or 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
                    Logo provider
                    Button text

                    Versus--list-icons ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    list_icons ⤵ Array Yes 1 Config for the list.
                     list_icons.icon String Yes 1 Title for the list.
                     list_icons.text Array Yes 1 Config for the items in the list. Raw HTML is allowed.
                    Logo provider

                    Lorem ipsum

                    Lorem ipsum


                    Versus--list ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    section ⤵ Array Yes 1 Config for the list.
                     section.title String Yes 1 Title for the list.
                     section.list Array Yes 1 Config for the items in the list.
                      section.list.link String No 0 or 1 Link to the item. It is optional. If you don't fill it, the text will be a span
                      section.list.text String Yes 1 Text for the item in list. If you add the link it will be a link. If not, it will be a span
                    Logo provider

                    Energie

                    • Link
                    • Link
                    • Link

                    Gaz

                    • Link
                    • Link

                    Versus--prices ⬇ (click to see options)

                    Variable name Type Required Amount Description
                     rating.baseline String Yes 1 Text at the right of the stars. Raw HTML is allowed.
                    row ⤵ Array Yes 1 Config for each row of the section.
                     row.title String Yes 1 Row title. Raw HTML is allowed.
                     row.data_actual String Yes 1 Data for the actual provider. If you are writting the config for the provider 1, you have to add here the data for provider 1.
                     row.data_oppsite String Yes 1 Data for the opposite provider. If you are writting the config for the provider 1, you have to add here the data for provider 2.
                     row.suffix String Yes 1 Suffix for data for actual provider. For example €/kWh
                    btn_more_info_actual ⤵ Object Yes 1 Config for button more info of the actual provider. If you are writting the config for the provider 1, you have to add here the data for provider 1.
                     btn_more_info_actual.link String Yes 1 Link for the button more info actual provider.
                     btn_more_info_actual.text String Yes 1 Text for the button more info actual provider.
                     btn_more_info_actual.custom_attr String Yes 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
                    btn_more_info_opposite ⤵ Object Yes 1 Config for button more info of the actual provider. If you are writting the config for the provider 1, you have to add here the data for provider 2.
                     btn_more_info_opposite.link String Yes 1 Link for the button more info actual provider.
                     btn_more_info_opposite.text String Yes 1 Text for the button more info actual provider.
                     btn_more_info_opposite.custom_attr String Yes 1 Custom attributes if you want. Like target="_blank" rel="nofollow"
                    footer_text_actual String No 0 or 1 Content for the footer of actual provider. If you are writting the config for the provider 1, you have to add here the data for provider 1. Raw HTML is allowed.
                    footer_text_mobile String No 0 or 1 Content for the footer only for mobile. This footer is shared by both providers. Raw HTML is allowed.

                    Title 1

                    Provider 1 dataProvider 2 data

                    Title 2

                    Provider 1 dataProvider 2 data

                    Title 3

                    Provider 1 dataProvider 2 data
                    More info

                    Footer desktop

                    Footer mobile


                    Versus--pros-cons ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    list_type String Yes 1 You can choose between check or cross
                    list ⤵ Array Yes 1 If you have added a custom background img, here you can add the alternative img.
                     list.text String Yes 1 Text inside the list. Raw HTML is allowed.
                    Logo provider
                    • Lorem ipsum
                    • Lorem ipsum
                    • Lorem ipsum
                    • Lorem ipsum

                    Versus--reviews ⬇ (click to see options)

                    Variable name Type Required Amount Description
                    - - - - No variables needed
                    Logo provider
                    4.5/5
                    Average rating based on over 3987 votes
                    5
                    70%
                    4
                    80%
                    3
                    50%
                    2
                    20%
                    1
                    7%