Quarks

Colors

/sass/_quarks/_colors.scss
  • $white-001
    #fff
  • $white-002
    #e7eef0
  • $grey-001
    #38373a
  • $grey-002
    #6b6c6e
  • $grey-003
    #98999b
  • $grey-004
    #c2c3c4
  • $navy-001
    #105269
  • $navy-002
    #4b7284
  • $navy-003
    #728f9b
  • $navy-004
    #b7c9cd
  • $green-001
    #1b5926
  • $green-002
    #4ba839
  • $green-003
    #9fcb8d
  • $red-001
    #c7412b
  • $red-002
    #e77852
  • $red-003
    #eba589
  • $blue-001
    #0d5d8b
  • $blue-002
    #417a9b
  • $blue-003
    #6197b5

Icons

/sass/_quarks/_icons.scss

Implementation

Import __macros/icons.twig to use icons as macros. Each icon can be called with the following code: {{ icon.get(name) }}.


    {% import '__macros/icons.twig' as icon %}

    {{ icon.get('external') }}
    {{ icon.get('download') }}
    {{ icon.get('arrow-left') }}
    {{ icon.get('arrow-right') }}
    {{ icon.get('chevron-up') }}
    {{ icon.get('chevron-down') }}
    {{ icon.get('chevron-left') }}
    {{ icon.get('chevron-right') }}
    {{ icon.get('check-mark') }}
    {{ icon.get('info') }}
    {{ icon.get('time') }}
    {{ icon.get('pricetag') }}
    {{ icon.get('house') }}
    {{ icon.get('boiler') }}
    {{ icon.get('hellend-dak') }}
    {{ icon.get('plat-dak') }}
    {{ icon.get('gemengd-dak') }}
    {{ icon.get('vloer-volle-grond') }}
    {{ icon.get('vloer-boven-kelder') }}
    {{ icon.get('vloer-gemengd') }}
    {{ icon.get('open-bebouwing') }}
    {{ icon.get('halfopen-bebouwing') }}
    {{ icon.get('gesloten-bebouwing') }}
    {{ icon.get('appartement') }}
    {{ icon.get('isolatiegraad-goed') }}
    {{ icon.get('isolatiegraad-matig') }}
    {{ icon.get('isolatiegraad-slecht') }}
    {{ icon.get('energie-efficientie') }}
    {{ icon.get('impact-co2') }}
    {{ icon.get('investeringskost') }}
    {{ icon.get('koeling') }}
    {{ icon.get('mythe-vloerverwarming') }}
    {{ icon.get('terugverdientijd') }}
	

Typography

/sass/_quarks/_typography.scss

Font stack

Primary font: Flanders Art Sans
Base font-size: 16px


Implementation

Import __macros/titles.twig to use titles as macros. Each title can be called with the following code: {{ title.main(tag, content, classes) }}.

<h1> - Flanders Art Sans (700) - 48px - line-height: 58px

Heading 1

<h2> - Flanders Art Sans (700) - 32px - line-height: 38px

Heading 2

<h3> - Flanders Art Sans (500) - 26px - line-height: 31px

Heading 3

<h4> - Flanders Art Sans (500) - 22px - line-height: 24px

Heading 4

<h5> - Flanders Art Sans (500) - 20px - line-height: 28px
Heading 5

  {% import '__macros/titles.twig' as title %}

  {{ title.main('h1', 'Heading 1') }}
  {{ title.main('h2', 'Heading 2') }}
  {{ title.main('h3', 'Heading 3') }}
  {{ title.main('h4', 'Heading 4') }}
  {{ title.main('h5', 'Heading 5') }}
  {{ title.main('h6', 'Heading 6') }}
	

<p class="body-lg"> - Flanders Art Sans (400) - 22px - line-height: 33px

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.

<p> - Flanders Art Sans (400) - 16px - line-height: 24px

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.

<p class="body-sm"> - Flanders Art Sans (400) - 14px - line-height: 21px

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.


  

Large paragraph

Medium paragraph

Small paragraph

Atoms

Buttons

/sass/atoms/_buttons.scss

Implementation

