Styleguide


version: 20.0.0

Welcome to the styleguide – an internal guide & code repository for designing and coding projects for . If you're new here, have a look through some of the topics on the left.

globals

Globals

/sass/base/_globals.scss

Globals

$debug-mode = false

Media

$screen-xs = 30rem
$screen-s = 45rem
$screen-m = 60rem
$screen-1x-m = 64rem
$screen-l = 71.25em
$screen-1x-l = 75em
$screen-xl = 120em

Fonts

$font-family-sans-bold = "Flanders Art Sans Bold"
$font-family-sans-medium = "Flanders Art Sans Medium"
$font-family-sans = "Flanders Art Sans"
$font-family-sans-light = "Flanders Art Sans Light"
$font-family-serif-bold = "Flanders Art Serif Bold"
$font-family-serif-medium = "Flanders Art Serif Medium"
$font-family-serif = "Flanders Art Serif"
$font-family-serif-light = "Flanders Art Serif Light"
$font-size-3x-l = 56px
$font-size-2x-l = 48px
$font-size-1x-l = 34px
$font-size-l = 30px
$font-size-4x-m = 25px
$font-size-3x-m = 21px
$font-size-2x-m = 20px
$font-size-1x-m = 18px
$font-size-m = 17px
$font-size = 16px
$font-size-s = 15px
$font-size-1x-s = 14px
$font-size-2x-s = 13px
$font-size-3x-s = 12px
$line-height-2x-l = 47px
$line-height-1x-l = 41px
$line-height-l = 38px
$line-height-4x-m = 30px
$line-height-3x-m = 28px
$line-height-2x-m = 27px
$line-height-1x-m = 26px
$line-height-m = 25px
$line-height = 24px
$line-height-s = 22px
$line-height-1x-s = 21px
$line-height-normalize = 1
$font-weight-bold = 700
$font-weight-medium = 500
$font-weight = 400
$font-weight-light = 300

Layout

$border-radius-round = 50%
$border-radius-l = 100px
$border-radius-m = 45px
$border-radius = 5px
$box-shadow-xxl = 0 -12px 60px rgba(73, 73, 73, 0.10)
$box-shadow-xl = 0 20px 22px rgba(73, 73, 73, 0.12)
$box-shadow-l = 0 0 22px rgba(73, 73, 73, 0.12)
$box-shadow = 0 0 12px rgba(73, 73, 73, 0.12)
$box-shadow-inset = inset 0 0 12px rgba(73, 73, 73, 0.12)
$box-shadow-ui = 0 0 1.5rem rgba(51, 51, 51, 0.36)
$border-1-xl = 5px solid $border-color
$border-l = 4px solid $border-color
$border = 1px solid $border-color
$border-primary = 1px solid $primary-color-aqua
$wk-width-l = 1550px
$wk-width = 1240px
$wk-width-m = 800px
$wk-width-s = 580px
$wk-width-1x-s = 500px
$wk-width-2x-s = 420px

Z-index

$z-index-lowest = -1
$z-index-lower = 0
$z-index-low = 1
$z-index-base = 10
$z-index-high = 100
$z-index-higher = 1000
$z-index-highest = 9999
$z-index-modal = 5000

Animations

$anim-duration-l = 0.5s
$anim-duration-m = 0.4s
$anim-duration = 0.3s
$anim-duration-s = 0.2s
$anim-duration-xs = 0.1s
$anim-delay-l = 0.5s
$anim-delay-m = 0.4s
$anim-delay = 0.3s
$anim-delay-s = 0.2s
$anim-delay-xs = 0.1s

Colors

/sass/base/_quarks/_colors.scss

Primary colors

Always provide different shades of the primary colors. For a more high-level approach on color use, head over to IBM Design Language.

  • $primary-color-aqua
    var(--brand)
  • $primary-color-white
    var(--white)

Secondary colors

Always provide different shades of the secondary colors. For a more high-level approach on color use, head over to IBM Design Language.

  • $secondary-color
    var(--grey)

Border colors

  • $border-color-dark
    var(--grey-xdark)
  • $border-color-medium
    var(--grey)
  • $border-color
    var(--grey-light)
  • $border-color-white
    var(--white)
  • $border-color-active
    var(--brand)

Text colors

Use different shades for text to express the hierarchy of information. Text, icons, borders and dividers will benefit when their color is defined with alpha values, as a result they will work on any background. Text colors are derived from primary black/white colors.

  • $font-color-aqua-dark
    var(--brand-dark)
  • $font-color-dark
    var(--grey-xdark)
  • $font-color
    var(--black)
  • $font-color-grey-dark
    var(--grey-1x-dark)
  • $font-color-grey
    var(--grey-dark)
  • $font-color-grey-light
    var(--grey)
  • $font-color-white
    var(--white)
  • $font-color-disabled
    var(--grey-dark)
  • $font-color-link
    var(--blue)
  • $font-color-link-grey
    var(--grey-dark)

UI-kit colors

Primary colors for interaction feedback, notifications and states: error (red), warning (orange), highlight (yellow), success (green) and information (blue). UI-kit colors should always be aligned with the tone of voice of the application/brand.

  • $ui-red
    var(--red)
  • $ui-orange
    var(--orange-light)
  • $ui-green
    var(--green-light)
  • $ui-blue
    var(--blue)
  • $ui-grey
    var(--grey-dark)

SWATCH colors

This is used by EPC - progress bar colors.

  • $swatch-1
    var(--green-dark)
  • $swatch-2
    var(--green)
  • $swatch-3
    var(--green-light)
  • $swatch-4
    var(--orange-x-light)
  • $swatch-5
    var(--orange-light)
  • $swatch-6
    var(--orange)
  • $swatch-7
    var(--red)

Ovam colors

  • $ovam-dark-green
    var(--green)
  • $ovam-green
    var(--green-light)
  • $ovam-yellow
    var(--orange-x-light)
  • $ovam-orange
    var(--orange-light)
  • $ovam-brown
    var(--brown)
  • $ovam-grey
    var(--grey-dark)
  • $ovam-red
    var(--red)
  • $ovam-blue
    var(--blue-dark)

Typography

/sass/base/_quarks/_typography.scss

Reading experience

Typography is the atomic element of good interface design as it defines branding, layout, composition & rhythm. Note that it's not just about choosing the right typeface, it's also about tone of voice, microcopy. Head over to IBM Design Language for an in-depth overview on the elements of typography.

Good reading experiences have the right amount of characters per line. If a line is too long users will have a hard time focusing, if a line is too short the eye will have to travel back too often, breaking the reader's rhythm. An optimal line length is 50-75 characters, which is about 10-12 words or 25-33 × base font-size (1em). To increase readability of typographic elements, default letter-spacing values for headings & small text are adjusted.

Font stack

Flanders Art Sans Bold

The quick brown
fox jumps over the
lazy dog

Flanders Art Sans Medium

The quick brown
fox jumps over the
lazy dog

Flanders Art Sans

The quick brown
fox jumps over the
lazy dog

Flanders Art Sans Light

The quick brown
fox jumps over the
lazy dog

Flanders Art Serif Bold

The quick brown
fox jumps over the
lazy dog

Flanders Art Serif Medium

The quick brown
fox jumps over the
lazy dog

Flanders Art Serif

The quick brown
fox jumps over the
lazy dog

Flanders Art Serif Light

The quick brown
fox jumps over the
lazy dog

Heading 1 - <h1>

Good design is good business

Heading 2 - <h2>

Good design is always obvious, while great design is always transparent

Heading 3 - <h3>

While everything is designed, only few things are designed to excell

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
Heading 4 - <h4>

Content is king and should always precede design. Design in the absence of content is not design, but decoration.

Paragraph - <p>

Many desperate acts of design (e.g. gradients, drop shadows, and the gratuitous use of transparency) are perpetuated in the absence of a strong concept. Good ideas provide a framework for design, guiding the work.

<h4>Heading 4</h4>
<p>Paragraph</p>
Heading 5 - <h5>
Online design trends change more often than the wind and slightly less often than my socks. Good design is timeless, good design creates culture. Culture shapes value and value determinates the future.
<h5>Heading 5</h5>
Heading 6 - <h6>
Always design a thing by considering it in its next larger context - a chair in a room, a room in a house, a house in an environment, an environment in a city plan.
Small- <small> People think that design is styling. Design is not style. It's not about giving shape to the shell and not giving a damn about the guts. Good design is a renaissance attitude that combines technology, cognitive science, human need, and beauty to produce something that the world didn't know it was missing.
<h6>Heading 6</h6>
<small>Small text</small>
blockquote <blockquote> Author/source <cite> <blockquote> - Fresco Std (100) - 26px - line-height: 1.25
<cite> - Fresco Sans Std - 13px - line-height: 1.7
Great design will not sell an inferior product, but it will enable great products to achieve their maximum potential. Thomas J. Watson Jr.
<blockquote>
    Good design will not sell an inferior product...
    <cite>Thomas J. Watson Jr.</cite>
</blockquote>
Hyperlinks: <a href="">, <span class="is-hyperlink"> This is a hyperlink
This looks like a hyperlink
This is a hyperlink with an icon
<a href="#" title="Always provide a title">Hyperlink</a>
<span class="is-hyperlink">This looks like a hyperlink</span>
<a href="#" title="#"><span class="icon-arrow-right"></span>This is a hyperlink with an icon</a>
strong <strong> This text is strong
Emphasized: <em> This text is emphasized
Quotes: <q> This text is quoted
Highlighted: <mark> This text is highlighted
Obsolete/deleted/updated: <del> This text is obsolete/deleted/updated
<strong>This text is strong</strong>
<em>This text is emphasized</em>
<q>This text is quoted</q>
<mark>This text is highlighted</mark>
<del>This text is obsolete/deleted/updated</del>

Icons

/sass/base/_quarks/_icons.scss

Implementation

