Vos factures sont réglées par prélèvement automatique.
Box
Mode de règlement
Ce que je dois
1 impayé
66,67€
Prochain prélèvement le 30/04/2022.
Comprendre ma facture
Vous avez des questions à propos de votre facture ?
Mon énergie solidaire
Ensemble, soutenons les ménages.
Mon énergie solidaire
Ensemble, soutenons les ménages.
Mon énergie solidaire
Ensemble, soutenons les ménages.
Mon énergie solidaire
Ensemble, soutenons les ménages.
Mon énergie solidaire
Ensemble, soutenons les ménages.
Mon énergie solidaire
Ensemble, soutenons les ménages.
.row
.col-xs-12.col-md-4.flex-column.mb-3
= box_badge( \
type: :info,
icon_class: "ph-credit-card",
box_title: "Mode de règlement",
link_url: "#",
link_text: "Passez à la mensualisation") do
p Vos factures sont réglées par prélèvement automatique.
.col-xs-12.col-md-4.flex-column.mb-3
= box_badge( \
type: :danger,
icon_class: "ph-credit-card",
box_title: " Ce que je dois",
pill_text: "1 impayé",
link_url: "#",
link_text: "Payer mon solde") do
.align-center
h5 66,67€
p Prochain prélèvement le 30/04/2022.
.col-xs-12.col-md-4.flex-column.mb-3
= box_badge( \
type: :info,
icon_class: "ph-question",
box_title: "Comprendre ma facture",
link_url: "#",
link_text: "En savoir plus",
link_icon: "ph-download-simple-bold") do
p Vous avez des questions à propos de votre facture ?
.row
.col-xs-12.col-md-4.mb-3
= box_couleur( \
image_src: "images/story_book/image-450.png",
box_title: "Mon énergie solidaire",
box_color: DesignSystemHelper::BOX_COLOR_BLUE,
link_url: "#",
link_text: "Devenir micro-donateur",
) do
p Ensemble, soutenons les ménages.
.col-xs-12.col-md-4.mb-3
= box_couleur( \
image_src: "images/story_book/image-450x300.png",
box_title: "Mon énergie solidaire",
box_color: DesignSystemHelper::BOX_COLOR_GREEN,
link_url: "#",
link_text: "Devenir micro-donateur",
) do
p Ensemble, soutenons les ménages.
.col-xs-12.col-md-4.mb-3
= box_couleur( \
image_src: "images/story_book/image-300x450.png",
box_title: "Mon énergie solidaire",
box_color: DesignSystemHelper::BOX_COLOR_TURQUOISE,
link_url: "#",
link_text: "Devenir micro-donateur",
) do
p Ensemble, soutenons les ménages.
.row
.col-xs-12.col-md-4.mb-3
= box_couleur( \
image_src: "images/story_book/image-300x450.png",
box_title: "Mon énergie solidaire",
box_color: DesignSystemHelper::BOX_COLOR_YELLOW,
link_url: "#",
link_text: "Devenir micro-donateur",
) do
p Ensemble, soutenons les ménages.
.col-xs-12.col-md-4.mb-3
= box_couleur( \
image_src: "images/story_book/image-300x450.png",
box_title: "Mon énergie solidaire",
box_color: DesignSystemHelper::BOX_COLOR_RED,
link_url: "#",
link_text: "Devenir micro-donateur",
) do
p Ensemble, soutenons les ménages.
.col-xs-12.col-md-4.mb-3
= box_couleur( \
image_src: "images/story_book/image-300x450.png",
box_title: "Mon énergie solidaire",
box_color: DesignSystemHelper::BOX_COLOR_BLUE,
link_url: "#",
link_text: "Devenir micro-donateur",
) do
p Ensemble, soutenons les ménages.
Box inside grid
Ce que je dois
Vous n'avez pas encore de facture.
Mode de règlement
Astuce : Économisez jusqu’a 11% sur votre facture d’électricité en débranchant vos appareils électriques en veille !
Un lien ici !
Comprendre ma facture
Vous avez des questions à propos de votre facture ?
Énergie solidaire
Ensemble, soutenons des actions de lutte contre la précarité énergétique.
Énergie solidaire
Ensemble, soutenons des actions de lutte contre la précarité énergétique.
Énergie solidaire
Ensemble, soutenons des actions de lutte contre la précarité énergétique.
.grid
.grid-1.mb-3
= box_badge( \
type: :info,
icon_class: "ph-credit-card",
box_title: "Ce que je dois") do
.align-center
p Vous n'avez pas encore de facture.
.grid-2.mb-3
= box_badge( \
type: :info,
icon_class: "ph-chart-bar",
box_title: "Mode de règlement",
link_url: "#",
link_text: "Détail de ma consommation") do
.align-center
p Astuce : Économisez jusqu’a 11% sur votre facture d’électricité en débranchant vos appareils électriques en veille !
= link_to "Un lien ici !", "http://www.example.com", class: "mb-1"
= vite_image_tag("images/story_book/image-450.png")
.grid-3.mb-3
= box_badge( \
type: :info,
icon_class: "ph-question",
box_title: "Comprendre ma facture",
link_url: "#",
link_text: "En savoir plus",
link_icon: "ph-download-simple-bold") do
p Vous avez des questions à propos de votre facture ?
.grid-4.mb-3
= box_image( \
type: :info,
image_src: "images/story_book/image-300x450.png",
box_title: "Énergie solidaire",
box_color: DesignSystemHelper::BOX_COLOR_BLUE,
link_url: "#",
link_text: "Souscrire au micro-don") do
p Ensemble, soutenons des actions de lutte contre la précarité énergétique.
.grid-5.mb-3
= box_couleur( \
image_src: "images/story_book/image-450x300.png",
box_title: "Énergie solidaire",
box_color: DesignSystemHelper::BOX_COLOR_BLUE,
link_url: "#",
link_text: "Souscrire au micro-don") do
p Ensemble, soutenons des actions de lutte contre la précarité énergétique.
.grid-6.mb-3
= box_image( \
type: :warning,
image_src: "images/story_book/image-450x300.png",
box_title: "Énergie solidaire",
box_color: DesignSystemHelper::BOX_COLOR_YELLOW,
link_url: "#",
link_text: "Souscrire au micro-don") do
p Ensemble, soutenons des actions de lutte contre la précarité énergétique.
Services Energétiques Grid layout
.grid.grid-se
.mb-3.flex
= box_clickable( \
box_title: "Accueil Storybook",
link_url: "http://www.enercoop.localhost:8080/story-book",
icon_class: "ph-house",
pill_text: "S'informer",
pill_color: "bleu-fonce",
link_attributes: { target: "_self", title: "Accueil Storybook" }) do
.prismic-html.mh-3
p
= "Une page qui réunit tous nos composants front pour FSD. Le lien s'ouvre dans le même onglet. Le contenu vient de Prismic."
picture
= vite_image_tag("images/story_book/image-450.png", class: "vertical-box-img")
.mb-3.flex
= box_clickable( \
box_title: "Accueil Storybook",
link_url: "http://www.enercoop.localhost:8080/story-book",
icon_class: "ph-sun",
pill_text: "S'informer",
pill_color: "jaune",
link_attributes: { target: "_blank", title: "Accueil Storybook" }) do
.prismic-html.mh-3
p
= "Une page qui réunit tous nos composants front pour FSD. Le lien s'ouvre dans un nouvel onglet."
.mb-3.flex
= box_clickable( \
box_title: "Accueil Storybook",
link_url: "http://www.enercoop.localhost:8080/story-book",
icon_class: "ph-alarm",
pill_text: "S'informer",
pill_color: "vert",
link_attributes: { target: "_blank", title: "Accueil Storybook" }) do
p.mb-1
= "Une page qui réunit tous nos composants front pour FSD. Le contenu ne vient pas de Prismic."
.mb-3.flex
= box_clickable( \
box_title: "Accueil des box du Storybook",
link_url: "http://www.enercoop.localhost:8080/story-book/components/box",
icon_class: "ph-gauge",
pill_text: "S'informer",
pill_color: "rouge",
link_attributes: { target: "_blank", title: "Accueil Storybook" }) do
.prismic-html.mh-3
p
= "Une page qui réunit tous nos types de box."
.mb-3.flex
= box_clickable( \
box_title: "Accueil Storybook",
link_url: "http://www.enercoop.localhost:8080/story-book",
icon_class: "ph-wrench",
pill_text: "S'informer",
pill_color: "turquoise",
link_attributes: { target: "_blank", title: "Accueil Storybook" }) do
.prismic-html.mh-3
p
= "Une page qui réunit tous nos composants front pour FSD. Le lien s'ouvre dans un nouvel onglet."
.mb-3.flex
= box_clickable( \
box_title: "Accueil Storybook",
link_url: "http://www.enercoop.localhost:8080/story-book",
icon_class: "ph-student",
pill_text: "S'informer",
pill_color: "jaune",
link_attributes: { target: "_blank", title: "Accueil Storybook" }) do
.prismic-html.mh-3
p
= "Une page qui réunit tous nos composants front pour FSD. Le lien s'ouvre dans un nouvel onglet."
.mb-3.flex
= box_clickable( \
box_title: "Accueil Storybook",
link_url: "http://www.enercoop.localhost:8080/story-book",
pill_text: "Un label arbitraire",
pill_color: "jaune",
link_attributes: { target: "_blank", title: "Accueil Storybook" }) do
.prismic-html.mh-3
p
= "Une page qui réunit tous nos composants front pour FSD. Pas d'image dans une grande box. Et pas de picto !"
.mb-3.flex
= box_clickable( \
box_title: "Accueil Storybook",
link_url: "http://www.enercoop.localhost:8080/story-book",
icon_class: "ph-calendar",
pill_text: "S'informer",
pill_color: "rouge",
link_attributes: { target: "_blank", title: "Accueil Storybook" }) do
.prismic-html.mh-3
p
= "Une page qui réunit tous nos composants front pour FSD. Le lien s'ouvre dans un nouvel onglet."
.mb-3.flex
= box_clickable( \
box_title: "Accueil Storybook",
link_url: nil,
icon_class: "ph-megaphone",
pill_text: "S'informer",
pill_color: "turquoise",
link_attributes: {}) do
.prismic-html.mh-3
p
= "Une page qui réunit tous nos composants front pour FSD. Pas de lien (la box lie à la page courante)."
.mb-3.flex
= box_clickable( \
box_title: "Accueil Storybook",
link_url: "http://www.enercoop.localhost:8080/story-book",
icon_class: "ph-gear",
pill_text: "S'informer",
pill_color: "jaune",
link_attributes: { target: "_blank", title: "Accueil Storybook" }) do
.prismic-html.mh-3
p
= "Une page qui réunit tous nos composants front pour FSD. Une image dans une petite box"
picture
= vite_image_tag("images/story_book/image-450.png", class: "vertical-box-img")
Box Accueil ECPPP
Bonjour Frédéric Dupon
Bienvenue dans votre espace client
Vous démenagez prochainement ?
Enercoop vous accompagne et récompense votre fidélité.
Je consomme au bon moment
Je m'inscris à l'Opération Flexibilité pour être alerté.e par e-mail lorsque baisser ma consommation est important pour équilibrer consommation et production d'électricité renouvelable.
Ce que je dois
Vous n'avez pas encore de facture.
Mode de règlement
Astuce : Économisez jusqu’a 11% sur votre facture d’électricité en débranchant vos appareils électriques en veille !
Un lien ici !Comprendre ma facture
Vous avez des questions à propos de votre facture ?
Énergie solidaire
Ensemble, soutenons des actions de lutte contre la précarité énergétique.
Énergie solidaire
Ensemble, soutenons des actions de lutte contre la précarité énergétique.
.grid.welcome-grid
.mb-2
.p-2
h1.h4-size Bonjour Frédéric Dupon
p Bienvenue dans votre espace client
.welcome-nav
div.mb-1
= link_to "#", class: "link" do
i.ph-box-arrow-down
| Télécharger mon justificatif de domicile
div.mb-1
= link_to "#", class: "link" do
i.ph-arrow-right-bold
| Connaître mes heures creuses
div
= link_to "#", class: "link" do
i.ph-arrow-right-bold
| Souscrire à un nouveau contrat
.mb-2
= box_background( \
image_src: "images/story_book/image-450x300.png",
box_title: "Vous démenagez prochainement ?",
box_text_color: DesignSystemHelper::BOX_COLOR_WHITE,
box_bg_color: DesignSystemHelper::BOX_COLOR_BLUE,
link_url: "#",
link_text: "Rendez-vous ici",
link_attributes: {},
remote_image: false,) do
p Enercoop vous accompagne et récompense votre fidélité.
.mb-2
= box_couleur( \
image_src: "images/story_book/image-450x300.png",
box_title: "Je consomme au bon moment",
box_color: DesignSystemHelper::BOX_COLOR_BLUE) do
.prismic-html.mb-1
p
' Je m'inscris à l'Opération Flexibilité pour être alerté.e
' par e-mail lorsque baisser ma consommation est important pour équilibrer
| consommation et production d'électricité renouvelable.
.mb-2
= box_badge( \
type: :info,
icon_class: "ph-credit-card",
box_title: "Ce que je dois") do
.align-center
p Vous n'avez pas encore de facture.
.mb-2
= box_badge( \
type: :info,
icon_class: "ph-chart-bar",
box_title: "Mode de règlement",
link_url: "#",
link_text: "Détail de ma consommation") do
.align-center
p Astuce : Économisez jusqu’a 11% sur votre facture d’électricité en débranchant vos appareils électriques en veille !
= link_to "Un lien ici !", "http://www.example.com", class: "mb-1"
= vite_image_tag("images/story_book/image-450.png")
.mb-2
= box_badge( \
type: :info,
icon_class: "ph-question",
box_title: "Comprendre ma facture",
link_url: "#",
link_text: "En savoir plus",
link_icon: "ph-download-simple-bold") do
p Vous avez des questions à propos de votre facture ?
.mb-2
= box_image( \
type: :info,
image_src: "images/story_book/image-300x450.png",
box_title: "Énergie solidaire",
box_color: DesignSystemHelper::BOX_COLOR_BLUE,
link_url: "#",
link_text: "Souscrire au micro-don") do
p Ensemble, soutenons des actions de lutte contre la précarité énergétique.
.mb-2
= box_couleur( \
image_src: "images/story_book/image-450x300.png",
box_title: "Énergie solidaire",
box_color: DesignSystemHelper::BOX_COLOR_BLUE,
link_url: "#",
link_text: "Souscrire au micro-don") do
p Ensemble, soutenons des actions de lutte contre la précarité énergétique.