Import __macros/buttons.twig to use buttons as macros and __macros/icons.twig to call icons inside a button. Each button can be called with the following code: {{ button.main(type, url, content, classes, icon, disabled) }}.


	{% import '../__macros/buttons.twig' as button %}

	{{ button.main('primary', null, 'Primary button') }}
	{{ button.main('primary', null, 'Disabled button', null, null, 'button', false, null, true) }}
	{{ button.main('outlined', null, 'Outlined button') }}
	{{ button.main('outlined', null, 'Disabled button', null, null, 'button', false, null, true) }}
	


	{% import '../__macros/buttons.twig' as button %}
	{% import '../__macros/icons.twig' as icon %}

	{{ button.main('primary', null, 'Button with icon', null, null, 'button', icon.get('arrow-right')) }}
	{{ button.main('primary', null, 'Button with icon', 'icon-left', null, 'button', icon.get('arrow-left')) }}
	

Form Elements

/sass/atoms/form-elements

General principle

Each input field should have a label and inform users about the kind of input they need to provide. This info-text switches functionality during the user flow: information becomes inline validation/immediate feedback. The tone of voice should be human and add personality to the experience/brand.

Default inputs

/sass/atoms/_input.scss
Tell the user what kind of input is expected.
Tell the user what kind of input is expected.
Tell the user what kind of input is expected.
Tell the user what kind of input is expected.
Tell the user what kind of input is expected.
Tell the user what kind of input is expected.

  
Tell the user what kind of input is expected.
Tell the user what kind of input is expected.
Tell the user what kind of input is expected.
Tell the user what kind of input is expected.
Tell the user what kind of input is expected.
Tell the user what kind of input is expected.

Tell the user what kind of input is expected.

  {% import '../__macros/buttons.twig' as button %}

  
{{ button.main('primary', null, 'Search', 'js-search') }}
Tell the user what kind of input is expected.

Tell the user what kind of input is expected.

  
Tell the user what kind of input is expected.

It's required to tell the user what kind of input is expected.

  
It's required to tell the user what kind of input is expected.

File

/sass/atoms/file.scss
No file selected

  {% import '../__macros/buttons.twig' as button %}

  
{{ button.main('file', null, 'Choose') }} No file selected

Select

/sass/atoms/_select.scss

  


  

Textarea

/sass/atoms/_input.scss
Tell the user what kind of input is expected.

  
Tell the user what kind of input is expected.

Tell the user what kind of required input is expected.

  
Tell the user what kind of required input is expected.

Checkbox

/sass/atoms/options.scss

  {% import '../__macros/icons.twig' as icon %}

  

Radio

/sass/atoms/options.scss

  

Image

/sass/molecules/_image.scss

  

Label

/sass/atoms/label.scss
5 min

  {% import '../__macros/icons.twig' as icon %}

  
{{ icon.get('time') }} 5 min

/sass/atoms/_links.scss

Import __macros/links.twig to use links as macros and __macros/icons.twig to call icons inside a link. Each link can be called with the following code: {{ link.main(type, url, content, classes, icon, disabled) }}.


  {% import '__macros/icons.twig' as icon %}
  {% import '__macros/links.twig' as link %}

  {{ link.main('primary', '#', 'Text links look like this', null, null, icon.get('chevron-right')) }}
	

Lists

/sass/atoms/lists.scss
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item

  
  • List item
  • List item
  • List item
  • List item
  • List item
  • List item

Logos

/sass/atoms/_logo.scss

Implementation

Import __macros/logos.twig to use logos as macros. Each logo can be called with the following code: {{ logo.get(name, url) }}.


  {% import '__macros/logos.twig' as logo %}
  
  {{ logo.get('logo') }}
	

Progress label

/sass/atoms/_progress-label.scss
Resultaat

Resultaat

  
Resultaat

Progress select

/sass/atoms/_progress-select.scss


  

Molecules

Collapsible

/sass/molecules/_collapsible.scss

  

Form

/sass/molecules/_form.scss
Stap 1: Woningkenmerken
Woonplaats

  {% import '../__macros/buttons.twig' as button %}
  {% import '../__macros/titles.twig' as title %}

  
{% if taglinePrefix %}
{{ taglinePrefix }} {% if taglineSubject %} {{ taglineSubject }} {% endif %}
{% endif %}
{{ title.main('h6', 'Woonplaats', 'm-form__heading') }}
{{ button.main('primary', null, 'Verzend', 'js-submit', null, 'submit') }}

