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.
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.
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-arrow-down
.icon-arrow-left-big
.icon-arrow-left
.icon-arrow-right-big
.icon-arrow-right
.icon-arrow-up
.icon-calendar
.icon-check
.icon-close
.icon-download
.icon-enveloppe
.icon-exclamation
.icon-facebook
.icon-link
.icon-magnifying-glass
.icon-mail
.icon-min
.icon-money
.icon-pin
.icon-plus
.icon-telephone
.icon-twitter
Typography
/sass/base/_quarks/_typography.scss
Font stack
Omnes Pro
light
regular
medium
Source Sans Pro
regular
semi-bold
bold
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.
<h1> - Omnes (Regular) - 46px - line-height: 50px
Good design is good business
<h2> - Omnes (Regular) - 36px - line-height: 40px
Good design is always obvious, while great design is always transparent
<h3> - Omnes (Regular) - 24px - line-height: 29px
While everything is designed, only few things are designed to excell
<h4> - Omnes (Semi-bold) - 19px - line-height: 22px
CONTENT IS KING AND SHOULD ALWAYS PRECEDE DESIGN. DESIGN IN THE ABSENCE OF CONTENT IS NOT DESIGN, BUT DECORATION.
<h5> - Omnes (Semi-bold) - 17px - line-height: 22px
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.
<h6> - Omnes (Semi-bold) - 15px - line-height: 20px
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.
Heading 1
Heading 2
Heading 3
Heading 3
Heading 3
Heading 3
<p> - Source Sans Pro (regular) - 17px - line-height: 26px
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.
<p> - Source Sans Pro (Bold) - 17px - line-height: 26px
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.
<p> - Source Sans Pro (regular) - 15px - line-height: 19px
Great design will not sell an inferior product, but it will enable great products to achieve their maximum potential.
<p> - Source Sans Pro (regular) - 15px - line-height: 19px
Great design will not sell an inferior product, but it will enable great products to achieve their maximum potential.
<p> - Source Sans Pro (regular) - 15px - line-height: 19px
Great design will not sell an inferior product, but it will enable great products to achieve their maximum potential.
<p> - Source Sans Pro (regular) - 15px - line-height: 19px
Great design will not sell an inferior product, but it will enable great products to achieve their maximum potential.
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
This text is strongThis text is emphasizedThis text is quoted
This text is highlighted
This text is obsolete/deleted/updated
utils
Grid system
/sass/base/utils/helpers/_grid.scss
Columns
Basic grid classes for layout purposes, has no extra margins &
paddings applied to items and will work with anything (class based).
Optionally the grid system can be extended to include default margins which can be used
in general, multi-column page layouts. Add the .u-grid--with-margins
class to the wrapping container for this to work.
col-12
col-11
col-1
col-10
col-2
col-3 inside row
col-4 inside row
col-9
col-3
col-8
col-4
col-7
col-5
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
col-2
col-2
col-2
col-2
col-2
col-2
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
9
3 With more content with more content
2
2 With more content and long sentences with more content With more content with more content
2
2 With more content with more content
2
2
Extended with margins: <div class="u-grid u-grid--with-margins">
12
11
1
10
2
9
3
8
4
7
5
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
col-12
col-11
col-1
col-10
col-2
col-3 inside row
col-4 inside row
col-9
col-3
col-8
col-4
col-7
col-5
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
col-2
col-2
col-2
col-2
col-2
col-2
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
9
3 With more content with more content
2
2 With more content and long sentences with more content With more content with more content
2
2 With more content with more content
2
2
Extended with margins: <div class="u-grid u-grid--with-margins">
12
11
1
10
2
9
3
8
4
7
5
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
Spacing
/sass/base/utils/helpers/_spacing.scss
Several spacing classes are available. See code example below to see the available options.
u-no-...: 0;
...-sm: rem(10px)
no suffix: rem(20px)
...-lg: rem(30px)
atoms
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.
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).
/sass/atoms/form-elements/_toggle.scss
Switche states
Switche states - modifiers: a-toggle--error
This is an error, enable at least one switch.
Date Range Picker
/sass/atoms/form-elements/_daterangepicker.scss
Date picker
/sass/atoms/form-elements/_datepicker.scss
Using the Pikaday Datepicker plugin,
which is lightweight & has no dependencies. Styling of the plugin is embedded
in the generated CSS (simply add the javascript & confire as shown below).
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.
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.
input - modifiers: a-input--error
This is an error.
input - modifiers: a-input--warning
This is a warning.
input - modifiers: a-input--succes
This is successfull!
This is an error.
This is a warning.
This is successfull!
Images
/sass/base/atoms/general/_images.scss
Images get there standard properties, but the tag a-image can be used on the parent container as an alternative
As a modifier, a-image--standard-size can be used to keep the dimensions of the image on auto. This can be used in articles where the component m-article and its child m-article__image resize the image.
use a-image together with a-image--standard-size to keep dimensions
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.
Sed ut perspiciatis unde omnis
Sed ut perspiciatis unde omnis
Label for nested list items
Nested list items
Nested list items
Nested list items
Sed ut perspiciatis unde omnis
Sed ut perspiciatis unde omnis
Label for nested list items
Nested list items
Nested list items
Nested list items
Inline Lists
/sass/base/_lists.scss
inline list - class: a-inline-list
List item
List item
List item
List item
List item
List item
Block
/sass/base/atoms/_block.scss
This is a small block that gets used sometimes in the components available. This is a block that just contains a title and a variable given content.
When this block is shown on mobile and it has the modifier a-block--expandable an arrow is displayed showing if the content is visible or not.
To make this component interactive using the jQuery UI Accordion component (for Drupal reasons) you have to add the class js-expandable to the containing
element and the class js-expandable__header to the header component containing the title and arrow.
Normal block
This is the title
Block with expandable content when mobile - modifier: a-block--expandable
This is the title
Block with gradient - modifier: a-block--with-gradient
This is the title
Container
/sass/base/atoms/_container.scss
Main container - 1367px
This is a container of 1367px and will scale according to the view width, this is used to group the content of the site in.
This is a container of 1367px and will scale according to the view width, this is used to group the content of the site in.
Hamburger button
/sass/base/atoms/_hamburger-btn.scss
Limit Text
/sass/base/atoms/_limit-text.scss
This is a text limiter that uses shave.js. This works by giving it the class a-limit-text and a-limit-text--{height in px}.
The text that is cut is saved by the library and can then be shown again when the component is viewed on a mobile device.
The code you find in the example below the preview is partly generated by the library. The only thing that has to be written is the correct element tag with the classes a-limit-text a-limit-text--{height in px}.
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.
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.
Link
/sass/base/atoms/_link.scss
a-link
Dit is een link
a-link - modifiers: a-link--boldDit is een link
a-link - modifiers: a-link--white
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. nisi erat porttitor ligula, eget la nisi erat porttitor ligula, mollis euismod.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
article - modifiers: m-article__content--right
Lorem Ipsum
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
article - only text - no modifiers
Lorem Ipsum
Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
article - modifiers: m-article__content--right
Lorem Ipsum
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. nisi erat porttitor ligula, eget la nisi erat porttitor ligula, mollis euismod. eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
article - modifiers: m-article__content--left
Lorem Ipsum
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla.
article with video
Lorem Ipsum
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla.
article with as is images, without adjusting width or height m-article__content--as-is
Lorem Ipsum
Lorem Ipsum
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. nisi erat porttitor ligula, eget la nisi erat porttitor ligula, mollis euismod.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
Lorem Ipsum
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem Ipsum
Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem Ipsum
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. nisi erat porttitor ligula, eget la nisi erat porttitor ligula, mollis euismod. eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
Lorem Ipsum
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla.
Breadcrumbs
/sass/base/molecules/_breadcrumb.scss
Breadcrumbs - without photo
This component is used to group input elements together, it is mainly used in o-form organism.
Normal input groups
Input groups with container - modifiers: m-input-group--with-container
This is a subtitle within a form
This is a subtitle within a form
Main CTA
/sass/base/molecules/_breadcrumb.scss
This component uses the a-block component for its container and title. To create the green background use a-block--with-gradient.
Standard every main-cta has a dark theme, so in order to get the light version use m-main-cta--light.
Main CTA light with limiter on text - modifiers: m-main-cta--light, m-main-cta--large
Organiseer je een feest of evenement? Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum lorem ipsum dolor amet sin
Goed nieuws, want hiervoor kan je een of meerdere zalen in De Groene Meersen afhuren! Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor amet sin.
/sass/base/molecules/_map-popup.scss
Map Popup for google maps InfoWindow
Domein Ter Loo
Loppemstraat 14a
8210 Zedelgem
Custom Map Popup for google maps Popup - modifiers: m-map-popup--custom
Domein Ter Loo
Loppemstraat 14a
8210 Zedelgem
Domein Ter Loo
Loppemstraat 14a
8210 Zedelgem
Menu contact info
/sass/base/molecules/_menu-info.scss
This component is the same as the expandable component but the content is different, containig contact info. This component uses m-menu-info--contact modifier.
Groene Meersen
Snellegemstraat 1, 2810 Zedelgem
050 28 83 30
info@zedelgem.be
Openingsuren
Ma
Gesloten
Di
8.15 - 9.15
Woe
14.30 - 20:00 u
Do
9:30 - 10.30 u, 11.45 - 13.00 u & 17.30 - 19.00 u
Vrij
17.30 - 21.00 u
Za
9.30 - 10.30 u & 14.30 - 17.00 u
Zo
9.00 - 12.00 u
Sluitingsdagen:
ma 17/04/2017
ma 01/05/2017
do 25/05/2017
vrij 26/05/2017
ma 05/06/2017
di 11/07/2017
vrij 21/07/2017
ma 14/08/2017
di 15/08/2017
woe 01/11/2017
ma 25/12/2017
di 26/12/2017
woe 27/12/2017
do 28/12/2017
Groene Meersen
Snellegemstraat 1, 2810 Zedelgem
050 28 83 30
info@zedelgem.be
Openingsuren
Ma
Gesloten
Di
8.15 - 9.15
Woe
14.30 - 20:00 u
Do
9:30 - 10.30 u, 11.45 - 13.00 u & 17.30 - 19.00 u
Vrij
17.30 - 21.00 u
Za
9.30 - 10.30 u & 14.30 - 17.00 u
Zo
9.00 - 12.00 u
Sluitingsdagen:
ma 17/04/2017
ma 01/05/2017
do 25/05/2017
vrij 26/05/2017
ma 05/06/2017
di 11/07/2017
vrij 21/07/2017
ma 14/08/2017
di 15/08/2017
woe 01/11/2017
ma 25/12/2017
di 26/12/2017
woe 27/12/2017
do 28/12/2017
Menu info
/sass/base/molecules/_menu-info.scss
This component is used in combination with o-toggle-menu. This is one of the child elements. The parent uses jquery UI - Accordion to create the expandable effect. This is used because it is easier to implement in Drupal.
Procedure
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Ook als de geldigheidsperiode van uw eID verloopt, ontvangt u automatisch een oproepingskaart, om een nieuwe eID aan te vragen. In een aantal gevallen kunt u ook op eigen initiatief een eID aanvragen bij uw gemeente:
als uw eID verloren, gestolen of beschadigd is
als uw pasfoto niet meer gelijkend is
als u van naam of geslacht verandert
bij een inschrijving na verblijf in het buitenland of ambtelijke schrapping
ls u een kaart aanvraagt in een andere landstaal.
U gaat vervolgens met uw oproepingskaart, een recente pasfoto en uw huidige identiteitskaart naar uw gemeente. 3 tot 4 weken later, krijgt u per brief bericht dat uw eID klaar ligt.
Om de 'elektronische handtekening' te kunnen gebruiken, ontvangt u in de brief ook een pincode en een pukcode. Neem deze brief met de codes mee naar het gemeentehuis als u uw eID afhaalt. Uw pincode kunt bij de afhaling nog wijzigen als u dat wenst (minimum 4, maximum 12 cijfers).
Let op. Als Belg bent u altijd verantwoordelijk om uw eigen identiteitsdocumenten te beheren. Hou daarom zelf de vervaldatum in het oog. Het is altijd mogelijk dat uw oproepingskaart voor een nieuwe eID verloren is gegaan. Hebt u 3 weken voor de vervaldatum van uw eID nog geen oproepingskaart ontvangen? Vraag dan onmiddellijk zelf bij uw gemeente een nieuwe eID aan. De tarieven voor een eID verschillen van gemeente tot gemeente.
In dringende gevallen kunt u een spoedprocedure aanvragen met levering binnen 1 of 2 dagen. Let op: hiervoor betaalt u wel een hogere kostprijs. Neem voor meer info contact op met uw gemeente.
Procedure
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Ook als de geldigheidsperiode van uw eID verloopt, ontvangt u automatisch een oproepingskaart, om een nieuwe eID aan te vragen. In een aantal gevallen kunt u ook op eigen initiatief een eID aanvragen bij uw gemeente:
als uw eID verloren, gestolen of beschadigd is
als uw pasfoto niet meer gelijkend is
als u van naam of geslacht verandert
bij een inschrijving na verblijf in het buitenland of ambtelijke schrapping
ls u een kaart aanvraagt in een andere landstaal.
U gaat vervolgens met uw oproepingskaart, een recente pasfoto en uw huidige identiteitskaart naar uw gemeente. 3 tot 4 weken later, krijgt u per brief bericht dat uw eID klaar ligt.
Om de 'elektronische handtekening' te kunnen gebruiken, ontvangt u in de brief ook een pincode en een pukcode. Neem deze brief met de codes mee naar het gemeentehuis als u uw eID afhaalt. Uw pincode kunt bij de afhaling nog wijzigen als u dat wenst (minimum 4, maximum 12 cijfers).
Let op. Als Belg bent u altijd verantwoordelijk om uw eigen identiteitsdocumenten te beheren. Hou daarom zelf de vervaldatum in het oog. Het is altijd mogelijk dat uw oproepingskaart voor een nieuwe eID verloren is gegaan. Hebt u 3 weken voor de vervaldatum van uw eID nog geen oproepingskaart ontvangen? Vraag dan onmiddellijk zelf bij uw gemeente een nieuwe eID aan. De tarieven voor een eID verschillen van gemeente tot gemeente.
In dringende gevallen kunt u een spoedprocedure aanvragen met levering binnen 1 of 2 dagen. Let op: hiervoor betaalt u wel een hogere kostprijs. Neem voor meer info contact op met uw gemeente.
Navigation
/sass/base/molecules/_nav.scss
Use modifier m-nav__item--active on primary navigation "li-item" when page is active to show the active state of the navigational element.
Main navigation
Main navigation large - modifiers: m-nav--large
Main navigation large - modifiers: m-nav--white
Main navigation large - modifiers: m-nav--large & m-nav--column
Secondary navigation - modifiers: m-nav--secondary
Secondary navigation large - modifiers: m-nav--secondary & m-nav--secondary-large
Secondary navigation large - modifiers: m-nav--secondary & m-nav--secondary-large & m-nav--column
/sass/base/molecules/_options-group.scss
Group with checkbox
Group with radiobuttons
Group with expandable radiobuttons
Group with expandable checkboxes
Facturatie gegevens
Facturatie gegevens
Overlay options
/sass/base/molecules/_overlay-options.scss
This component is only used on the home page mobile version. This can be replaced by a select element, but because of Drupal reasons this is made custom.
This component uses the overlay defined in the element. Once the button is clicked, the element is copied in the body tag, just after the footer.
This is done so that translations can be inserted in the element. If the overlay is closed, the overlay is deleted from the body and placed back in its original spot.
Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget wonen risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget wonen risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget wonen risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget wonen risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget wonen risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget wonen risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
/sass/base/molecules/_show-more.scss
Normal component with one expand
Lorem Ipsum
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. nisi erat porttitor ligula, eget la nisi erat porttitor ligula, mollis euismod.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
Cultuur
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
Jeugd
Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Component with multiple expands, use m-show-more__step class
Lorem Ipsum
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. nisi erat porttitor ligula, eget la nisi erat porttitor ligula, mollis euismod.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
Cultuur
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
Jeugd
Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. nisi erat porttitor ligula, eget la nisi erat porttitor ligula, mollis euismod.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
Cultuur
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
Jeugd
Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. nisi erat porttitor ligula, eget la nisi erat porttitor ligula, mollis euismod.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.
Cultuur
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.
Jeugd
Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This is the basic structure of the forms starting with the o-form class. The children are o-form__header, multiple o-form__fieldset and o-form__submit.
Every o-form__fieldset can have a legend.
The o-form__submit can have feedback. Use the modifier o-form--with-feedback for the correct styling and put the feedback and the submit button in a div-container o-form__submit__container.
This component is expandable and makes use of the jQuery UI Accordion component (for Drupal reasons). It is created using the molecule m-menu-info.
On the containig element the class js-expandable is added to make use of the javaScript giving the component the correct behaviour.
On every single header element in this component the class js-expandable__header must be placed to create the correct collapsable behaviour.
Beschrijving
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Voorwaarden
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Procedure
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Ook als de geldigheidsperiode van uw eID verloopt, ontvangt u automatisch een oproepingskaart, om een nieuwe eID aan te vragen. In een aantal gevallen kunt u ook op eigen initiatief een eID aanvragen bij uw gemeente:
als uw eID verloren, gestolen of beschadigd is
als uw pasfoto niet meer gelijkend is
als u van naam of geslacht verandert
bij een inschrijving na verblijf in het buitenland of ambtelijke schrapping
ls u een kaart aanvraagt in een andere landstaal.
U gaat vervolgens met uw oproepingskaart, een recente pasfoto en uw huidige identiteitskaart naar uw gemeente. 3 tot 4 weken later, krijgt u per brief bericht dat uw eID klaar ligt.
Om de 'elektronische handtekening' te kunnen gebruiken, ontvangt u in de brief ook een pincode en een pukcode. Neem deze brief met de codes mee naar het gemeentehuis als u uw eID afhaalt. Uw pincode kunt bij de afhaling nog wijzigen als u dat wenst (minimum 4, maximum 12 cijfers).
Let op. Als Belg bent u altijd verantwoordelijk om uw eigen identiteitsdocumenten te beheren. Hou daarom zelf de vervaldatum in het oog. Het is altijd mogelijk dat uw oproepingskaart voor een nieuwe eID verloren is gegaan. Hebt u 3 weken voor de vervaldatum van uw eID nog geen oproepingskaart ontvangen? Vraag dan onmiddellijk zelf bij uw gemeente een nieuwe eID aan. De tarieven voor een eID verschillen van gemeente tot gemeente.
In dringende gevallen kunt u een spoedprocedure aanvragen met levering binnen 1 of 2 dagen. Let op: hiervoor betaalt u wel een hogere kostprijs. Neem voor meer info contact op met uw gemeente.
Wat meebrengen
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Bedrag
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Uitzondering
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Regelgeving
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Contact
Snellegemstraat 1, 2810 Zedelgem
050 28 83 30
info@zedelgem.be
Openingsuren
Ma
Gesloten
Di
8.15 - 9.15
Woe
14.30 - 20:00 u
Do
9:30 - 10.30 u, 11.45 - 13.00 u & 17.30 - 19.00 u
Vrij
17.30 - 21.00 u
Za
9.30 - 10.30 u & 14.30 - 17.00 u
Zo
9.00 - 12.00 u
Sluitingsdagen:
ma 17/04/2017
ma 01/05/2017
do 25/05/2017
vrij 26/05/2017
ma 05/06/2017
di 11/07/2017
vrij 21/07/2017
ma 14/08/2017
di 15/08/2017
woe 01/11/2017
ma 25/12/2017
di 26/12/2017
woe 27/12/2017
do 28/12/2017
Beschrijving
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Voorwaarden
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Procedure
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Ook als de geldigheidsperiode van uw eID verloopt, ontvangt u automatisch een oproepingskaart, om een nieuwe eID aan te vragen. In een aantal gevallen kunt u ook op eigen initiatief een eID aanvragen bij uw gemeente:
als uw eID verloren, gestolen of beschadigd is
als uw pasfoto niet meer gelijkend is
als u van naam of geslacht verandert
bij een inschrijving na verblijf in het buitenland of ambtelijke schrapping
ls u een kaart aanvraagt in een andere landstaal.
U gaat vervolgens met uw oproepingskaart, een recente pasfoto en uw huidige identiteitskaart naar uw gemeente. 3 tot 4 weken later, krijgt u per brief bericht dat uw eID klaar ligt.
Om de 'elektronische handtekening' te kunnen gebruiken, ontvangt u in de brief ook een pincode en een pukcode. Neem deze brief met de codes mee naar het gemeentehuis als u uw eID afhaalt. Uw pincode kunt bij de afhaling nog wijzigen als u dat wenst (minimum 4, maximum 12 cijfers).
Let op. Als Belg bent u altijd verantwoordelijk om uw eigen identiteitsdocumenten te beheren. Hou daarom zelf de vervaldatum in het oog. Het is altijd mogelijk dat uw oproepingskaart voor een nieuwe eID verloren is gegaan. Hebt u 3 weken voor de vervaldatum van uw eID nog geen oproepingskaart ontvangen? Vraag dan onmiddellijk zelf bij uw gemeente een nieuwe eID aan. De tarieven voor een eID verschillen van gemeente tot gemeente.
In dringende gevallen kunt u een spoedprocedure aanvragen met levering binnen 1 of 2 dagen. Let op: hiervoor betaalt u wel een hogere kostprijs. Neem voor meer info contact op met uw gemeente.
Wat meebrengen
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Bedrag
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Uitzondering
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
Regelgeving
Vanaf de leeftijd van 12 jaar ontvangt u, van de gemeente waar u woont, automatisch een oproepingskaart om uw eID bij de Dienst burgerzaken van uw gemeente aan te vragen.