The icon-set is converted with a custom Gulp iconfont-task. To add/remove icons from the generated font, please contact Little Miss Robot or use an online service like IcoMoon. Warning: using an online service could break stuff!

  • .icon-aardgas
  • .icon-alert
  • .icon-appartement-small
  • .icon-appartement
  • .icon-archief
  • .icon-arrow-back
  • .icon-arrow-down-light
  • .icon-arrow-down
  • .icon-arrow-left
  • .icon-arrow-next
  • .icon-arrow-right
  • .icon-arrow-sort-down
  • .icon-arrow-sort-up
  • .icon-arrow-up
  • .icon-attesten
  • .icon-automation
  • .icon-badge
  • .icon-bewoonbare-oppervlakte
  • .icon-bin
  • .icon-binnenmuurisolatie
  • .icon-biodiversiteit
  • .icon-blauwe-score
  • .icon-boiler
  • .icon-bounty
  • .icon-bouwmisdrijf
  • .icon-brandstof
  • .icon-buitenmuurisolatie
  • .icon-calendar-m
  • .icon-calendar-small
  • .icon-calendar
  • .icon-camera
  • .icon-certificate-digital
  • .icon-certificate
  • .icon-checkmark
  • .icon-chevron
  • .icon-clock-pointer
  • .icon-clock
  • .icon-co2-opslag
  • .icon-comfort-light
  • .icon-comfort
  • .icon-comment
  • .icon-computer
  • .icon-confetti
  • .icon-construction
  • .icon-contract
  • .icon-cookie
  • .icon-cooling
  • .icon-copy
  • .icon-cross-big
  • .icon-cross
  • .icon-dak
  • .icon-deur
  • .icon-diefstal
  • .icon-diensten
  • .icon-double-arrow-down
  • .icon-download
  • .icon-droogte
  • .icon-e-ID-wireless
  • .icon-e-ID
  • .icon-edit
  • .icon-eenheid
  • .icon-elektriciteit
  • .icon-elektrisch-voertuig
  • .icon-energetisch-werk
  • .icon-Energiebesparing
  • .icon-energieverbruik
  • .icon-energy
  • .icon-environment
  • .icon-exclamationmark-circle
  • .icon-exclamationmark
  • .icon-external
  • .icon-eye
  • .icon-feedback
  • .icon-filter
  • .icon-fire-extinguisher
  • .icon-floor
  • .icon-folder-add
  • .icon-folder-edit
  • .icon-folder-plus
  • .icon-folder
  • .icon-funderingswerken
  • .icon-garage
  • .icon-gas
  • .icon-gebouw-met-eenheden
  • .icon-gebouw-zonder-eenheden
  • .icon-gebouw
  • .icon-gebruikersgedrag
  • .icon-gesloten-bebouwing-small
  • .icon-gesloten-bebouwing
  • .icon-gevels
  • .icon-gras
  • .icon-grid-small
  • .icon-grid
  • .icon-groenblauwpeil
  • .icon-groene-score
  • .icon-groene-stroom
  • .icon-groene-warmte
  • .icon-halfopen-bebouwing
  • .icon-halfopenbebouwing-small
  • .icon-heart
  • .icon-heating
  • .icon-helmet
  • .icon-home
  • .icon-hot-water
  • .icon-huis
  • .icon-indeling
  • .icon-info
  • .icon-Infrastructuur
  • .icon-installaties
  • .icon-insulation
  • .icon-kaart
  • .icon-klimaatbestendig
  • .icon-kustoverstroming
  • .icon-laadinfrastructuur
  • .icon-label-check-fill
  • .icon-label-check
  • .icon-label-cross-fill
  • .icon-label-cross
  • .icon-label-exclamationmark-outline
  • .icon-label-exclamationmark
  • .icon-label-min
  • .icon-label-questionmark
  • .icon-label-tilde-fill
  • .icon-label-tilde
  • .icon-legende-small
  • .icon-legende
  • .icon-lichte-gevels
  • .icon-lightbulb
  • .icon-link
  • .icon-list
  • .icon-loader
  • .icon-location-active
  • .icon-location
  • .icon-lock
  • .icon-luchtdichtheid
  • .icon-luchtkwaliteit
  • .icon-mail
  • .icon-man
  • .icon-maps
  • .icon-melding
  • .icon-menu
  • .icon-message
  • .icon-mijn-woningpas
  • .icon-milieu
  • .icon-min
  • .icon-mobile-app
  • .icon-muurisolatie
  • .icon-natuur
  • .icon-neighbourhood-initiatives
  • .icon-omgeving
  • .icon-onderwijs
  • .icon-online-raadplegen
  • .icon-open-bebouwing-small
  • .icon-open-bebouwing
  • .icon-openbaar-vervoer-double
  • .icon-openbaar-vervoer
  • .icon-orientatie-small
  • .icon-overstroming-fluviaal
  • .icon-overstroming-pluviaal
  • .icon-overstroming
  • .icon-paint-roller
  • .icon-perceel
  • .icon-permit
  • .icon-piekafvoer
  • .icon-pillar
  • .icon-plafond
  • .icon-plus
  • .icon-preventiewerken
  • .icon-pricing
  • .icon-printer
  • .icon-profile
  • .icon-publiek
  • .icon-questionmark-big
  • .icon-questionmark-single
  • .icon-questionmark
  • .icon-quotes
  • .icon-radiation
  • .icon-rain-water
  • .icon-reactivate
  • .icon-realtime-data
  • .icon-renovatieverplichting
  • .icon-renovatiewerken
  • .icon-required
  • .icon-rond-het-huis
  • .icon-roof
  • .icon-sanitair-warm-water
  • .icon-schrijnwerk
  • .icon-search
  • .icon-serre
  • .icon-share-profile
  • .icon-share
  • .icon-slimme-meter
  • .icon-smiley
  • .icon-soil
  • .icon-solar-panels
  • .icon-spaarlamp
  • .icon-speaker
  • .icon-speed-m
  • .icon-spouwmuur
  • .icon-stairs
  • .icon-stekker
  • .icon-stop
  • .icon-terrasoverkapping
  • .icon-terugverdientijd
  • .icon-thuisbatterij
  • .icon-thumb-down
  • .icon-thumb-up
  • .icon-tilde
  • .icon-toegankelijke-woning
  • .icon-token-1
  • .icon-token-2
  • .icon-tools
  • .icon-trash
  • .icon-unfold
  • .icon-upload
  • .icon-user-multiple-m
  • .icon-valve
  • .icon-venster
  • .icon-ventilatie-2
  • .icon-ventilatie
  • .icon-veranda
  • .icon-verkoeling
  • .icon-verwarming
  • .icon-vloeren
  • .icon-vochtvrije-woning
  • .icon-vuur
  • .icon-wall
  • .icon-warmteboiler
  • .icon-warmtenet
  • .icon-warmtepomp
  • .icon-water
  • .icon-waterkwaliteit
  • .icon-waterverbruik
  • .icon-windmolen
  • .icon-wk-badkamer
  • .icon-wk-binnenklimaat
  • .icon-wk-brandveilige-woning
  • .icon-wk-buitenmuren
  • .icon-wk-comfortabele-woning
  • .icon-wk-dak-buitendakse-schouw
  • .icon-wk-degelijke-afwerking
  • .icon-wk-draagvloeren
  • .icon-wk-dragende-binnemuren
  • .icon-wk-energiezuinige-woning
  • .icon-wk-gedeelde-ruimtes
  • .icon-wk-hemelwater
  • .icon-wk-kelder
  • .icon-wk-keuken
  • .icon-wk-netto-vloeroppervlakte
  • .icon-wk-onschadelijke-materialen
  • .icon-wk-ramen-deuren
  • .icon-wk-slaapkamers
  • .icon-wk-stabiele-woning
  • .icon-wk-toegankelijke-woning
  • .icon-wk-toilet
  • .icon-wk-veilige-installaties
  • .icon-wk-veilige-trappen
  • .icon-wk-vochtvrije-woning
  • .icon-wk-woonkamer
  • .icon-wkk
  • .icon-woning
  • .icon-woningkwaliteit
  • .icon-zelfverbruik
  • .icon-zon
  • .icon-zonne-energie
  • .icon-zonneboiler
  • .icon-zonnepanelen
  • .icon-zorg
  • .icon-zwembad
<span class="icon-[name]"></span>

States

/sass/base/_quarks/_states.scss

Is loading

The is loading state adds a loading indicator to each element asigned the is-loading class.

This is a module with a loading state



This is a module with a loading state before


This is a module with a loading state that's inline

This is a module with a loading state that's inline before the text

This is a module with a loading state


This is a module with a loading state before

This is a module with a loading state that's inline
This is a module with a loading state that's inline before the text

Grid system

Since we included twitter bootstrap in this styleguide, we'll just be using their grid.
We've added a few extra classes to the row element for special use-cases:

  • .row--eq-height: forces all the columns in a row to be the same height
  • .row-noMargin: removes all the magrgins between the columns.
<div class="row row--eq-height">
    <div class="col-md-2">
    ..
    </div>
    <div class="col-md-10">
        ..
    </div>
</div>

components

Buttons

/sass/atoms/_buttons.scss

Implementation

Use <a> for navigation, <button> for everything else. Submit/reset buttons are the only exceptions, using <input[type="submit"]> to trigger default browser behaviour associated with submitting form input. Buttons should follow a typographic scale, based on importance and base font-size.

Primary buttons: <button class="button"> Button as link Button as link

Secondary buttons

Buttons for in-line interactions, as used in toolbars (eg. close, add, remove, ...)

Button as link Button as link
Button as link Button as link Button as link Button as link


Hyperlink button




Icon button

Forms 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.

Implementation