Stap 2: Isolatiegraad
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse corrupti velit magni molestias quas nisi, dicta minus recusandae?
Reden contact

  {% import '../__macros/buttons.twig' as button %}
  {% import '../__macros/icons.twig' as icon %}
  {% import '../__macros/titles.twig' as title %}

  
{% if taglinePrefix %}
{{ taglinePrefix }} {% if taglineSubject %} {{ taglineSubject }} {% endif %}
{% endif %}
{% include 'likert-scale.twig' with { variant: 'choices' } %}
{{ title.main('h6', 'Reden contact', 'm-form__heading') }}
{{ button.main('primary', null, 'Verzend', 'js-submit', null, 'submit') }}

Images

/sass/molecules/_images.scss
Radiatoren
Vloerverwarming of ventiloconvectoren
Directe elektrische verwarming
Kachels

  
Radiatoren
Vloerverwarming of ventiloconvectoren
Directe elektrische verwarming
Kachels

Likert scale

/sass/molecules/_likert-scale.scss
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse corrupti velit magni molestias quas nisi, dicta minus recusandae?

Absoluut niet verzoenbaar

Erg verzoenbaar


Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse corrupti velit magni molestias quas nisi, dicta minus recusandae?

  {% set options = [
    'Volledig mee eens',
    'Gedeeltelijk mee eens',
    'Neutraal',
    'Eerder oneens',
    'Volledig mee oneens'
  ] %}
  
  
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse corrupti velit magni molestias quas nisi, dicta minus recusandae?
{% if variant == 'numbers' %}

Absoluut niet verzoenbaar

{% endif %}
    {% if variant == 'numbers' %} {% for i in 1..10 %}
  • {% endfor %} {% elseif variant == 'choices' %} {% for option in options %}
  • {% endfor %} {% endif %}
{% if variant == 'numbers' %}

Erg verzoenbaar

{% endif %}

Likert table

/sass/molecules/_likert-table.scss
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse corrupti velit magni molestias quas nisi, dicta minus recusandae?
AltijdVaakRegelmatigSomsNooitGeen idee
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint unde incidunt illum aperiam atque quasi totam exercitationem maiores cupiditate rerum?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint unde incidunt illum aperiam atque quasi totam exercitationem maiores cupiditate rerum?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint unde incidunt illum aperiam atque quasi totam exercitationem maiores cupiditate rerum?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint unde incidunt illum aperiam atque quasi totam exercitationem maiores cupiditate rerum?

  Code example does not display correctly. For source code, check templates/_molecules/likert-table.twig
	

Radio tile

/sass/molecules/ _radio-tile.scss









  {% import '../__macros/icons.twig' as icon %}

  

Split image

/sass/molecules/_split-image.scss

  

Step

/sass/molecules/_step.scss
Start

Ontdek of uw woning warmtepompklaar is!

5 min

We stellen u een aantal vragen over uw woning, de isolatiegraad van uw woning en de verwarmingssystemen die u gebruikt in uw woning. De totale berekening duurt ongeveer 10 minuten. Heeft u een EPC? Hou het bij de hand, voor een sneller eindresultaat. Deze test is slecht een indicatie. Maak dan een afspraak bij een erkende installateur voor een gedetailleerde berekening.


Stap 1: Woningkenmerken

De bewoonbare oppervlakte is...
Bewoonbare oppervlakte

De bewoonbare oppervlakte van uw woning is de som van alle vloeroppervlakken. Kelders en niet gebruikte zolders horen daar niet bij. Kies de grootte die het beste aanleunt bij uw situatie.

Waarom de bewoonbare oppervlakte?

Het energielabel wordt mee bepaald door de grootte van uw woning. Op basis van de vorm en de bewoonbare oppervlakte leiden we een eenvoudige geometrie af zoals die gemiddeld het meest voorkomt bij uw type woning. De geometrie van uw eigen woning kan hier sterk van afwijken.


  {% import '../__macros/buttons.twig' as button %}

  
{{ taglinePrefix }} {% if taglineSubject %} {{ taglineSubject }} {% endif %}

{{ heading }} {% if hasTooltip %} {% include 'tooltip.twig' %} {% endif %}

{% if hasContent %} {% include '../_atoms/label.twig' %}

We stellen u een aantal vragen over uw woning, de isolatiegraad van uw woning en de verwarmingssystemen die u gebruikt in uw woning. De totale berekening duurt ongeveer 10 minuten. Heeft u een EPC? Hou het bij de hand, voor een sneller eindresultaat. Deze test is slecht een indicatie. Maak dan een afspraak bij een erkende installateur voor een gedetailleerde berekening.

{% endif %}
{% if hasOptions %}
{% include 'radio-tile.twig' with { name: 'dak-type', id: 'hellend-dak', option: 'Hellend dak', icn: 'hellend-dak', value: 1 } %} {% include 'radio-tile.twig' with { name: 'dak-type', id: 'plat-dak', option: 'Plat dak', icn: 'plat-dak', value: 2 } %} {% include 'radio-tile.twig' with { name: 'dak-type', id: 'gemengd-dak', option: 'Gemengd dak', icn: 'gemengd-dak', value: 3 } %}
{% endif %}
{{ button.main('outlined', null, 'Annuleer') }} {{ button.main('primary', null, 'Volgende') }}

Text

/sass/molecules/_text.scss

Headings look like this

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga harum voluptate laudantium voluptas sint, similique, nisi dolorum laborum necessitatibus, eligendi quas minus vitae eum perferendis magni nemo aperiam rem excepturi. Doloremque id at dolores. Nulla nisi aspernatur veniam natus iusto. Neque inventore itaque maiores numquam a aliquid ipsam. Tempore obcaecati quibusdam accusamus?

Blanditiis hic magni laudantium minima quaerat nisi placeat facilis velit deserunt eligendi debitis earum ipsum dolorum rerum cumque perspiciatis nulla, consequuntur repellat.


  

Headings look like this

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga harum voluptate laudantium voluptas sint, similique, nisi dolorum laborum necessitatibus, eligendi quas minus vitae eum perferendis magni nemo aperiam rem excepturi. Doloremque id at dolores. Nulla nisi aspernatur veniam natus iusto. Neque inventore itaque maiores numquam a aliquid ipsam. Tempore obcaecati quibusdam accusamus?

Blanditiis hic magni laudantium minima quaerat nisi placeat facilis velit deserunt eligendi debitis earum ipsum dolorum rerum cumque perspiciatis nulla, consequuntur repellat.


Tooltip

/sass/molecules/_tooltip.scss
Bewoonbare oppervlakte

De bewoonbare oppervlakte van uw woning is de som van alle vloeroppervlakken. Kelders en niet gebruikte zolders horen daar niet bij. Kies de grootte die het beste aanleunt bij uw situatie.

Waarom de bewoonbare oppervlakte?

Het energielabel wordt mee bepaald door de grootte van uw woning. Op basis van de vorm en de bewoonbare oppervlakte leiden we een eenvoudige geometrie af zoals die gemiddeld het meest voorkomt bij uw type woning. De geometrie van uw eigen woning kan hier sterk van afwijken.


Bewoonbare oppervlakte

De bewoonbare oppervlakte van uw woning is de som van alle vloeroppervlakken. Kelders en niet gebruikte zolders horen daar niet bij. Kies de grootte die het beste aanleunt bij uw situatie.

Waarom de bewoonbare oppervlakte?

Het energielabel wordt mee bepaald door de grootte van uw woning. Op basis van de vorm en de bewoonbare oppervlakte leiden we een eenvoudige geometrie af zoals die gemiddeld het meest voorkomt bij uw type woning. De geometrie van uw eigen woning kan hier sterk van afwijken.


    {% import '../__macros/icons.twig' as icon %}

    {% if not direction %}
        {% set direction = 'is-vertical' %}
    {% endif %}

    
Bewoonbare oppervlakte

De bewoonbare oppervlakte van uw woning is de som van alle vloeroppervlakken. Kelders en niet gebruikte zolders horen daar niet bij. Kies de grootte die het beste aanleunt bij uw situatie.

Waarom de bewoonbare oppervlakte?

Het energielabel wordt mee bepaald door de grootte van uw woning. Op basis van de vorm en de bewoonbare oppervlakte leiden we een eenvoudige geometrie af zoals die gemiddeld het meest voorkomt bij uw type woning. De geometrie van uw eigen woning kan hier sterk van afwijken.


USP

/sass/molecules/_usp.scss
Naar een wereld zonder fossiele brandstoffen