Every form should have an action- and method-attribute. To encourage default browser behaviour, the submit button should be added as input[type=submit]. Every input should have a label with corresponding for-, id- and name-attributes. Labels are always placed before inputs, nesting is not allowed (except for checkboxes and radio's).

Default inputs

/sass/atoms/form-elements/general.scss

Tell the user what kind of input is expected, add a clickthrough as needed
Tell the user what kind of input is expected, add a clickthrough as needed

Don't worry, we won't spam you. Read our Privacy Policy

Passwords should be 6 characters or more. Be tricky!

Not what you expected? Please contact our customer support

Don't worry, we only contact you when it's absolutely necessary.

Tell us a little bit more about yourself.

Can't find what you're looking for? Try our frequently asked questions

Tell the user what kind of input is expected, add a clickthrough as needed
Tell the user what kind of input is expected, add a clickthrough as needed

Don't worry, we won't spam you. Read our Privacy Policy

Passwords should be 6 characters or more. Be tricky!

Not what you expected? Please contact our customer support

Don't worry, we only contact you when it's absolutely necessary.

Tell us a little bit more about yourself.

Can't find what you're looking for? Try our frequently asked questions

Textarea

/sass/atoms/form-elements/general.scss

small text

small text

Select

/sass/atoms/form-elements/select.scss

To mimic placeholder styling, add a 'has-no-value' class to the select

To mimic placeholder styling, add a 'has-no-value' class to the select

To mimic placeholder styling, add a 'has-no-value' class to the select

To mimic placeholder styling, add a 'has-no-value' class to the select

Upload

/sass/atoms/form-elements/upload.scss

By default upload fields aren't easy to style in a specific look& feel. The trick is to use a hidden field to display input value and some additional javascript to make this work.

Note: Javascript functionality in the source code is just a prototype (not present in production /js/main.js). The actual submit/upload functionality is also not implemented.

Tell the user what kind of input is expected, add a clickthrough as needed
Tell the user what kind of input is expected, add a clickthrough as needed

Range slider

/sass/atoms/form-elements/range.scss

By default range sliders aren't easy to style in a specific look& feel. In order to get it working, some additional javascript is needed. Changing the slider value will reveal a tooltip with the actual value.

Date picker

/sass/atoms/form-elements/date-picker.scss

Using the native datepicker of the used browser

Help text
Help text

Toggles

/sass/atoms/form-elements/toggle.scss

Toggles (radiobuttons, checkboxes & switches ) are wrapped inside a label to enable the default browser behaviour.





Multi upload

/sass/atoms/form-elements/_multi-upload.scss
Default no files selected

    Geen foto's geselecteerd

2 files added

  • file1.jpeg
  • file2.jpeg
  • file3.jpeg
  • file4.jpeg
Name change

  • file2.jpeg
  • file3.jpeg
  • file4.jpeg

    Geen foto's geselecteerd

User Feedback

General principle

Always provide feedback on user interaction. This can be immediate (eg. inline validation) or after the action (eg. submit a form). Feedback messages are informative and provide an easy escape or alternative/following action. The tone of voice should be human and add personality to the experience/brand.

Alerts

/sass/atoms/alerts.scss
This is a feedback message .

alert with title

alert with title

This is a feedback message .
This is a feedback message .

Text alerts

Used for displaying different alert states through styled text only.

This is a simple text error with an icon

This is a simple text error with an icon

Inline validation

/sass/atoms/form-elements/general.scss

Always provide immediate/inline feedback on user interaction. Feedback messages are informative and provide an easy escape or alternative/following action. The tone of voice should be human and add personality to the experience/brand.

What a lovely name!
Tell the user what kind of input is expected, add a clickthrough as needed
Your password should be at least 6 characters. Be tricky!
Your password should be at least 6 characters. Be tricky!
This email is already registered. Do you want to login or recover password?
Don't worry, we won't spam you. Read our privacy policy.
What a lovely name!
Tell the user what kind of input is expected, add a clickthrough as needed
Your password should be at least 6 characters. Be tricky!
Your password should be at least 6 characters. Be tricky!
This email is already registered. Do you want to login or recover password?
Don't worry, we won't spam you. Read our privacy policy.

Tooltips

/sass/atoms/tooltips.scss

Use tooltips to display inline information or validation feedback. Just like default alerts, different styling can be applied (error, warning, success and information). Although tooltips will work with any typographic style, the use of <small> is adviced.

Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Voldoet niet aan de minimale kwaliteit
Voldoet niet aan de minimale kwaliteit
Voldoet niet aan de minimale kwaliteit
Voldoet niet aan de minimale kwaliteit
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Voldoet niet aan de minimale kwaliteit
Voldoet niet aan de minimale kwaliteit
Voldoet niet aan de minimale kwaliteit
Voldoet niet aan de minimale kwaliteit

Administration

/sass/base/molecules/_administration.scss

This component is mainly used as part of the dashboards in woningpas. There are different variations of this component based on how the content is displayed. The classes used to change the content structure can be: m-administration--with-grid and, m-administration--with-footer m-administration--center.


Attesten & documenten

4 documenten toegevoegd door overheid
2 documenten toegevoegd door eigenaar

In orde te brengen bij...



Deel mijn woningpas

Meer info

Delen met anderen

Gedeeld met 4 personen

Delen met anderen

Gedeeld

Attesten & documenten

4 documenten toegevoegd door overheid
2 documenten toegevoegd door eigenaar

Advice list

/sass/molecules/_advice-list.scss
  • GA1a

    Door de grondverzetregeling zijn er beperkingen voor het gebruik van de uitgegraven bodem.

    Meer informatie
  • GA2a

    Bij uitvoering van bemalingen is het aangewezen om maatregelen te nemen om de verspreiding van de grondwaterverontreiniging tegen te gaan.

    Meer informatie
  • GA1a

    Door de grondverzetregeling zijn er beperkingen voor het gebruik van de uitgegraven bodem.

    Meer informatie
  • GA2a

    Bij uitvoering van bemalingen is het aangewezen om maatregelen te nemen om de verspreiding van de grondwaterverontreiniging tegen te gaan.

    Meer informatie

Advice

/sass/molecules/_advice.scss

This component is used to inform you about tailored advice by an expert and links you to a list of experts.

Graag advies op maat?

Krijg advies op maat door een deskundige. Op die manier krijg je een beter zicht op acties die jij kan ondernemen om overstromingen te voorkomen. Raadpleeg onze lijst van deskundigen en maak een afspraak.

Lijst van deskundigen
Professor

Graag advies op maat?

Krijg advies op maat door een deskundige. Op die manier krijg je een beter zicht op acties die jij kan ondernemen om overstromingen te voorkomen. Raadpleeg onze lijst van deskundigen en maak een afspraak.

Lijst van deskundigen
Professor

Alert

/sass/base/atoms/_alert.scss

This component is used when there is specific feadback towards the user.

Standard (a-alert)

Alert title

Alert description

transparent (a-alert, a-alert--transparent)

Alert title

Alert description

Error (a-alert, a-alert--error)

Alert title

Alert description

Transparent & Error (a-alert, a-alert--error, a-alert--transparent)

Alert title

Alert description

Hint with button (a-alert, a-alert--hint)

Hint title

Hint description

button

Inverted (a-alert, a-alert--inverted) (on a colored background)

Alert title

Alert description

Inverted & Error (a-alert, a-alert--error) (on a colored background)

Alert title

Alert description

Alert title

Alert description

Application

/sass/base/molecules/_application.scss

This component is mainly used as part of the dashboards in woningpas.


Woningkwaliteit

Test uw woningkwaliteit

Reeds 324.000 Vlamingen vulden de test in.

Doe de test
Woningkwaliteit

Test uw woningkwaliteit

Reeds 324.000 Vlamingen vulden de test in.

Doe de test

Aspect

/sass/base/molecules/_aspect.scss

This component is part of the organism Aspects (o-aspects). It is usually used in a list element, for example: <ul>. If this is not the case, it can be used as a <div>.

Standard (m-aspect)

  • Ventilatie

Checked (m-aspect)

This is a checked item within a list, to trigger a checked state use the class: is-checked.

  • Ventilatie (ingevuld)

Item within overview component (o-aspects)

This item is used in the overview component. The attribute data-highlight-target is given a name in order to show the correct highlight on the m-building component. You can consider this attribute as some sort of id, which has to be the same as the highlighted component it is linked to.

  • Ventilatie (ingevuld)

  • Ventilatie

    • Aspect with image (m-aspect, m-aspect--dark, m-aspect--col, m-aspect--aqua)

    • Isolatie
      Isolatie
    • Isolatie
      Isolatie
    • Isolatie
      Isolatie
    • Isolatie
      Isolatie

    Vertical (m-aspect, m-aspect--col, m-aspect--no-spacing, m-aspect--dark)

    • Ventilatie

    Standard with primary color (m-aspect, m-aspect--aqua)

    • Ventilatie

  • Ventilatie

    •

    Back

    /sass/atoms/_back.scss

    Back atom which can be used on a detail page.

    Terug
    Terug

    Badge

    /sass/atoms/badge.scss

    Badges can be used to add a 'count' to an element.

    2 2
    2 2

    Bounties

    /sass/base/molecules/_bounties.scss

    Used to display a list of bounties (premies).


    Breadcrumbs

    /sass/base/components/_breadcrumbs.scss

    Carousel

    /sass/base/molecules/_carousel.scss

    The Carousel components let's you slide between multiple cards.

    • energiefactuur

      Een lagere energiefactuur

      Donec sed odio dui. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodl Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Link naar blogpost.

      • energiefactuur lage

        Een lagere energiefactuur

      • smiley

        Esthetische meerwaarde

      • comfort

        Meer comfort

      • binnenklimaat

        Een gezonder binnenklimaat

      • besparing

        Financiële meerwaarde

      • klimaat

        Nodig voor ons klimaat

    • energiefactuur

      Een lagere energiefactuur

      Donec sed odio dui. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodl Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Link naar blogpost.

    • energiefactuur

      Een lagere energiefactuur

      Donec sed odio dui. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodl Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Link naar blogpost.

      • energiefactuur lage

        Een lagere energiefactuur

      • smiley

        Esthetische meerwaarde

      • comfort

        Meer comfort

      • binnenklimaat

        Een gezonder binnenklimaat

      • besparing

        Financiële meerwaarde

      • klimaat

        Nodig voor ons klimaat

    • energiefactuur

      Een lagere energiefactuur

      Donec sed odio dui. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodl Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Link naar blogpost.

    • energiefactuur

      Een lagere energiefactuur

      Donec sed odio dui. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodl Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Link naar blogpost.

      • energiefactuur lage

        Een lagere energiefactuur

      • smiley

        Esthetische meerwaarde

      • comfort

        Meer comfort

      • binnenklimaat

        Een gezonder binnenklimaat

      • besparing

        Financiële meerwaarde

      • klimaat

        Nodig voor ons klimaat

    • energiefactuur

      Een lagere energiefactuur

      Donec sed odio dui. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodl Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Link naar blogpost.

    • energiefactuur

      Een lagere energiefactuur

      Donec sed odio dui. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodl Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Link naar blogpost.

      • energiefactuur lage

        Een lagere energiefactuur

      • smiley

        Esthetische meerwaarde

      • comfort

        Meer comfort

      • binnenklimaat

        Een gezonder binnenklimaat

      • besparing

        Financiële meerwaarde

      • klimaat

        Nodig voor ons klimaat

    • energiefactuur

      Een lagere energiefactuur

      Donec sed odio dui. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodl Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Link naar blogpost.

    • energiefactuur

      Een lagere energiefactuur

      Donec sed odio dui. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodl Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Link naar blogpost.

      • energiefactuur lage

        Een lagere energiefactuur

      • smiley

        Esthetische meerwaarde

      • comfort

        Meer comfort

      • binnenklimaat

        Een gezonder binnenklimaat

      • besparing

        Financiële meerwaarde

      • klimaat

        Nodig voor ons klimaat

    • energiefactuur

      Een lagere energiefactuur

      Donec sed odio dui. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodl Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Link naar blogpost.

    • energiefactuur

      Een lagere energiefactuur

      Donec sed odio dui. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodl Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Link naar blogpost.

      • energiefactuur lage

        Een lagere energiefactuur

      • smiley

        Esthetische meerwaarde

      • comfort

        Meer comfort

      • binnenklimaat

        Een gezonder binnenklimaat

      • besparing

        Financiële meerwaarde

      • klimaat

        Nodig voor ons klimaat

    • energiefactuur

      Een lagere energiefactuur

      Donec sed odio dui. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodl Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Link naar blogpost.

    Choice

    /sass/base/molecules/_choice.scss

    The choice component shows an option to be chosen and start of proceed in a process

    Code

    /sass/base/atoms/_code.scss

    The code component shows a styled sharing code.

    54W0AG5R9
    54W0AG5R9
    54W0AG5R9

    Collapsable

    /sass/base/molecules/_collapsable.scss

    A collapsable consist of a clickable header and some content, that can be toggled (hidden / shown) by clicking the header. Both header and content can contain HTML.


    Collapsable

    More info to show


    Collapsable with toggle button text

    Minder info Meer info

    More info to show


    1

    Collapsable with step counter

    Meer info Minder info

    More info to show

    Collapsable

    More info to show

    collapse table

    /sass/base/molecules/_collapse-table.scss

    The collapse table component consists of an image and a file upload button. If there is no initial image source given and/or there's no image uploaded, a placeholder illustration is shown.

    Dakisolatie

    In orde

    Binnen 5 jaar na verkoop

    Meer info

    Dakisolatie

    In orde

    Binnen 5 jaar na verkoop

    Meer info

    Dakisolatie

    In orde

    Binnen 5 jaar na verkoop

    Meer info

    Dakisolatie

    In orde

    Binnen 5 jaar na verkoop

    Meer info

    Collapse

    /sass/base/molecules/_collapse.scss

    This component is used to define a header and a content block to collapse. Any content can be placed in the a-collapse__content and a-collapse__header. In order to apply the JavaScript, add the class js-m-collapse to the root of the element. The component works by toggling the class is-open on the root of the component. The animation is done by calculating the height of every child element within m-collapse__content and applying the height to this element with JavaScript.

    Doorbuiging of aantasting van de dragende dakdelen

    Meer info Minder info

    Een dak kan plat, hellend of gebogen zijn. Het kan gaan over het dak boven de eengezinswoning zowel als dat boven de meergezinswoning of appartementsgebouw. De dragende structuur van hellende én platte daken is meestal in hout, soms ook in staal. Platte daken kunnen ook uit beton bestaan.

    Doorbuiging of aantasting van de dragende dakdelen

    Meer info Minder info

    Een dak kan plat, hellend of gebogen zijn. Het kan gaan over het dak boven de eengezinswoning zowel als dat boven de meergezinswoning of appartementsgebouw. De dragende structuur van hellende én platte daken is meestal in hout, soms ook in staal. Platte daken kunnen ook uit beton bestaan.

    Dashboard header

    /sass/base/components/_dashboard-header.scss

    Divider tag

    /sass/base/atoms/_divider-tag.scss

    The divider tag component is a component that you can use for example between 2 columns as a tag for comparison reasons.

    OF





    OF

    Document search

    /sass/base/atoms/doc-search.scss

    This input field is used to search for documents. It make suggestions based on your input along with an option to go to a page with advanced search options.

    renovatie_dak.pdf renovatie_living.jpg renovatie_living.pdf renovatie_tuinhuis.jpg
    Meer zoekfilters
    renovatie_dak.pdf renovatie_living.jpg renovatie_living.pdf renovatie_tuinhuis.jpg
    Meer zoekfilters

    Document preview

    /sass/atoms/_document-preview.scss

    An embedded web view of a document or image.


    Donut

    /sass/base/molecules/_donut.scss

    The donut module represent the relationship of parts to a whole.
    It represent 3 parts which to be given in the canvas element



    Bruikbaar

    Bruikbaar

    Energie chart

    /sass/base/components/_energie-chart.scss

    The Energie chart components shows you the amount of energy consumed.

    Energie score

    /sass/base/coponents/_energie-score.scss

    The Energie chart components shows you the amount of energy consumed.

    Elektriciteit

    98% van totale energiegebruik

    • 91% hernieuwbare elekticiteit

    • 9% niet-hernieuwbare elekticiteit

    Elektriciteit

    98% van totale energiegebruik

    • 91% hernieuwbare elekticiteit

    • 9% niet-hernieuwbare elekticiteit

    Energieprestatie

    /sass/styleguides/components/_energieprestatie.scss
    • score marker position: to move the score marker along the bar, set the left attribute on div.energieprestatie__score-marker-container with a percentage
    • activate segment: to activate (enlarge) a segment of the bar, set data-active-segment on div.energieprestatie to the letter code for that segment
    • onbepaald status: the X-segment appears when "X" is set on data-active-segment to indicate the status is unknown

    100%

    Doelstelling
    koolstofneutraal

    90%

    100%

    Doelstelling
    koolstofneutraal

    90%

    EPC bar

    /sass/base/molecules/_epc-bar.scss

    The EPC bar can be used to visualize the EPC value of a home and give it some context.
    It consists of 3 important components:

    • .m-epc-bar__values holds all the EPC labels
    • .m-epc-bar__scale holds the scale & values that corresponds to these labels
    • .m-epc-bar__annotations holds the annotations on the EPC bar. These annoations can be positionned with the 'left' property and have a few colour variations:
      • m-epc-bar__annotation--green
      • m-epc-bar__annotation--orange
      • m-epc-bar__annotation--red


    • m-epc-bar__annotation--left: places the text of an annotation to the left
    • m-epc-bar__annotation--right: places the text of an annotation to the right
    • m-epc-bar__annotation--up: places the text above the other annotations

    100 kWh/m2 jaar

    100 kWh/m2 jaar

    100 kWh/m2 jaar

    F
    E
    D
    C
    B
    A
    A+
    ... 690 575 460 345 230 115 ...

    Vlaamse doelstelling
    656 kWh/ m2 jaar

    Vlaamse doelstelling
    656 kWh/ m2 jaar Tooltip with hyperlink

    100 kWh/m2 jaar

    100 kWh/m2 jaar

    100 kWh/m2 jaar

    F
    E
    D
    C
    B
    A
    A+
    ... 690 575 460 345 230 115 ...

    Vlaamse doelstelling
    656 kWh/ m2 jaar

    Vlaamse doelstelling
    656 kWh/ m2 jaar Tooltip with hyperlink

    Epc calculation

    /sass/base/components/_epc-calculation.scss
    322738 kWh/(m2jaar) Uw gemeten hernieuwbaar energiegebruik
    366530 kWh/(m2jaar) Uw gemeten totaal gebruik
    =
    B
    322738 kWh/(m2jaar) Uw gemeten hernieuwbaar energiegebruik
    366530 kWh/(m2jaar) Uw gemeten totaal gebruik
    =
    B

    EPC certificate

    /sass/base/molecules/_epc-bar.scss

    The EPC certificate component contains a brief summary of the EPC certificate of a building. An EPC certificate is an official document with data obtained by the governmen that shows how energy-efficient a building is.

    Uw EPC

    Aanwezig sinds: 11/12/2012

    Geldig tot 11/12/2012

    Download EPC
    E

    477 kWh/m2 jaar

    Uw EPC

    Aanwezig sinds: 11/12/2012

    Geldig tot 11/12/2012

    Download EPC
    E

    477 kWh/m2 jaar

    EPC chart

    /sass/base/molecules/_epc-chart.scss

    The EPC chart components shows you your EPC value against the whole of Belgium. This represented in a chart.

    Vergelijk uw EPC

    heelBelgië

    Vergelijk uw EPC

    heelBelgië

    epc-eenheid

    /sass/base/components/_epc-eenheid.scss

    Eenheid:

    Energiescore

    kWh/m2/jaar

    EPC score state

    /sass/base/molecules/_epc-score-state.scss

    The EPC score state components shows you your the EPC values in percentages of everybody in a state.

    score in Vlaanderen

    F

    5%

    E

    10%

    D

    10%

    C

    15%

    B

    30%

    A

    15%

    A+

    15%

    score in Vlaanderen

    F

    5%

    E

    10%

    D

    10%

    C

    15%

    B

    30%

    A

    15%

    A+

    15%

    EPC score

    /sass/base/molecules/_epc-score.scss

    The EPC score components shows you your EPC value against the whole of a certain area. This represented in a chart.

    Jouw EPC score

    D
    heelvlaanderen

    Jouw EPC score

    D
    heelvlaanderen

    Epc summary

    /sass/base/components/_epc-summary.scss
    B
    90 %
    Uw huidig energielabel Detail label berekening

    Gemiddelden van labels van niet-residentiële gebouwen

    Alle kantoren in vlaanderen
    D
    90 %
    Alle gebouwen in vlaanderen
    C
    33 %
    B
    90 %
    Uw huidig energielabel Detail label berekening

    Gemiddelden van labels van niet-residentiële gebouwen

    Alle kantoren in vlaanderen
    D
    90 %
    Alle gebouwen in vlaanderen
    C
    33 %

    EPC

    /sass/atoms/_epc.scss

    The EPC atom is used to display an "EPC" value.
    EPC values range from A untill G, so you always need to specify its value with a modifier.

    • .a-epc--a-plus
    • .a-epc--a
    • .a-epc--b
    • .a-epc--c
    • .a-epc--d
    • .a-epc--e
    • .a-epc--f

    A

    lorem ipsum

    2050

    B
    A

    Fade collapse

    /sass/base/molecules/_fade-collapse.scss

    The Fade collapse components hides a part of a block but can toggle between hidden and shown with the button.

    • 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    • Lorem ipsum dolor sit amet, consectetur 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    • Lorem ipsum dolor sit amet, consectetur 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    • Lorem ipsum dolor sit amet, consectetur 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    • Lorem ipsum dolor sit amet, consectetur 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    • Lorem ipsum dolor sit amet, consectetur 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    • Lorem ipsum dolor sit amet, consectetur 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    • Lorem ipsum dolor sit amet, consectetur 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    • Lorem ipsum dolor sit amet, consectetur 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    • Lorem ipsum dolor sit amet, consectetur 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    • Lorem ipsum dolor sit amet, consectetur 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. 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

    Feature Grid

    /sass/base/molecules/_feature-grid.scss

    Isolatie
    Isolatie
    Isolatie
    Isolatie
    Isolatie
    Isolatie
    Isolatie
    Isolatie
    Isolatie
    Isolatie
    Isolatie
    Isolatie

    Filter

    /sass/atoms/molecules/filter.scss

    The filter is component that toggles content. The content can be any type of input fields, such as datepickers, checkboxes,...

    Default


    States

    The active state can be toggled by adding the class 'is-open' via JavaScript. In case the filter contains content, the class 'is-active' should be added via JavaScript.




    Flood chart

    /sass/base/molecules/_flood-chart.scss

    The Flood chart components shows you the chance of a flood at your building.

    Flood score

    /sass/base/molecules/_flood-score.scss

    The Flood score component shows you the chance of a flood at your building.

    Woning score

    Middelgrote overstromingskans

    Details score berekening

    Woning score

    Middelgrote overstromingskans

    Details score berekening

    Folder preview

    /sass/base/components/_folder-preview.scss

    placeholder folder

    Folder search

    /sass/base/components/_folder-search.scss

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07

      Folder 08

      Folder 09

    Zoek of maak een map

    Selecteer of maak een map
    Maak Zomerbeek

    Footer

    /sass/base/organisms/_footer.scss

    Card - Gebouwenpas

    /sass/base/components/_g-card.scss

    placeholder

    Geluid

    Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor.

    Ga naar geluidskaart

    Unavailable - Gebouwenpas

    /sass/base/components/_unavailable.scss

    The unavailable components shows the state of something.

    General score selection

    /sass/base/molecules/_general-score-selection.scss

    This component allows the user to rate his general accordingly via radio buttons.

    Algemene score

    Gebouwscore

    Algemene score

    Gebouwscore

    General score

    /sass/base/molecules/_general-score.scss

    This component allows the user to see his general score.

    Algemene score

    Gebouwscore

    Geen overstroming voorspeld

    Algemene score

    Gebouwscore

    Geen overstroming voorspeld

    Gradient

    /sass/molecules/gradient.scss

    Header types

    /sass/molecules/header.scss

    The header molecule is a very generic component that can be used to hold all different kinds of content in the header.



    Default header

    Isolatie & beglazing



    Isolatie & beglazing



    Header with actions

    Isolatie & beglazing



    Isolatie & beglazing



    Header with select

    ik ben van plan om te
    Verbouwen
    verkopen verbouwen verhuren bouwen



    ik ben van plan om te
    Verbouwen
    verkopen verbouwen verhuren bouwen



    Breadcrumb header

    Energie EPB



    Energie EPB

    Help Text

    /sass/molecules/_helptext.scss

    The help text molecule looks small, but can hold a lot of information thanks to its hidden tooltip. When hovering the help icon, the tooltip appears.


    Tooltip with a hyperlink
    Tooltip with a hyperlink

    House block Text

    /sass/molecules/_house.scss

    Default house component

    Energiestraat 38
    Zomerbeek

    Energiestraat 38
    Zomerbeek


    House component with label

    Gedeeld

    Energiestraat 38
    Zomerbeek

    Gedeeld

    Energiestraat 38
    Zomerbeek


    House component Toggle

    Gedeeld

    Energiestraat 38
    Zomerbeek

    Gedeeld

    Energiestraat 38
    Zomerbeek

    icon-button

    /sass/base/components/_icon-button.scss

    Icon list

    /sass/base/molecules/_icon-list.scss

    • Een lagere energiefactuur

    • Meer comfort

    • Een lagere energiefactuur

    • Meer comfort

    image edit

    /sass/base/molecules/_image-edit.scss

    The image edit component consists of an image and a file upload button. If there is no initial image source given and/or there's no image uploaded, a placeholder illustration is shown.

    menu-image
    menu-image
    menu-image

    Img Overlay

    /sass/base/molecules/_img-overlay.scss

    Ken uw woning

    Met de woningpas van de vlaamse overheid blijf je perfect geïnformeerd over jouw woning

    Ontdek jouw woningpas

    Ken uw woning

    Met de woningpas van de vlaamse overheid blijf je perfect geïnformeerd over jouw woning

    Ontdek jouw woningpas

    Info

    /sass/base/molecules/_info.scss

    Let op voor u renoveert

    Laat u bijstaan door een architect, aannemer of andere bouwprofessional voor deskundig advies op maat en een goede uitvoering van de werken.

    Toon renovatie experten


    Let op voor u renoveert

    Laat u bijstaan door een architect, aannemer of andere bouwprofessional voor deskundig advies op maat en een goede uitvoering van de werken.

    Toon renovatie experten

    Instance card

    /sass/base/components/_instance-card.scss

    Zoek of maak een map

    Selecteer of maak een map
    Maak Zomerbeek
    Gedeeld
    card-image
    Energiestraat 1
    Zomerbeek
    Bekijk woning

    Zoek of maak een map

    Selecteer of maak een map
    Maak Zomerbeek
    card-image
    Energiestraat 1
    Zomerbeek
    Uw eenheden 3
    Bekijk
    Bekijk gebouw

    Zoek of maak een map

    Selecteer of maak een map
    Maak Zomerbeek
    card-image
    Energiestraat 1
    Zomerbeek
    Bekijk perceel

    Zoek of maak een map

    Selecteer of maak een map
    Maak Zomerbeek
    card-image
    Energiestraat 1
    Zomerbeek
    Bekijk woning

    Zoek of maak een map

    Selecteer of maak een map
    Maak Zomerbeek
    Gedeeld
    card-image
    Energiestraat 1
    Zomerbeek
    Bekijk gebouw

    Zoek of maak een map

    Selecteer of maak een map
    Maak Zomerbeek
    card-image
    Energiestraat 1
    Zomerbeek
    Bekijk perceel
    card-image
    Energiestraat 1
    Zomerbeek
    Bekijk woning
    card-image
    Energiestraat 1
    Zomerbeek
    Uw eenheden 3
    Bekijk
    Bekijk gebouw
    card-image
    Energiestraat 1
    Zomerbeek
    Bekijk perceel

    Zoek of maak een map

    Selecteer of maak een map
    Maak Zomerbeek
    card-image
    Energiestraat 1
    Zomerbeek
    Bekijk

    Table

    /sass/base/components/_table.scss

    A new reusable table component with filter options

    Adres
    Gemeente
    Uw eenheden
    Gedeeld
    		Dorp-Oost 85 9080 Lochristi 0

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07
    		Lorem ipsumstraat 18 1000 Brussel 3

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07
    		Triangelstraat 8a 1000 Brussel app-8a
    		Triangelstraat 8b 1000 Brussel app-8c
    		Triangelstraat 8c 1000 Brussel app-8c
    		Triangelstraat 8 1000 Brussel 3

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07
    		Triangelstraat 8a 1000 Brussel app-8a
    		Triangelstraat 8b 1000 Brussel app-8c
    		Triangelstraat 8c 1000 Brussel app-8c
    		Zomerstraat 75 2800 Zomerbeek 0

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07
    		Academiestraat 15 8000 Brugge 0

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07
    		Dorp-Zuid 25 9080 Lochristi 6

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07
    		Triangelstraat 8a 1000 Brussel app-8a
    		Triangelstraat 8b 1000 Brussel app-8c
    		Triangelstraat 8c 1000 Brussel app-8c
    		Triangelstraat 8d 1000 Brussel app-8d
    		Triangelstraat 8e 1000 Brussel app-8e
    		Triangelstraat 8f 1000 Brussel app-8f
    Adres
    Gemeente
    Uw eenheden
    Gedeeld
    		Dorp-Oost 85 9080 Lochristi 0

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07
    		Lorem ipsumstraat 18 1000 Brussel 3

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07
    		Triangelstraat 8a 1000 Brussel app-8a
    		Triangelstraat 8b 1000 Brussel app-8c
    		Triangelstraat 8c 1000 Brussel app-8c
    		Triangelstraat 8 1000 Brussel 3

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07
    		Triangelstraat 8a 1000 Brussel app-8a
    		Triangelstraat 8b 1000 Brussel app-8c
    		Triangelstraat 8c 1000 Brussel app-8c
    		Zomerstraat 75 2800 Zomerbeek 0

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07
    		Academiestraat 15 8000 Brugge 0

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07
    		Dorp-Zuid 25 9080 Lochristi 6

    Zoek of maak een map

    Selecteer of maak een map

      Folder 02

      Folder 03

      Folder 04

      Folder 05

      Folder 06

      Folder 07
    		Triangelstraat 8a 1000 Brussel app-8a
    		Triangelstraat 8b 1000 Brussel app-8c
    		Triangelstraat 8c 1000 Brussel app-8c
    		Triangelstraat 8d 1000 Brussel app-8d
    		Triangelstraat 8e 1000 Brussel app-8e
    		Triangelstraat 8f 1000 Brussel app-8f

    Keuringen card

    /sass/atoms/_keuringen-card.scss

    A card used to visualize keuringen

    Eerste ingebruikname

    Verplicht voor eigenaar

    Wanneer

    Bij de plaatsing van een nieuw centraal stooktoestel.

    Door wie

    Erkend technicus vloeibare brandstof

    Vermogen

    Alle vermogens

    of

    Wanneer

    Bij de plaatsing van een nieuw centraal stooktoestel.

    Door wie

    Erkend technicus vloeibare brandstof

    Vermogen

    Alle vermogens

    Eerste ingebruikname

    Verplicht voor eigenaar

    Wanneer

    Bij de plaatsing van een nieuw centraal stooktoestel.

    Door wie

    Erkend technicus vloeibare brandstof

    Vermogen

    Alle vermogens

    of

    Wanneer

    Bij de plaatsing van een nieuw centraal stooktoestel.

    Door wie

    Erkend technicus vloeibare brandstof

    Vermogen

    Alle vermogens

    Label

    /sass/base/atoms/_label.scss

    A label contains text and has a specific color scheme. The label is used to categorize content.

    Toegevoegd door eigenaar Toegevoegd door Fluvius Toegevoegd door Fluvius Toegevoegd door Fluvius

    legend



    • Woningen

    • Gebouwen

    • Percelen

    • Woningen

    • Gebouwen

    • Percelen

    Legend

    /sass/base/atoms/_legend.scss

    Energetisch helemaal niet in orde

    Energetisch helemaal niet in orde

    Legends summary

    /sass/base/atoms/_legend-summary.scss

    • Energetisch helemaal niet in orde

    • Energetisch niet in orde

    • Energetisch redelijk ok, maar niet voldoende voor doelstelling

    • Zonne-energie

    • Aandachtspunten

    • Energetisch helemaal niet in orde

    • Energetisch niet in orde

    • Energetisch redelijk ok, maar niet voldoende voor doelstelling

    • Zonne-energie

    • Aandachtspunten

    Liferay - Dashboard

    /sass/base/scopes/liferay.scss /sass/base/organisms/dashboard.scss

    This is HTML that is generated by Liferay and is mainly used on the dashboard/dashboard-medium page. As a wrapper class to style the things properly, the class s-liferay is used.

    Omgeving

    Bekijk een grote verscheidenheid aan kaarten in uw omgeving.

    Meer kaarten

    Bekijk de gegevens van uw Eéngezinswoning. Het gebouw is een Gesloten bebouwing van bouwjaar 1999.

    Meer info over mijn gebouw

    Omgeving

    Bekijk een grote verscheidenheid aan kaarten in uw omgeving.

    Meer kaarten

    Bekijk de gegevens van uw Eéngezinswoning. Het gebouw is een Gesloten bebouwing van bouwjaar 1999.

    Meer info over mijn gebouw

    Link

    /sass/base/atoms/_link.scss

    Standard (a-link)

    This is a link This is a link

    Grey colored (a-link, a-link--grey)

    This is a link This is a link

    Aqua colored (a-link, a-link--aqa)

    This is a link This is a link

    No underline (a-link, a-link--no-underline)

    This is a link This is a link

    Uppercased (a-link, a-link--uppercase)

    This is a link This is a link

    Small font size (a-link, a-link--small)

    This is a link This is a link
    This is a link

    Lists

    /sass/base/_lists.scss

    Implementation

    By default lists are not included in base/_normalize.scss. Each class extending the default (e.g. inline-list) must handle the reset in itself. Usually this means resetting the padding-left value and adjust the list-style property.

    A default list

    • item 1
      • subItem 1
      • subItem 2
      • subItem 3
    • item 2
    • item 3


    An inline list

    • item 1
    • item 2
    • item 3


    A Definition list

    item 1
    value
    item 2
    value
    item 3
    value


    An ordered list

    1. Item 1
      • SubItem 1
    2. Item 2
      • SubItem 2
    3. Item 3
      • SubItem 3
    • item 1
      • subItem 1
      • subItem 2
      • subItem 3
    • item 2
    • item 3

    Main Nav

    /sass/base/organisms/_main-nav.scss

    The main nav is placed on the left side and holds the links to all the different sections.

    Some of the items, 'Attesten & documenten' and 'In orde te brengen bij...' are collapsables. There is JavaScript needed to open the collapse and to add an active class to the parent and child if active.

    Woning


    Woning with picture, shared


    Gebouw


    Eenheid


    Perceel


    Map sidebar

    /sass/base/components/_map-sidebar.scss

    Er zijn meerdere gebouwen / woningen op dit punt :

    Sint-Salvatorstraat 18

    9000 Gent

    Sint-Salvatorstraat 18

    9000 Gent

    Sint-Salvatorstraat 18

    9000 Gent

    Sint-Salvatorstraat 18

    9000 Gent

    Map

    /sass/atoms/_map.scss

    Map example with options & legend and a map example with legend & zoom buttons.


    Options
    Legende
    Legende
    Legende
    Options
    Legende
    Legende
    Legende

    Modal

    /sass/base/organisms/_modal.scss

    Modal organisms are used to display modals or other content on top of the page.

    Modal trigger

    We konden een perceel niet vinden

    Perceel: 0001/00L002

    Dit perceel kon niet gevonden worden in onze database omdat dit vermoedelijk niet bestaat.

    Pas je gekozen percelen aan en probeer opnieuw. Blijft dit probleem, neem dan contact op met OVAM.

    Oke dan
    This is the content of the modal.

    Module

    /sass/base/molecules/_module.scss

    Modules can be used to represent almost any kind of content. They can be used in our great and are perfect for making dashboards.

    It can contain the Outdated Symbol atom to indicate that the data shown might be outdated.

    Optional classes:

    • .m-module--center to horizontally center its content.
    • .m-module--noBorder to remove its border. Ideally used within an .m-page.
    • .m-module--bgColorGrey to set a light grey background-color.
    • .m-module--smallPadding to reduce its padding

    Adviezen

    Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

    Toon mijn persoonlijke adviezen

    Koeling

    Geen aanwezig

    Details

    Bodem

    Matig

    Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

    Meer info over mijn bodem

    Omdat sinds het laatste EPC-certificaat renovatiewerken zijn uitgevoerd, kan de informatie nu anders zijn.

    Meer info

    Adviezen

    Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

    Toon mijn persoonlijke adviezen

    Number Focus

    /sass/atoms/_number-focus.scss

    The number focus component highlights a important amount that needs to stand out.


    125

    premies in uw regio

    125

    premies in uw regio

    Options

    /sass/base/molecules/_options.scss

    Creates a button that toggles a tooltip with options.
    Supports the tooltip in all 4 directions
    Toggle the .is-open class on the .m-options element to hide/show the tooltip



    Legende

    Options
    Cras mattis consectetur purus sit amet fermentum.
    Legende

    Options
    Cras mattis consectetur purus sit amet fermentum.

    Outdated Alert

    /sass/base/molecules/_outdated-alert.scss

    The outdated alert indicates that the content shown in a component or on a page migth be outdated. The component can contain a close button.


    Default


    Let op! Dit icoon geeft aan dat de informatie vanuit de overheid mogelijk niet meer actueel is. Dit omdat een renovatiewerk door de eigenaar of via een premieaanvraag werd toegevoegd.

    With close button


    Let op! Dit icoon geeft aan dat de informatie vanuit de overheid mogelijk niet meer actueel is. Dit omdat een renovatiewerk door de eigenaar of via een premieaanvraag werd toegevoegd.

    Let op! Dit icoon geeft aan dat de informatie vanuit de overheid mogelijk niet meer actueel is. Dit omdat een renovatiewerk door de eigenaar of via een premieaanvraag werd toegevoegd.

    Outdated Symbol

    /sass/base/atoms/_outdated-symbol.scss

    The outdated symbol indicates that the content shown in a particular component might be outdated. The outdated symbol should always be placed in the top left or top right corner of the component.

    Default


    Omdat sinds het laatste EPC-certificaat renovatiewerken zijn uitgevoerd, kan de informatie nu anders zijn.

    Meer info

    Inversed


    Omdat sinds het laatste EPC-certificaat renovatiewerken zijn uitgevoerd, kan de informatie nu anders zijn.

    Meer info

    Large


    Omdat sinds het laatste EPC-certificaat renovatiewerken zijn uitgevoerd, kan de informatie nu anders zijn.

    Meer info

    Omdat sinds het laatste EPC-certificaat renovatiewerken zijn uitgevoerd, kan de informatie nu anders zijn.

    Meer info

    Overlay

    /sass/base/organisms/_overlay.scss

    Overlay organisms can be used to display modals or other content on top of the page.

    Loading Page Illustration
    Quote

    Neem zeker eens een kijkje bij "Energie" in jouw woningpas om te ontdekken of jouw woning geschikt is voor zonnepanelen

    Een ogenblik geduld wij stellen momenteel jouw woning pas samen.

    Loading Page Illustration
    Quote

    Neem zeker eens een kijkje bij "Energie" in jouw woningpas om te ontdekken of jouw woning geschikt is voor zonnepanelen

    Een ogenblik geduld wij stellen momenteel jouw woning pas samen.

    Page

    /sass/molecules/page.scss

    The page-molecule is a very generic component that can be used to hold all different kinds of content.
    You can display multiple pages on a screen, and each page can have one or more .m-page__section's to split up content.



    // content goes here
    // content goes here
    // content goes here
    // content goes here
    // content goes here
    // content goes here

    Pagination

    /sass/components/_pagination.scss

    Pagination gives the user the ability to navigate through the different pages of the large devided list of items.

    Default pagination

    Vorige Volgende

    Dropdown pagination

    Werken per pagina:

    1-2 van de 2

    Vorige Volgende

    Partial score selection

    /sass/base/molecules/_partial-score-selection.scss

    This component allows the user to rate his partial accordingly via radio buttons.

    Deelscore

    Intense neerslag

    Pluviaal

    Deelscore

    Intense neerslag

    Pluviaal

    Payment

    /sass/molecules/_payment.scss

    TO DO: write documentation


    totaal te betalen € 104
    Betaal veilig online via xxxxx Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    • mastercard
    • maestro
    • paypall
    totaal te betalen € 104
    Betaal veilig online via xxxxx Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    • mastercard
    • maestro
    • paypall

    Permit

    /sass/base/molecules/_permit.scss

    Permits are a specific set of styles used for displaying module-like layouts on the vergunningen page

    2009

    Aanvraag voor stedenbouwkundige vergunning 2009

    Kappen van hoogstammige bomen in een bos

    Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.

    Details

    Bouwmisdrijf

    Inbreuk op informatieplicht

    Aanbrengen van een lichtreclame.

    Aanvraag op

    13/11/2014

    Beslissing op

    30/01/2014

    Aard van de beslissing

    Vergund


    Details

    Profile Picture

    /sass/base/molecules/_profile-picture.scss

    The profile picture component consists of an image and a file upload button. If there is no initial image source given and/or there's no image uploaded, a placeholder illustration is shown.

    menu-image
    menu-image

    Progress score

    /sass/molecules/progress-score.scss
    jouw score E
    A F

    Progress Bar

    /sass/molecules/progress.scss

    The progressbar is a rather complex molecule that can be used for various purposes. It consists of a backdrop, a 'thumb' to show it's process which can be controlled by giving it a certain width. A seperator-wrapper which can be used to add and control seperators, a info section to add some details and a legend section to add all the different values.

    Standaard behaviour

    Niet energiezuinig
    Heel energiezuinig
    40
    < 80 Norm bij aangifte
    < 60 Streefdoel 2050
    40 W/m2 k

    Uw score

    matig

    < 80 W/m2 k

    Norm bij aangifte

    te berekenen

    < 60 W/m2 k

    Streefdoel 2050

    te berekenen

    Niet energiezuinig
    Heel energiezuinig
    62 W/m2 k
    < 80 W/m2 k Norm bij aangifte
    < 60 W/m2 k Streefdoel 2050
    62 W/m2 k

    Uw score

    matig

    < 80 W/m2 k

    Norm bij aangifte

    te berekenen

    < 60 W/m2 k

    Streefdoel 2050

    te berekenen

    Niet energiezuinig
    Heel energiezuinig
    73
    < 80 Norm bij aangifte
    < 60 Streefdoel 2050
    73 W/m2 k

    Uw score

    matig

    < 80 W/m2 k

    Norm bij aangifte

    te berekenen

    < 60 W/m2 k

    Streefdoel 2050

    te berekenen

    Niet energiezuinig
    Heel energiezuinig
    78 W/m2 k
    < 80 W/m2 k Norm bij aangifte
    < 60 W/m2 k Streefdoel 2050
    78 W/m2 k

    Uw score

    matig

    < 80 W/m2 k

    Norm bij aangifte

    te berekenen

    < 60 W/m2 k

    Streefdoel 2050

    te berekenen

    Niet energiezuinig
    Heel energiezuinig
    87
    < 80 Norm bij aangifte
    < 60 Streefdoel 2050
    87 W/m2 k

    Uw score

    matig

    < 80 W/m2 k

    Norm bij aangifte

    te berekenen

    < 60 W/m2 k

    Streefdoel 2050

    te berekenen

    Edge cases norm / streefdoel

    Wanneer de labels bijna overeenkomen mogen ze overlappen

    Niet energiezuinig
    Heel energiezuinig
    10 W/m2 k
    < 61 W/m2 k Norm bij aangifte
    < 60 W/m2 k Streefdoel 2050
    10 W/m2 k

    Uw score

    matig

    < 61 W/m2 k

    Norm bij aangifte

    te berekenen

    < 60 W/m2 k

    Streefdoel 2050

    te berekenen

    Wanneer de labels bijna overeenkomen mogen ze overlappen

    Niet energiezuinig
    Heel energiezuinig
    58
    < 60 Norm bij aangifte
    < 60 Streefdoel 2050
    58 W/m2 k

    Uw score

    matig

    < 60 W/m2 k

    Norm bij aangifte

    te berekenen

    < 60 W/m2 k

    Streefdoel 2050

    te berekenen

    De waarden mogen nooit breder getoond worden dan de progressbar zelf. Indien deze te ver komen worden deze dus rechts uitgelijnd. De uitlijning van beide labels is altijd hetzelfde.

    Niet energiezuinig
    Heel energiezuinig
    58 W/m2 k
    < 80 W/m2 k Norm bij aangifte
    < 60 W/m2 k Streefdoel 2050
    58 W/m2 k

    Uw score

    matig

    < 80 W/m2 k

    Norm bij aangifte

    te berekenen

    < 60 W/m2 k

    Streefdoel 2050

    te berekenen

    Hier geldt hetzelfde behaviour als boven omschreven voor labels die overlappen, of dicht bij elkaar komen.

    Niet energiezuinig
    Heel energiezuinig
    58
    < 60 Norm bij aangifte
    < 60 Streefdoel 2050
    58 W/m2 k

    Uw score

    matig

    < 60 W/m2 k

    Norm bij aangifte

    te berekenen

    < 60 W/m2 k

    Streefdoel 2050

    te berekenen

    Progress bar isolation

    10 W/m2 k
    helemaal niet goed geïsoleerd
    niet goed geïsoleerd
    goed geïsoleerd
    heel goed geïsoleerd
    10 W/m2 k
    85
    helemaal niet goed geïsoleerd
    niet goed geïsoleerd
    goed geïsoleerd
    heel goed geïsoleerd
    85
    90 W/m2 k
    helemaal niet goed geïsoleerd
    niet goed geïsoleerd
    goed geïsoleerd
    heel goed geïsoleerd
    90 W/m2 k
    100
    helemaal niet goed geïsoleerd
    niet goed geïsoleerd
    goed geïsoleerd
    heel goed geïsoleerd
    100

    Radio block

    /sass/molecules/_radio-block.scss

    Radio-block component

    Renovatie status

    /sass/base/molecules/_renovatie-status.scss

    The Renovation status component contains a brief summary of all the energetic renovations of your house, renovations done by you or an external. It also shows your current EPC and the target EPC that the governmen wants to achieve.

    Default


    Mijn werken

    Er zijn 3 werken gekend sinds uw laatste EPC.

    Geldig energielabel

    E

    2018

    Energetisch werk

    2019

    warmtepomp

    2012 - 2014

    3 werken

    2015

    Vloerisolatie

    Vlaamse doelstelling

    A

    2050

    Details van mijn werken

    • Toegevoegd door Fluvius

    • Toegevoegd door eigenaar

    • Energetisch werk

    Mijn werken

    Er zijn 3 werken gekend sinds uw laatste EPC.

    Bouwjaar woning

    2018

    Energetisch werk

    2015

    Vloerisolatie

    Energetisch werk

    2019

    warmtepomp

    2012 - 2014

    3 werken

    Vlaamse doelstelling

    A

    2050

    Details van mijn werken

    • Toegevoegd door Fluvius

    • Toegevoegd door eigenaar

    • Energetisch werk

    Mijn werken

    Er zijn 3 werken gekend sinds uw laatste EPC.

    Bouwjaar woning

    2018

    Energetisch werk

    2015

    Vloerisolatie

    Energetisch werk

    2019

    warmtepomp

    2012 - 2014

    3 werken

    Vlaamse doelstelling

    A

    2050

    Details van mijn werken

    Score label

    /sass/base/molecules/_score-label.scss

    This component shows a rating letter with the corresponding colour.

    A B C D
    A B C D

    Select Card

    /sass/molecules/_select-card.scss

    The Select Card molecule is used to be able to add more info (visual, price, name, adress,...) to a select box.


    Perceel 1251E Hogeweg 543, 8500 Kortrijk € 52
    Perceel 1251E Hogeweg 543, 8500 Kortrijk € 52
    Perceel 1251E Hogeweg 543, 8500 Kortrijk € 52
    Perceel 1251E Hogeweg 543, 8500 Kortrijk € 52

    selection-bar

    /sass/base/components/_selection-bar.scss

    5 geselecteerd

    5 geselecteerd

    Sharing info

    /sass/base/atoms/_sharing-info.scss

    The sharing info component just resembles a small portion of info about sharing info data.

    Geldigheidsduur

    Van 17/02/19 t.e.m. 17/03/19

    Totale duur: 1 maand
    Geldigheidsduur

    Van 17/02/19 t.e.m. 17/03/19

    Totale duur: 1 maand

    Sharing overview

    /sass/base/molecules/_sharing-overview.scss

    The sharing overview component clusters the sharing info you need to manage a shared house. It can hold a variety of components both informative or action related.

    Sharing without action

    Sharing with action

    Show more

    /sass/base/molecules/_show-more.scss

    This component makes use of javascript to trigger the correct classes and calculate the height to create the animation. This makes use of the WP_ShowMore class. To trigger the Javascript, place the js-show-more:[id] class on the main component. Replace the [id] by a unique name, because there can be multiple collapsables within each other. give the content js-show-more__[id]-content class and the button container js-show-more__[id]-button in order for the javascript to work.



    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content
    • This is collapsable content

    simple table

    /sass/base/molecules/_simple-table.scss

    The simple table component consists of an image and a file upload button. If there is no initial image source given and/or there's no image uploaded, a placeholder illustration is shown.

    Meternummer (laatste 4 cijfers)

    4321

    EAN nummer

    541448920704465681

    Single line editable

    /sass/molecules/_single-line-editable.scss

    A single line input field with actions.


    Speech bubble

    /sass/base/atoms/_speech-bubble.scss

    The divider tag component is a component that you can use for example between 2 columns as a tag for comparison reasons.

    speech bubble

    speech bubble

    Sphere

    /sass/atoms/_sphere.scss

    A generic sphere with a color.

    • .a-sphere--green
    • .a-sphere--red
    • .a-sphere--orange
    • .a-sphere--aqua
    • .a-sphere--grey-border
    • .a-sphere--ovam--dark-green
    • .a-sphere--ovam-green
    • .a-sphere--ovam-yellow
    • .a-sphere--ovam-orange
    • .a-sphere--ovam-brown
    • .a-sphere--ovam-grey
    • .a-sphere--ovam-red
    • .a-sphere--ovam-blue



    • .a-sphere--green-striped
    • .a-sphere--red-striped
    • .a-sphere--orange-striped
    • .a-sphere--ovam--dark-green-striped
    • .a-sphere--ovam-green-striped
    • .a-sphere--ovam-yellow-striped
    • .a-sphere--ovam-orange-striped
    • .a-sphere--ovam-brown-striped
    • .a-sphere--ovam-grey-striped
    • .a-sphere--ovam-red-striped
    • .a-sphere--ovam-blue-striped

    Split

    /sass/styleguides/components/_split.scss

    left content

    right content

    Status icon

    /sass/base/molecules/_status-icon.scss

    This component is used to display an icon with a state an a text. There are 3 states that determine the icon and the color of the state: is-valid, is-invalid and is-average.


    5 attesten aanwezig

    5 attesten aanwezig

    5 attesten aanwezig

    5 attesten aanwezig
    5 attesten aanwezig

    Status

    /sass/atoms/status.scss

    A status consists of an status-indicator, icon (optional) and title (optional)
    This status-indicator can hold any icon, combined with a colour defined through these classes:

    • .a-status__indicator--green
    • .a-status__indicator--orange
    • .a-status__indicator--red

    Bodem

    Bodem

    Sub nav

    /sass/base/components/_sub-nav.scss

    The sub nav to navigate the dashboard

    Sub navigation

    /sass/organisms/subnav-small.scss

    The sub navigation lists the sub pages of a selected page and highlights the active sub page.



    Subnav

    /sass/atoms/subnav.scss



    Default subnav




    Large subnav


    Summary

    /sass/base/molecules/_summary.scss

    A way to sum up different properties under one category. This makes use of the m-collapsable component to toggle between the content.



    Dragende binnenmuren



    Dragende binnenmuren

    Meer info Minder info

    • Stabiliteit: zeer ernstig vervorming en/of scheurvorming van gevelvlak of gevelelementen

    • Vochtschade: geen algemeen vochtschade in het gemeenschappelijk deel van het pand (trappenhal, inkomhal, kelder ...)

    Dragende binnenmuren

    Meer info Minder info

    • Stabiliteit: zeer ernstig vervorming en/of scheurvorming van gevelvlak of gevelelementen

    • Vochtschade: geen algemeen vochtschade in het gemeenschappelijk deel van het pand (trappenhal, inkomhal, kelder ...)

    Tab bar

    /sass/base/molecules/_tab-bar.scss

    Tables

    /sass/atoms/_tables.scss

    Table data should always be clear and relevant for any given context. Therefor we limit the amount of columns: some fixed columns (containing an identifier and the most relevant data property) and some dynamic columns (with selects to display other properties).



    Advanced data table


    omschrijving advies prijsschatting
    Zolder
    De zoldervloer is momenteel nog niet geïssoleerd     		Voorzie isolatie €4000 - €6000
    Spouwmuur
    De spouwmuur is momenteel nog niet geïssoleerd     		Voorzie isolatie €13500 - €15000
    Spouwmuur
    De spouwmuur is geïsoleerd (4cm PUR), maar er is niet voldoende isolatie anwezig om de langetermijndoelstelling te halen.     		Overweeg verder onderzoek over welke bijkomende isolatie best geschikt is.
    Hellend dak
    Het dak is geïsoleerd (11 cm rotswol) maar presteert minder goed dan de langetermijn doelstelling.     		Overweeg het plaatsen van extra dakisolatie, waarbij ook aandacht kan besteed worden aan goede luchtdichtheid
    omschrijving advies prijsschatting
    Zolder
    De zoldervloer is momenteel nog niet geïssoleerd     		Voorzie isolatie €4000 - €6000
    Spouwmuur
    De spouwmuur is momenteel nog niet geïssoleerd     		Voorzie isolatie €13500 - €15000
    Spouwmuur
    De spouwmuur is geïsoleerd (4cm PUR), maar er is niet voldoende isolatie anwezig om de langetermijndoelstelling te halen.     		Overweeg verder onderzoek over welke bijkomende isolatie best geschikt is.
    Hellend dak
    Het dak is geïsoleerd (11 cm rotswol) maar presteert minder goed dan de langetermijn doelstelling.     		Overweeg het plaatsen van extra dakisolatie, waarbij ook aandacht kan besteed worden aan goede luchtdichtheid


    Simple data table

    Ruimte [1] Oppervlakte [1]
    Keuken Niet gekend
    Keuken 18m2
    Woonkamer 15m2
    badkamer 20m2
    Toilet beneden niet gekend
    Toilet boven niet gekend
    Ruimte [1] Oppervlakte [1]
    Keuken Niet gekend
    Keuken 18m2
    Woonkamer 15m2
    badkamer 20m2
    Toilet beneden niet gekend
    Toilet boven niet gekend


    Less simple data table

    Aanwezig in woningpas Tooltip with hyperlink Attestnaam Verantwoordelijke
    		EPC-bestaand, residentieel
    Steeds verplicht
    		 Eigenaar Details
    		Conformiteitsattest stookolietank
    Verplicht indien in bezit van stookolietank
    		 Eigenaar Details
    Aanwezig in woningpas Tooltip with hyperlink Attestnaam Verantwoordelijke
    		EPC-bestaand, residentieel
    Steeds verplicht
    		 Eigenaar Details
    		Conformiteitsattest stookolietank
    Verplicht indien in bezit van stookolietank
    		 Eigenaar Details


    A table with text alerts

    Keuringsattest van een nieuwe of gewijzigde cv-installatie

    Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.     		Geldig tot 05/03/2017 Details

    Keuringsattest van een nieuwe of gewijzigde cv-installatie

    Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.     		Geldig tot 05/03/2017 Details
    Keuringsattest van een nieuwe of gewijzigde cv-installatie
    Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.     		Geldig tot 05/03/2017 Details

    Keuringsattest van een nieuwe of gewijzigde cv-installatie

    Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.     		Geldig tot 05/03/2017 Details

    Keuringsattest van een nieuwe of gewijzigde cv-installatie

    Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.     		Geldig tot 05/03/2017 Details
    Keuringsattest van een nieuwe of gewijzigde cv-installatie
    Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.     		Geldig tot 05/03/2017 Details


    Custom advanced table with divs and collapsables

    This table makes use of divs because of its complex structure and collapsable rows. The collapse is made with the use of the m-show-more component and javascript to trigger the classes and set the height. The tables make use of the a-row class to determine the width of every column. For example: a-row--1-12, a-row--2-12, a-row--3-12, ...

    Huidige situatie
    Aanbeveling
    Indicatie gemiddelde prijs Tooltip with hyperlink
    Laatst opgemaakt op 2018
    Daken
    121m2 dak is (vermoedelijk) niet geïsoleerd.
    Plaats isolatie.
    €4000 / €6000
    meer info minder info
    Hellend dak
    61m2 hellend dak is niet geïsoleerd.
    Plaats isolatie aan binnenzijde of plaats isolatie aan buitenzijde.
    €3000 / €12000
    Plat dak
    20m2 plat dak is niet geïsoleerd en 30m3 plat dak is vermoedelijk te weinig geïsoleerd.
    Plaats isolatie bovenop de bestaande dakconstructie(=warm dak)
    €3500
    Plafond
    10m2 plafond is niet geïsoleerd
    Plaats isolatie bovenop de zoldervloer.
    €600

    Premies voor uw dak

    6% BTW-Tarief bij renovatie en bij sloop/heropbouw
    Federale overheid     		6% BTW (ipv 21%) Meer info
    Renovatiepremie voor woningen
    Federale overheid     		€ 1200 Meer info
    Denk vooruit!
    Denk vooruit!

    Isoleert u eerst uw dak en dan uw gevels? Verleng dan nu al de dakoversteken zodat de buitengevelisolatie luchtdicht en zonder onderbreking van de isolatielagen kan aangesloten worden. Plaats ook de regenwaterafvoer zodanig dat u nadien nog gevelisolatie kunt aanbrengen.

    Vensters
    17m2 venster heeft enkele beglazing en weinig perfomante profielen.
    Verwang schrijnwerk.
    €4000
    meer info
    Huidige situatie
    Aanbeveling
    Indicatie gemiddelde prijs Tooltip with hyperlink
    Laatst opgemaakt op 2018
    Daken
    121m2 dak is (vermoedelijk) niet geïsoleerd.
    Plaats isolatie.
    €4000 / €6000
    meer info minder info
    Hellend dak
    61m2 hellend dak is niet geïsoleerd.
    Plaats isolatie aan binnenzijde of plaats isolatie aan buitenzijde.
    €3000 / €12000
    Plat dak
    20m2 plat dak is niet geïsoleerd en 30m3 plat dak is vermoedelijk te weinig geïsoleerd.
    Plaats isolatie bovenop de bestaande dakconstructie(=warm dak)
    €3500
    Plafond
    10m2 plafond is niet geïsoleerd
    Plaats isolatie bovenop de zoldervloer.
    €600

    Premies voor uw dak

    6% BTW-Tarief bij renovatie en bij sloop/heropbouw
    Federale overheid     		6% BTW (ipv 21%) Meer info
    Renovatiepremie voor woningen
    Federale overheid     		€ 1200 Meer info
    Denk vooruit!
    Denk vooruit!

    Isoleert u eerst uw dak en dan uw gevels? Verleng dan nu al de dakoversteken zodat de buitengevelisolatie luchtdicht en zonder onderbreking van de isolatielagen kan aangesloten worden. Plaats ook de regenwaterafvoer zodanig dat u nadien nog gevelisolatie kunt aanbrengen.

    Vensters
    17m2 venster heeft enkele beglazing en weinig perfomante profielen.
    Verwang schrijnwerk.
    €4000
    meer info


    Custom table with divs and links

    This table makes use of divs because of the use of a tags in as rows. The tables make use of the a-row class to determine the width of every column. For example: a-row--1-12, a-row--2-12, a-row--3-12, ...

    Woningtype

    Locatie

    Huis
    Gent (9000), Visserij 17
    Huis
    Gent (9000), Visserij 17
    Huis
    Gent (9000), Visserij 17
    Huis
    Gent (9000), Visserij 17
    Huis
    Gent (9000), Visserij 17
    Huis
    Gent (9000), Visserij 17
    Huis
    Gent (9000), Visserij 17

    Woningtype

    Locatie

    Huis
    Gent (9000), Visserij 17
    Huis
    Gent (9000), Visserij 17
    Huis
    Gent (9000), Visserij 17
    Huis
    Gent (9000), Visserij 17
    Huis
    Gent (9000), Visserij 17
    Huis
    Gent (9000), Visserij 17
    Huis
    Gent (9000), Visserij 17


    Custom table with divs and checkboxes

    This table makes use of divs because of the use of a tags in as rows. The tables make use of the a-row class to determine the width of every column. For example: a-row--1-12, a-row--2-12, a-row--3-12, ...

    Bestandsnaam

    Opgemaakt door

    Datum ingediend

    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012
    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012
    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012
    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012
    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012
    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012
    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012

    Bestandsnaam

    Opgemaakt door

    Datum ingediend

    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012
    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012
    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012
    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012
    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012
    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012
    2_EPC-aangifte.pdf
    MVE bvba
    13/11/2012


    Order table

    TO DO: Add documentation

    Perceel Perceel adres Bedrag
    perceel
    Perceel 1251E
    		Rooigemlaan 205, 9000 Gent € 52
    perceel
    Perceel 1251E
    		Rooigemlaan 205, 9000 Gent € 52
    Total € 104
    Perceel Perceel adres Bedrag
    perceel
    Perceel 1251E
    		Rooigemlaan 205, 9000 Gent € 52
    perceel
    Perceel 1251E
    		Rooigemlaan 205, 9000 Gent € 52
    Total € 104

    Take Initiative

    /sass/styleguides/components/_take-initiative.scss

    Takes a data argument with two optional properties:
    - numInitiatives: the number of initiatives to mention in the copy and the badge
    - leftBorder: to add a light grey border around the left side of the split

    Neem samen met uw buurt een initiatief

    U komt in aanmerking voor 2 buurtinitiatieven 2

    Buurtinitiatieven zijn producten gevormd door energiehuizen en energiegemeenschappen, waar bewoners uit dezelfde buurt de mogelijkheid hebben om zich gezamenlijk in te zetten voor producten zoals energie-ingrijpende werkzaamheden. Door deze activiteiten gezamenlijk uit te voeren, wordt de kwaliteit verhoogd, bespaart men geld en wordt uiteindelijk ook energie geoptimaliseerd.

    Neem samen met uw buurt een initiatief

    U komt in aanmerking voor buurtinitiatieven

    Buurtinitiatieven zijn producten gevormd door energiehuizen en energiegemeenschappen, waar bewoners uit dezelfde buurt de mogelijkheid hebben om zich gezamenlijk in te zetten voor producten zoals energie-ingrijpende werkzaamheden. Door deze activiteiten gezamenlijk uit te voeren, wordt de kwaliteit verhoogd, bespaart men geld en wordt uiteindelijk ook energie geoptimaliseerd.

    Timeline

    /sass/base/molecules/_timeline.scss

    A timeline consists of different events, displayed in chronological order. Each event has a date and content. The content can be plain HTML or another component.


    1. 2016

      Content

    2. 2015

      Content

    3. 2013

      Content

    1. 2016

      Content

    2. 2015

      Content

    3. 2013

      Content

    Title background

    Title and subtitle with green background

    Vaste brandstof (hout, pellets, steenkool)

    Vaste brandstof (hout, pellets, steenkool)

    Toggle view

    /sass/base/atoms/_toggle-view.scss

    This toggle will let you change the view to a grid overview or a list view.

    toggle

    /sass/base/components/_toggle.scss

    Tooltip

    /sass/base/components/_tooltip.scss

    Top

    /sass/atoms/_top.scss

    Top atom which can be used on a pages that are longer then 4 screen lenghts.

    Top Bar

    /sass/base/organisms/_topbar.scss

    The topbar contains the logo, contact & login functions



    woningpas.be
    woningpas.be

    Topic status

    /sass/base/molecules/_topic-status.scss

    This component is mainly used as part of the dashboards in woningpas. There are 3 states that determine the icon and the color of the state: is-valid, is-invalid and is-average.

    It can contain the Outdated Symbol atom to indicate that the data shown might be outdated.


    Energie

    Vastgesteld in 2012

    Voldoende

    Meer

    Woningkwaliteit

    Vastgesteld in 2015

    Ernstige gebreken

    Meer

    Omdat sinds het laatste EPC-certificaat renovatiewerken zijn uitgevoerd, kan de informatie nu anders zijn.

    Meer info

    Isolatie

    Vastgesteld in 2013

    Matig

    Meer

    De woning is van bouwjaar 1947 met de laatste aanpassingen in 2012

    Meer

    Energie

    Vastgesteld in 2012

    Voldoende

    Meer

    Unavailable

    /sass/base/components/_unavailable.scss

    The unavailable components shows the state of something.

    Unavailable

    /sass/molecules/unavailable.scss
    house
    Ferdinand-Lousbergskaai 98 GENT
    Niet beschikbaar Tooltip message
    house
    Ferdinand-Lousbergskaai 98 GENT
    Niet beschikbaar Tooltip message

    Unit Overview

    /sass/base/components/_table.scss, /sass/styleguides/components/_instance-table.scss

    A table that shows the units in the building. Based on the instance-table component

    Gebouw

    Dorp-Zuid 26 9080 Lochristi

    4 eenheden

    Eenheid

    Dorp-Oost 26, bus 1 9080 Lochristi

    Eenheid

    Dorp-Oost 26, bus 2 9080 Lochristi

    Eenheid

    Dorp-Oost 26, bus 3 9080 Lochristi

    Eenheid

    Dorp-Oost 26, bus 4 9080 Lochristi
    Gebouw
    Dorp-Zuid 26 9080 Lochristi
    Gekoppelde eenheden
    Dorp-Oost 26, bus 1
    Dorp-Oost 26, bus 2
    Dorp-Oost 26, bus 3
    Dorp-Oost 26, bus 4

    Gebouw

    Dorp-Zuid 26 9080 Lochristi

    4 eenheden

    Eenheid

    Dorp-Oost 26, bus 1 9080 Lochristi

    Eenheid

    Dorp-Oost 26, bus 2 9080 Lochristi

    Eenheid

    Dorp-Oost 26, bus 3 9080 Lochristi

    Eenheid

    Dorp-Oost 26, bus 4 9080 Lochristi
    Gebouw
    Dorp-Zuid 26 9080 Lochristi
    Gekoppelde eenheden
    Dorp-Oost 26, bus 1
    Dorp-Oost 26, bus 2
    Dorp-Oost 26, bus 3
    Dorp-Oost 26, bus 4

    Unit select

    /sass/base/components/_unit-select.scss

    The unit select components let's you select Eenheden.

    Eenheden

    Eenheden

    Unit Selection Table

    /sass/base/components/_table.scss, /sass/styleguides/components/_instance-table.scss

    A table to select units in a building, based on the instance-table component.
    By default, the checkboxes should be checked.

    Adres
    Gemeente
    Uw eenheden
    Adres
    Gemeente
    Uw eenheden

    Update

    /sass/styleguides/components/_update.scss

    Update default


    Nieuw in Woningpas! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

    Nieuw in Woningpas! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

    usp



    Energie

    Validation

    /sass/molecules/validation.scss
    House

    Tooltip with hyperlink

    House

    Tooltip with hyperlink

    Card - Woningpas

    /sass/base/molecules/_w-card.scss

    Card default


    This is card content.
    This is card content.

    Card with separators


    This is card content.
    This is card content.
    This is card content.
    This is card content.

    Wizard

    /sass/organisms/_wizard.scss

    A component used to indicate different steps within one flow. It also highlights the active step and indicates how many steps are left within the flow.


    1. Geldigheidsduur

    2. Activatie

    3. Overzicht

    1. Geldigheidsduur

    2. Activatie

    3. Overzicht