Warmtepompen zijn zeer milieuvriendelijk. Ze zijn een stuk efficiënter dan ketels en werken op warmte uit de omgeving en elektriciteit. Die elektriciteit komt steeds meer uit hernieuwbare energie.


Erkende installateurs

Een REScert installateur is erkend door de overheid en kan voor uw woning meer in detail bepalen welke warmtepomp er geschikt is en hoeveel deze kost.

Meer info

  {% import '../__macros/icons.twig' as icon %}
  {% import '../__macros/links.twig' as link %}
  {% import '../__macros/titles.twig' as title %}

  
{{ title.main('h5', heading) }}

{{ text }}

{% if hasLink %} {{ link.main('primary', '#', 'Meer info', null, null, icon.get('chevron-right')) }} {% endif %}

Organisms

Alert

/sass/organisms/_section-alert.scss

Dit advies is een eerste schatting op basis van de door u ingevulde waardes. Het kan zijn dat een installateur ter plekke een ander advies geeft omdat er specifieke zaken in uw geval afwijken. De exacte invloed op het EPC van uw woning laat u narekenen door een erkende installateur of ga eens langs bij uw lokaal energiehuis.


  

Dit advies is een eerste schatting op basis van de door u ingevulde waardes. Het kan zijn dat een installateur ter plekke een ander advies geeft omdat er specifieke zaken in uw geval afwijken. De exacte invloed op het EPC van uw woning laat u narekenen door een erkende installateur of ga eens langs bij uw lokaal energiehuis.


Columns

/sass/organisms/_columns.scss

Implementation

The columns component consists of four parts: .o-columns, .o-columns__inner, .o-columns__grid and .o-columns__col as shown in the code below. Each column should go inside a for loop so it wraps the recurring component. To specify the column width one of the following classes should be added to the .o-columns__col class: .col-1-1, .col-1-2, .col-1-3, .col-1-4.


  
{% for i in 1..2 %}
{% include '../_molecules/component.twig' %}
{% endfor %}

Form container

/sass/organisms/_section-form.scss
Stap 1: Woningkenmerken
Woonplaats

Stap 2: Isolatiegraad
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse corrupti velit magni molestias quas nisi, dicta minus recusandae?
Reden contact

  
{% if hasVisual %}
{% include '../_molecules/form-p1.twig' with { taglinePrefix: 'Stap 1:', taglineSubject: 'Woningkenmerken' } %}
{% else %}
{% include '../_molecules/form-p2.twig' with { taglinePrefix: 'Stap 2:', taglineSubject: 'Isolatiegraad' } %}
{% endif %}

Hero

/sass/organisms/_section-hero.scss

Duurzaam verwarmen

Is uw woning al warmtepompklaar?

Warmtepompen zijn niet enkel geschikt voor nieuwbouw met vloerverwarming. Veel oudere woningen met radiatoren zijn ook warmtepompklaar. Check of uw woning klaar is voor een warmtepomp met deze tool en krijg een indicatie van welke warmtepomp geschikt is voor uw woning.

Doe de test

  {% import '../__macros/buttons.twig' as button %}
  {% import '../__macros/icons.twig' as icon %}
  {% import '../__macros/titles.twig' as title %}

  
{{ title.main('h3', 'Duurzaam verwarmen') }} {{ title.main('h1', 'Is uw woning al warmtepompklaar?') }}

Warmtepompen zijn niet enkel geschikt voor nieuwbouw met vloerverwarming. Veel oudere woningen met radiatoren zijn ook warmtepompklaar. Check of uw woning klaar is voor een warmtepomp met deze tool en krijg een indicatie van welke warmtepomp geschikt is voor uw woning.

{{ button.main('primary', '#', 'Doe de test', null, null, null, icon.get('arrow-right')) }}

Hero results

/sass/organisms/_section-hero-results.scss

Uw resultaat

Uw woning is klaar voor een warmtepomp!

Uit de vragenlijst blijkt dat uw woning klaar is voor een warmtepomp. Deze tool geeft u alvast een zicht op welk systeem het beste bij jou past. Overtuigd van een warmtepomp? Ga langs bij een installateur voor een ontwerp op maat, of raadpleeg een deskundige voor meer advies.

Doe de test opnieuw
  • Eerst isoleren
  • Hybride warmtepomp
  • Warmtepompklaar
Huidige warmtevraag
Bewoonbare oppervlakte

De bewoonbare oppervlakte van uw woning is de som van alle vloeroppervlakken. Kelders en niet gebruikte zolders horen daar niet bij. Kies de grootte die het beste aanleunt bij uw situatie.

Waarom de bewoonbare oppervlakte?

Het energielabel wordt mee bepaald door de grootte van uw woning. Op basis van de vorm en de bewoonbare oppervlakte leiden we een eenvoudige geometrie af zoals die gemiddeld het meest voorkomt bij uw type woning. De geometrie van uw eigen woning kan hier sterk van afwijken.


Uw resultaat

Uw woning is klaar voor een warmtepomp!

Uit de vragenlijst blijkt dat uw woning klaar is voor een warmtepomp. Deze tool geeft u alvast een zicht op welk systeem het beste bij jou past. Overtuigd van een warmtepomp? Ga langs bij een installateur voor een ontwerp op maat, of raadpleeg een deskundige voor meer advies.

Doe de test opnieuw
  • Eerst isoleren
  • Hybride warmtepomp
  • Warmtepompklaar
Huidige warmtevraag
Bewoonbare oppervlakte

De bewoonbare oppervlakte van uw woning is de som van alle vloeroppervlakken. Kelders en niet gebruikte zolders horen daar niet bij. Kies de grootte die het beste aanleunt bij uw situatie.

Waarom de bewoonbare oppervlakte?

Het energielabel wordt mee bepaald door de grootte van uw woning. Op basis van de vorm en de bewoonbare oppervlakte leiden we een eenvoudige geometrie af zoals die gemiddeld het meest voorkomt bij uw type woning. De geometrie van uw eigen woning kan hier sterk van afwijken.


  

Uw resultaat

Uw woning is klaar voor een warmtepomp!

Uit de vragenlijst blijkt dat uw woning klaar is voor een warmtepomp. Deze tool geeft u alvast een zicht op welk systeem het beste bij jou past. Overtuigd van een warmtepomp? Ga langs bij een installateur voor een ontwerp op maat, of raadpleeg een deskundige voor meer advies.

Doe de test opnieuw
  • Eerst isoleren
  • Hybride warmtepomp
  • Warmtepompklaar
Huidige warmtevraag
Bewoonbare oppervlakte

De bewoonbare oppervlakte van uw woning is de som van alle vloeroppervlakken. Kelders en niet gebruikte zolders horen daar niet bij. Kies de grootte die het beste aanleunt bij uw situatie.

Waarom de bewoonbare oppervlakte?

Het energielabel wordt mee bepaald door de grootte van uw woning. Op basis van de vorm en de bewoonbare oppervlakte leiden we een eenvoudige geometrie af zoals die gemiddeld het meest voorkomt bij uw type woning. De geometrie van uw eigen woning kan hier sterk van afwijken.


Image with text

/sass/organisms/_section-image-text.scss

Mythe rond vloerverwarming

Op de intropagina al snel aangeven dat men niet altijd een vloer moet openbreken voor de plaatsing van een warmtepomp, maar dat radiatoren en convectoren ook kunnen. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.


Niet zeker of u een warmtepomp kan installeren? Doe de test!

Uit recent onderzoek blijkt dat warmtepompen breder inzetbaar zijn in woningen dan voorheen gedacht werd. Ontdek of een (hybride) warmtepomp iets is voor uw woning.

Doe de test

  {% import '../__macros/buttons.twig' as button %}
  {% import '../__macros/icons.twig' as icon %}
  {% import '../__macros/titles.twig' as title %}

  
{{ title.main('h2', heading) }}

{{ text }}

{% if hasButton %} {{ button.main('primary', '#', 'Doe de test', null, null, null, icon.get('arrow-right')) }} {% endif %}

Options

/sass/organisms/_section-options.scss

Uw mogelijkheden voor een warmtepomp

Lucht/lucht warmtepomp

Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.

  • Vergelijkingspunt 1
  • Vergelijkingspunt 2

    Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus.

    Meer info
  • Vergelijkingspunt 3
  • Vergelijkingspunt 4

Lucht/water warmtepomp

Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.

  • Vergelijkingspunt 1
  • Vergelijkingspunt 2
  • Vergelijkingspunt 3
  • Vergelijkingspunt 4

  

Uw mogelijkheden voor een warmtepomp

Lucht/lucht warmtepomp

Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.

  • Vergelijkingspunt 1
  • Vergelijkingspunt 2

    Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus.

    Meer info
  • Vergelijkingspunt 3
  • Vergelijkingspunt 4

Lucht/water warmtepomp

Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.

  • Vergelijkingspunt 1
  • Vergelijkingspunt 2
  • Vergelijkingspunt 3
  • Vergelijkingspunt 4

Progress

/sass/organisms/_section-progress.scss
Resultaat

  {% set totalProgress = 4 %}
  {% set percentage = (100 / totalProgress) * currentProgress %}

  {% set items = [
    {
      placeholder: 'Woningkenmerken',
      options: [
        {
          value: 'ik-woon-in-een',
          title: 'Ik woon in een...'
        },
        {
          value: 'de-bewoonbare-oppervlakte',
          title: 'De bewoonbare oppervlakte'
        },
        {
          value: 'zonnepanelen',
          title: 'Zonnepanelen'
        },
        {
          value: 'zonneboiler',
          title: 'Zonneboiler'
        },
        {
          value: 'ventilatiesysteem',
          title: 'Ventilatiesysteem'
        }
      ]
    },
    {
      placeholder: 'Isolatiegraad',
      options: [
        {
          value: 'mijn-dak',
          title: 'Mijn dak'
        },
        {
          value: 'mijn-vloer',
          title: 'Mijn vloer'
        },
        {
          value: 'mijn-buitenmuren',
          title: 'Mijn buitenmuren'
        },
        {
          value: 'mijn-beglazing',
          title: 'Mijn beglazing'
        }
      ]
    },
    {
      placeholder: 'Verwarmingssystemen',
      options: [
        {
          value: 'verwarmingssysteem',
          title: 'Verwarmingssysteem'
        },
        {
          value: 'centrale-verwarming',
          title: 'Centrale verwarming'
        },
        {
          value: 'sanitair-warm-water',
          title: 'Sanitair warm water'
        }
      ]
    }
  ] %}

  
{% for item in items %} {% if currentProgress >= loop.index %} {% set isActive = true %} {% else %} {% set isActive = false %} {% endif %} {% if loop.index == currentProgress %} {% set isCurrent = true %} {% endif %} {% include '../_atoms/progress-select.twig' with { placeholder: item.placeholder, options: item.options, isActive: isActive, isCurrent: isCurrent } %} {% endfor %} {% include '../_atoms/progress-label.twig' with { isActive: labelActive, isCurrent: labelActive } %}

Results list

/sass/organisms/_section-results-list.scss

Uw resultaat in detail

Uw isolatiegraad
Goed

Het bouwjaar van het appartement is na 2006 dit wil zeggen dat sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Uw verwarmingssysteem
Individueel

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Uw sanitair warm water
Onbekend

Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis.


  

Uw resultaat in detail

Uw isolatiegraad
Goed

Het bouwjaar van het appartement is na 2006 dit wil zeggen dat sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Uw verwarmingssysteem
Individueel

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Uw sanitair warm water
Onbekend

Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis.


Results list with accordion

/sass/organisms/_section-results-list.scss

Uw resultaat in detail


  

Uw resultaat in detail


Start

/sass/organisms/_section-start.scss
Start

Ontdek of uw woning warmtepompklaar is!

5 min

We stellen u een aantal vragen over uw woning, de isolatiegraad van uw woning en de verwarmingssystemen die u gebruikt in uw woning. De totale berekening duurt ongeveer 10 minuten. Heeft u een EPC? Hou het bij de hand, voor een sneller eindresultaat. Deze test is slecht een indicatie. Maak dan een afspraak bij een erkende installateur voor een gedetailleerde berekening.


  
{% include '../_molecules/step.twig' with { heading: 'Ontdek of uw woning warmtepompklaar is!', taglinePrefix: 'Start', content: true } %}
{% include '../_molecules/split-image.twig' %}

Step

/sass/organisms/_section-step.scss
Stap 1: Woningkenmerken

De bewoonbare oppervlakte is...
Bewoonbare oppervlakte

De bewoonbare oppervlakte van uw woning is de som van alle vloeroppervlakken. Kelders en niet gebruikte zolders horen daar niet bij. Kies de grootte die het beste aanleunt bij uw situatie.

Waarom de bewoonbare oppervlakte?

Het energielabel wordt mee bepaald door de grootte van uw woning. Op basis van de vorm en de bewoonbare oppervlakte leiden we een eenvoudige geometrie af zoals die gemiddeld het meest voorkomt bij uw type woning. De geometrie van uw eigen woning kan hier sterk van afwijken.


Stap 2: Isolatiegraad

Wat is uw daktype?

Radiatoren
Vloerverwarming of ventiloconvectoren
Directe elektrische verwarming
Kachels

  
{% include '../_molecules/step.twig' with { heading: heading, hasTooltip: hasTooltip, taglinePrefix: taglinePrefix, taglineSubject: taglineSubject, hasOptions: hasOptions } %}
{% if multipleImages %} {% include '../_molecules/images.twig' %} {% else %}
{% endif %}

USP's

/sass/organisms/_section-usp.scss

Drie goede redenen om te kiezen voor een warmtepomp:

Naar een wereld zonder fossiele brandstoffen

Warmtepompen zijn zeer milieuvriendelijk. Ze zijn een stuk efficiënter dan ketels en werken op warmte uit de omgeving en elektriciteit. Die elektriciteit komt steeds meer uit hernieuwbare energie.

Toekomstgericht

De klimaatdoelstellingen worden steeds ambitieuzer. Met een warmtepomp bent u klaar voor de toekomst.

Meer comfort thuis

Warmtepompen zorgen voor comfort in verwarming, koeling en warm water. En ze werken perfect in combinatie met fotovoltaïsche systemen.


  {% import '../__macros/titles.twig' as title %}

  {% set usps = [
    {
      heading: 'Naar een wereld zonder fossiele brandstoffen',
      text: 'Warmtepompen zijn zeer milieuvriendelijk. Ze zijn een stuk efficiënter dan ketels en werken op warmte uit de omgeving en elektriciteit. Die elektriciteit komt steeds meer uit hernieuwbare energie.'
    },
    {
      heading: 'Toekomstgericht',
      text: 'De klimaatdoelstellingen worden steeds ambitieuzer. Met een warmtepomp bent u klaar voor de toekomst.'
    },
    {
      heading: 'Meer comfort thuis',
      text: 'Warmtepompen zorgen voor comfort in verwarming, koeling en warm water. En ze werken perfect in combinatie met fotovoltaïsche systemen.'
    }
  ] %}

  
{{ title.main('h2', 'Drie goede redenen om te kiezen voor een warmtepomp:') }}
{% for usp in usps %} {% include '../_molecules/usp.twig' with { hasNumber: hasNumber, hasLink: hasLink, heading: usp.heading, text: usp.text } %} {% endfor %}
{% if image %} {% include '../_molecules/split-image.twig' %} {% endif %}

USP's for results

/sass/organisms/_section-usp.scss

Drie goede redenen om te kiezen voor een warmtepomp:

Erkende installateurs

Een REScert installateur is erkend door de overheid en kan voor uw woning meer in detail bepalen welke warmtepomp er geschikt is en hoeveel deze kost.

Meer info
Premies

Dit is een algemene tekst over premies want moet zowel over extra isoleren als over warmtepompen kunnen gaan.

Meer info
Uw lokaal energiehuis

Wilt u nog bijkomend advies maar wilt u nog niet naar een installateur stappen? Dan kan u terecht voor gratis, onafhankelijk advies bij een energiehuis.

Meer info

  

Drie goede redenen om te kiezen voor een warmtepomp:

Erkende installateurs

Een REScert installateur is erkend door de overheid en kan voor uw woning meer in detail bepalen welke warmtepomp er geschikt is en hoeveel deze kost.

Meer info
Premies

Dit is een algemene tekst over premies want moet zowel over extra isoleren als over warmtepompen kunnen gaan.

Meer info
Uw lokaal energiehuis

Wilt u nog bijkomend advies maar wilt u nog niet naar een installateur stappen? Dan kan u terecht voor gratis, onafhankelijk advies bij een energiehuis.

Meer info

Utilities

Grid

/sass/utilities/_grid.scss

Implementation

The grid utility is a CSS configured function for setting up grids. To assign the grid system to a block-level element, use the .m-grid class on the container. From there, every direct child of the container can be configured using the CSS mixins which can be found in the CSS file.