Global styles

Base layout 
/**
 * Imports
 */
@import 'utility/functions';
@import 'utility/mixins';
@import 'utility/font-imports';
@import 'utility/variables';
@import 'utility/font-mixins';
@import 'utility/form-mixins';


/**
 * Bootstrap imports
 */
// Required
@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/mixins';

// Optional
@import '../../node_modules/bootstrap/scss/grid';

// Add modules like this:
// @import '../../node_modules/bootstrap/scss/tooltip';


/**
 * Primer
 */
html {
    box-sizing: border-box; font-size: 62.5%; line-height: 1.6;
    scroll-behavior: smooth;
}
.page-has-expanded-nav,
.page-has-expanded-nav body {
    height: 100%; max-height: 100%; overflow: hidden;
    overflow: hidden; height: 100%; max-height: 100%;
    overscroll-behavior: contain;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}
html,
body {
    width: 100%; min-height: 100%; overflow-x: hidden;
}
body {
    @include font-smoothing; @include body-font;
    margin: 0; padding: 0;
    background-color: $body-bg-color; color: $text-color;
    font-size: $font-size-small; line-height: 1.75;
    @include bp-min($medium) {
        font-size: $font-size-medium;
    }
    @include bp-min($large) {
        font-size: $font-size-large; line-height: 1.6;
    }
}
body.template--chat {
    overflow: hidden; height: 100%;
    background-color: $nude;
}
main {
    min-height: 100%;
}
p {
    margin: 0 0 1.5em;
}
a {
    color: inherit;
    text-underline-position: under;
}
figure {
    margin: 0; padding: 0;
}
figure > img {
    display: block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    @include heading-font;
    margin: 0 0 $gutter-small;
    line-height: 1.1;
}
h1 {
    margin: 0 0 $gutter-small;
    font-size: 38px;
    @include bp-min($medium-large) {
        font-size: 55px;
    }
}
h2 {
    font-size: 32px;
    @include bp-min($medium-large) {
        font-size: 40px;
    }
}
h3 {
    margin: 0 0 $gutter-tiny;
    font-size: 22px;
    @include bp-min($medium-large) {
        font-size: 28px;
    }
}
h4 {
    font-size: 1.2em;
    margin: 0 0 $gutter-tiny;
}
h5 {
    font-size: 1em;
}
h6 {
    font-size: .85em;
}
h5,
h6 {
    @include body-font-bold;
}

// Lists
ul,
ol {
    margin: 0; padding: 0 0 .5em 1.05em;
}
li {
    margin-bottom: 1em;
}
ul:last-child li:last-child,
ol:last-child li:last-child {
    margin-bottom: 0;
}

// Helpers
.sr-only {
    @include hide-text;
}

/**
 * Module imports
 */
@import 'layout/**/*';
@import 'modules/**/*';
Sass variables 
/**
 * Colors
 */
$white: #FFFFFF;
$black: #000000;
$blackish: #363636;
$grey-lighter: #F5F5F7;
$grey-light: #DDDDDD;
$grey: #9E9E9D;
$grey-medium: #595959;
$blue-light: #E1ECFA;
$blue-medium: #8CBDFA;
$blue: #1E38FA;
$blue-dark: #091047;
$nude: #FAF0EA;
$yellow-light: #FFE9BF;
$yellow: #FFBC41;
$yellow-dark: #FFB401;
$red: #D0021B;

/**
 * Color usage
 */
$primary-color: $yellow;
$secondary-color: $white;
$tertiary-color: $blue;
$text-color: $blue-dark;
$body-bg-color: $white;
$error-color: $red;

/**
 * Fonts
 */
$system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
$custom-font: "Ronnia BoldItalic", Arial, Helvetica, sans-serif;

$heading-font: $custom-font;
$ui-font: $system-font;
$body-font: $system-font;

$font-size-tiny: 14px;
$font-size-small: 16px;
$font-size-medium: 18px;
$font-size-large: 20px;

/**
 * Magic numbers
 */
$gutter-tiny: 4px;
$gutter-small: 10px;
$gutter-medium: 20px;
$gutter-large: 30px;
$gutter-huge: 50px;

$border-radius-small: 2px;
$border-radius: 4px;
$border-radius-large: 8px;

$box-shadow: 0 4px 22px rgba($black, .15);
$tap-size: 44px;

$radio-size: 18px;
$radio-checked-size: 10px;
$checkbox-size: 18px;

$logo-small-width: 115px;
$logo-small-height: 30px;
$logo-medium-width: 130px;
$logo-medium-height: 32px;
$logo-large-width: 160px;
$logo-large-height: 40px;

$avatar-size-small: 24px;
$avatar-size-medium: 70px;
$avatar-size-large: 100px;
$avatar-size-huge: 140px;

$loading-circle-size: 14px;

$collapsed-module-width: 400px;

$chat-component-size: 500px;
$chat-amount-button-size: 64px;
$chat-entry-box-height: 70px;
$chat-entry-box-button-size: 30px;
$chat-entry-box-expand-size: 10px;
$chat-reaction-size: 50px;

$testimonial-min-width: 300px;
$testimonial-amount: 3;

$table-cell-padding-small: $gutter-small $gutter-medium;
$table-cell-padding-medium: $gutter-medium;

$button-themes: (
    primary: (
        background-color: $blue,
        color: $white,
    ),
    secondary: (
        background-color: $blue-light,
        color: $text-color,
    ),
    tertiary: (
        background-color: $white,
        color: $blue,
    ),

);
$button-active-themes: (
    primary: (
        background-color: $blue-light,
        color: $text-color,
    ),
    secondary: (
        background-color: $blue,
        color: $white,
    ),
    tertiary: (
        background-color: $blue,
        color: $white,
    )
);

/**
 * Form inputs
 */
$input-border: $grey-light;
$input-border-focus: $blue-medium;
$input-border-error: $red;

/**
 * Breakpoints
 * @see: https://medium.com/re-write/designing-a-responsive-grid-in-2016-58e4db6db786
 */
$tiny: 320;
$small: 540;
$medium: 680;
$medium-large: 900;
$large: 1200;
$extra-large: 1400;
$huge: 1700;

$nav-switch: 755;
$chat-module-switch: 900;


/**
 * Widths & Sizes
 */
$site-width-small: 700;
$site-width-medium: 900px;
$site-width-large: 1160px;
$site-width-huge: 1200px;

$site-widths: (
    small: $site-width-small,
    medium: $site-width-medium,
    large: $site-width-large,
);

$row-margins: (
    small: 1.5vw,
    medium: 3vw,
    large: 4.5vw,
);


/**
 * Bootstrap overrides
 */
$grid-gutter-width: $gutter-large;
$container-max-widths: (
  sm: $site-width-small,
  md: $site-width-medium,
  lg: $site-width-large,
  xl: $site-width-huge
);
Sass functions 
/* ==========================================================================
   functions
   ========================================================================== */

/**
 * For converting pixels to ems
 * Based on a 10px font-size on the html
 * Usage:
 * div { width: px-to-em(300); }
 * Returns:
 * div { width: 30em; }
 */
@function px-to-em($pixels) {
    @return ($pixels / 16) + 0em;
}
Sass mixins 
/**
 * Font smoothing
 */
@mixin font-smoothing($enabled: true) {
    @if $enabled {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    } @else {
        -webkit-font-smoothing: initial;
        -moz-osx-font-smoothing: initial;
    }
}

/**
 * Smooth scrolling
 */
@mixin smooth-scrolling {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/**
 * Placeholder styling
 */
@mixin placeholder {
    &:placeholder {
        @content;
    }
    &::placeholder {
        @content;
    }
    &::-webkit-input-placeholder {
        @content;
    }
    &:-moz-placeholder {
        @content;
    }
    &::-moz-placeholder {
        @content;
    }
    &:-ms-input-placeholder {
        @content;
    }
}

/**
 * Clearfix
 * Actually an @extend, but we don't want to depend on inclusion order
 *
 * Usage:
 * section { @include clearfix(); }
 */
@mixin clearfix {
    &::after {
        display: table; clear: both; content: '';
    }
}

/*
 * Bare button
 *
 * Get rid of button-style
 */
@mixin bare-button {
    margin: 0; padding: 0;
    background: none; border: none;
    font-family: inherit; font-size: inherit; font-weight: inherit;
    text-align: inherit;
}

/*
 * Bare list
 *
 * Get rid of list-style and padding
 */
@mixin bare-list {
    margin: 0; padding: 0; list-style-type: none;
}

/*
 * Bare fieldset
 *
 * Get rid of fieldset
 */
@mixin bare-fieldset {
    margin: 0; padding: 0; border: 0;
}

/**
 * For image replacement
 */
@mixin hide-text {
    overflow: hidden;
    display: block; height: 0; width: 0;
    background-color: transparent; color: transparent;
    font-family: a; font-size: 0; line-height: 0; text-shadow: none;
    border: 0 none;
}

/**
 * Media query breakpoints mixins
 *
 * Usage:
 * div { width: 60px;
 *    @include bp-min($small) { width: 80px; }
 * }
 */
@mixin bp-min($point: 0) {
    @media (min-width: px-to-em($point)) {
        @content;
    }
}
@mixin bp-max($point: 0) {
    @media (max-width: (px-to-em($point) - 0.0625em)) {
        @content;
    }
}
@mixin bp-min-max($min-point: 0, $max-point: 0) {
    @media (min-width: px-to-em($min-point)) and (max-width: (px-to-em($max-point) - 0.0625em)) {
        @content;
    }
}
@mixin body-font {
    font-family: $body-font; font-weight: normal;
}
@mixin body-font-bold {
    font-family: $body-font; font-weight: bold;
}
@mixin heading-font {
    font-family: $heading-font; font-weight: normal;
}
@mixin ui-font {
    font-family: $ui-font;
}
Font styling 
@font-face {
    font-family: 'Ronnia BoldItalic';
    src: url('/../fonts/ronnia-bolditalic.eot') format('eot'),
         url('/../fonts/ronnia-bolditalic.svg') format('svg'),
         url('/../fonts/ronnia-bolditalic.woff') format('woff'),
         url('/../fonts/ronnia-bolditalic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@mixin body-font {
    font-family: $body-font; font-weight: normal;
}
@mixin body-font-bold {
    font-family: $body-font; font-weight: bold;
}
@mixin heading-font {
    font-family: $heading-font; font-weight: normal;
}
@mixin ui-font {
    font-family: $ui-font;
}

Avatar

The avatar is used within chat bubbles, the chat header and cards

type kanbot,
photo
class whatever you need
size small (24x24 pixels),
medium (70x70 pixels),
large (84x84 pixels)
color yellow,
yellow-light
modifiers shadow

Source code

Markup 
{% macro avatar(
    size="medium",
    type="",
    backgroundColor="",
    image="",
    imageAlt="",
    class="",
    modifier=""
) %}

<figure class="avatar avatar--{{ size }} {{ class }} avatar--{{ type }} avatar--{{ backgroundColor }} {{ modifier }}">
    {% if type == 'kanbot' %}
        {% include './../../images/kanbot.svg' %}
    {% else %}
    <img src="/images/{{ image }}" alt="{{ imageAlt }}">
    {% endif %}
</figure>
{% endmacro %}

<p><small>This is a macro and its example will be included in "<a href="#avatar-group">Avatar group</a>".</small></p>
Styles 
@mixin avatar($size: small) {
    overflow: hidden;
    position: relative;
    display: flex; justify-content: center; align-items: center;
    text-align: center; // Old browsers
    width: $avatar-size-small; height: $avatar-size-small;
    margin: 0; padding: 0;
    background-color: $white;
    box-shadow: 0 4px 5px rgba($black, .15); border-radius: 5%;

    @if $size == 'medium' {
        width: $avatar-size-small * 2; height: $avatar-size-small * 2;
        @include bp-min($large) {
            width: $avatar-size-medium; height: $avatar-size-medium;
        }
    }
    @if $size == 'large' {
        width: $avatar-size-medium; height: $avatar-size-medium;
        @include bp-min($large) {
            width: $avatar-size-large; height: $avatar-size-large;
        }
    }
    @if $size == 'huge' {
        width: $avatar-size-large; height: $avatar-size-large;
        @include bp-min($large) {
            width: $avatar-size-huge; height: $avatar-size-huge;
        }
    }
}

// Sizing
.avatar--small {
    @include avatar(small);
}
.avatar--medium {
    @include avatar(medium);
}
.avatar--large {
    @include avatar(large);
    z-index: 20;
}
.avatar--huge {
    @include avatar(huge);
    z-index: 50;
}
.avatar--huge + .avatar--large {
    z-index: 30;
}
.avatar--kanbot > svg {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
}
.avatar--is-circle {
    border-radius: 50%;
}
.avatar--has-border {
    border: 3px solid $white;
    @include bp-min($large) {
        border-width: 4px;
    }
}

/**
 * Use cropped images for the photo avatars
 * Use following sizes: 24 x 24px, 70 x 70px or 84 x 84px
 */
.avatar--photo > img {
    width: 100%; height: 100%;
}

Example(s)

This is a macro and its example will be included in "Avatar group".

Avatar Group

A set of three avatars

Source code

Markup 
{% import "./avatar.njk" as avatar %}

<div class="avatar-group">
    {{ avatar.avatar
        (
        size='medium',
        type="photo",
        image="avatar--70x70.jpg",
        class="avatar-group__avatar",
        modifier="avatar--is-circle avatar--has-border"
        )
    }}
    {{ avatar.avatar
        (
        size='large',
        type="photo",
        image="avatar--84x84.jpg",
        class="avatar-group__avatar",
        modifier="avatar--is-circle avatar--has-border"
        )
    }}
    {{ avatar.avatar
        (
        size='medium',
        type="photo",
        image="avatar--70x70.jpg",
        class="avatar-group__avatar",
        modifier="avatar--is-circle avatar--has-border"
        )
    }}
</div>
Styles 
.avatar-group {
    display: flex; justify-content: center; align-items: center;
    margin-bottom: $gutter-medium;
}
.avatar-group__avatar {
    display: inline-block; vertical-align: middle;
}
.avatar-group__avatar:nth-child(2n) {
    margin: 0 (-$gutter-medium);
    @include bp-min($large) {
        margin-left: -$gutter-large; margin-right: -$gutter-large;
    }
}

Example(s)

Button

Button types

type primary,
secondary,
disabled

Source code

Markup 
<button class="button button--primary">Primary button</button>
<button class="button button--secondary">Secondary button</button>
<button class="button button--tertiary">Tertiary button</button>
<button class="button button--secondary" disabled>Disabled button</button>

<a href="/" class="button button--primary">Primary button</a>
<a href="/" class="button button--secondary">Secondary button</a>
<a href="/" class="button button--tertiary">Tertiary button</a>
<a href="/" class="button button--secondary" disabled>Disabled button</a>
Styles 
@mixin button {
    @include ui-font;
    display: inline-block;
    margin-top: $gutter-medium; padding: 14px 40px 14px 25px;
    background-color: $blue;
    background-image: url('/images/icons/chevron--right--white.svg');
    background-repeat: no-repeat; background-position: right 25px top 50%;
    color: $white; // Fallback theme
    font-size: $font-size-small; font-weight: 500;
    line-height: 1; text-decoration: none;
    border: 0; border-radius: 44px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s;
    &:hover,
    &:focus {
        background-color: $blue-light; color: $text-color; // Fallback theme
        background-image: url('/images/icons/chevron--right.svg');
    }
    @each $name, $color in $button-themes {
        $background-color: map-get($color, background-color);
        $color: map-get($color, color);
        &.button--#{$name} {
            background-color: $background-color; color: $color;
        }
    }
    @each $name, $color in $button-active-themes {
        $background-color: map-get($color, background-color);
        $color: map-get($color, color);
        &.button--#{$name}:hover,
        &.button--#{$name}:focus {
            background-color: $background-color; color: $color;
        }
    }
}
.button {
    @include button;
}
.button[disabled],
.button[disabled]:hover {
    background-color: $grey-light; color: $text-color;
    background-image: url('/images/icons/chevron--right.svg');
    cursor: not-allowed;
}
.button--secondary {
    background-image: url('/images/icons/chevron--right.svg');
}
.button--secondary:hover,
.button--secondary:focus {
    background-image: url('/images/icons/chevron--right--white.svg');
}

.button--tertiary {
    background-image: url('/images/icons/chevron--right--blue.svg');
    box-shadow: inset 0 0 0 1px currentColor;
}
.button--tertiary:hover,
.button--tertiary:focus {
    background-image: url('/images/icons/chevron--right--white.svg');
    box-shadow: inset 0 0 0 1px $tertiary-color;
}

Example(s)

Primary button Secondary button Tertiary button Disabled button

Chat Module

Chat Module as seen on homepage

modifiers chat-module--is-collapsed

Source code

Markup 
{% import "./avatar.njk" as avatar %}

<section class="chat-module js-chat-module  chat-module--is-collapsed ">
    {% include "./chat-header.njk"  %}
    <div class="chat-module__content">

        <!-- Static example convo -->
        <div class="chat-conversation">
            <ol class="chat-conversation__items">
                <li class="chat-conversation__item chat-conversation__item--left">
                    <div class="chat-conversation__bubble">
                        <p>Hallo, ik ben de Kanbot. Kandoor heeft me gecreëerd om zoveel mogelijk mensen tegelijk te kunnen helpen met financiële vragen.</p>
                        {{ avatar.avatar(size='small', type="kanbot", class="chat-conversation__avatar", backgroundColor="yellow") }}
                    </div>
                </li>
            </ol>
        </div>
        <!-- End static example convo -->

    </div>
    <div class="chat-module__footer">
        <a href="/chat/" class="button button--primary">Start gesprek</a>
    </div>
</section>
Styles 
@mixin chat-compact-state {
    height: auto;
    .chat-module__content {
        max-height: 0; padding: 0; overflow: hidden;
        background-color: $blue-dark;
        transition: all .2s;
    }
    .chat-header {
        padding: $gutter-medium;
    }
    .chat-module__footer {
        padding: 0 $gutter-medium $gutter-medium;
        background-color: $blue-dark;
    }
}

@mixin chat-collapsed-state {
    @include chat-compact-state;
    position: fixed; bottom: $gutter-medium; left: 50%;
    transform: translateX(-50%);
    @include bp-min($chat-module-switch) {
        left: auto; right: $gutter-medium;
        transform: none;
    }
}

.chat-module {
    position: relative; overflow: hidden; z-index: 10;
    display: flex; flex-direction: column; justify-content: flex-start;
    width: calc(100% - #{$gutter-medium} - #{$gutter-medium}); max-width: $collapsed-module-width; height: 450px;
    margin: -20% auto 0;
    border-radius: 4px; box-shadow: 0 6px 45px rgba($black, .2);
    background: $white;
    @include bp-max($medium) {
        @include chat-compact-state;
    }
    @include bp-min($medium-large) {
        margin: 0;
        position: absolute; left: auto; bottom: $gutter-huge; right: 100px; transform: none;
    }
}
// Exception for styleguide viewing only
.styleguide .chat-module {
     @include bp-min($medium-large) {
        position: relative; left: auto; bottom: auto; right: auto;
    }
}
.chat-module--is-collapsed {
    @include chat-collapsed-state;
}
.chat-module__content {
    width: 100%;
    padding: $gutter-medium;
}
.chat-module__footer {
    padding: $gutter-medium;
    margin-top: auto;
    background: $white;
    text-align: center;
}
.chat-module__footer .button {
    margin: 0;
}

Example(s)

Welkom, ik ben Kanbot

Uw virtuele assistent

  1. Hallo, ik ben de Kanbot. Kandoor heeft me gecreëerd om zoveel mogelijk mensen tegelijk te kunnen helpen met financiële vragen.

Start gesprek

Chat — Amount Chooser

Amount chooser, showing different states.
The width of this component will be determined by the parent

Source code

Markup 
{# Optional 'No JavaScript'-version, replace ".amount-chooser__input" when JS is available #}
<form class="chat-amount-chooser">
    <fieldset>
        <legend>Kies het aantal personen</legend>
        <div class="chat-amount-chooser__inner">
            <input class="chat-amount-chooser__input" type="number" step="1" value="1">
        </div>
        <button class="button button--primary" type="submit">Bevestig</button>
    </fieldset>
</form>

{# Amount chooser with disabled button #}
 <form class="chat-amount-chooser">
    <fieldset>
        <legend>Kies het aantal personen</legend>
        <div class="chat-amount-chooser__inner">
            <button class="chat-amount-chooser__button chat-amount-chooser__button--less" type="button" disabled>
                <span class="chat-amount-chooser__button-text">
                    Verwijder
                </span>
            </button>

            <span class="chat-amount-chooser__amount">1</span>
            <button class="chat-amount-chooser__button chat-amount-chooser__button--more" type="button">
                <span class="chat-amount-chooser__button-text">
                    Voeg toe
                </span>
            </button>
        </div>
        <button class="button button--primary" type="submit">Bevestig</button>
    </fieldset>
</form>

{# Amount chooser with small amount #}
<form class="chat-amount-chooser">
    <fieldset>
        <legend>Kies het aantal personen</legend>
        <div class="chat-amount-chooser__inner">
            <button class="chat-amount-chooser__button chat-amount-chooser__button--less" type="button">
                <span class="chat-amount-chooser__button-text">
                    Verwijder
                </span>
            </button>
            <span class="chat-amount-chooser__amount">3</span>
            <button class="chat-amount-chooser__button chat-amount-chooser__button--more" type="button">
                <span class="chat-amount-chooser__button-text">
                    Voeg toe
                </span>
            </button>
        </div>
        <button class="button button--primary" type="submit">Bevestig</button>
    </fieldset>
</form>

{# Amount chooser with large amount #}
<form class="chat-amount-chooser">
    <fieldset>
        <legend>Bepaal uw jaarinkomen</legend>
        <div class="chat-amount-chooser__inner">
            <button class="chat-amount-chooser__button chat-amount-chooser__button--less" type="button">
                <span class="chat-amount-chooser__button-text">
                    Verwijder
                </span>
            </button>
            <span class="chat-amount-chooser__amount">45.000</span>
            <button class="chat-amount-chooser__button chat-amount-chooser__button--more" type="button">
                <span class="chat-amount-chooser__button-text">
                    Voeg toe
                </span>
            </button>
        </div>
        <button class="button button--primary" type="submit">Bevestig</button>
    </fieldset>
</form>
Styles 
.chat-amount-chooser {
    padding: $gutter-small;
    text-align: center;
}
.chat-amount-chooser fieldset {
    @include bare-fieldset;
}
// Hide text visually, but keep it for assistive technology
.chat-amount-chooser legend {
    @include hide-text;
}
.chat-amount-chooser__inner {
    display: flex; justify-content: space-between;
}
.chat-amount-chooser__input {
    margin: 0 auto;
}
.chat-amount-chooser__button {
    @include bare-button;
    display: inline-block; vertical-align: middle; // Old browsers
    width: $chat-amount-button-size; height: $chat-amount-button-size;
    margin: 0; padding: 0;
    background-repeat: no-repeat; background-position: 50% 50%;
    font-size: 40px; text-align: center;
    border: 2px solid; border-radius: 50%;
    transition: transform .2s;
    cursor: pointer;
}
.chat-amount-chooser__button--less {
    background-image: url('/images/icons/minus.svg');
    margin-right: $gutter-small; // old browsers
}
.chat-amount-chooser__button--more {
    background-image: url('/images/icons/plus.svg');
    margin-left: $gutter-small; // old browsers
}
.chat-amount-chooser__button[disabled] {
    color: $grey-light; cursor: not-allowed;
}
.chat-amount-chooser__button:hover,
.chat-amount-chooser__button:focus {
    transform: scale(1.05);
}
.chat-amount-chooser__button[disabled]:hover,
.chat-amount-chooser__button[disabled]:focus {
    transform: none;
}
.chat-amount-chooser__button-label {
    display: block; width: 100%; height: 100%;
}
// Hide text visually, but keep it for assistive technology
.chat-amount-chooser__button-text {
    @include hide-text;
}
.chat-amount-chooser__amount {
    @include heading-font;
    display: inline-block; vertical-align: middle; // Old browsers
    font-size: 32px; font-weight: 700; line-height: $chat-amount-button-size;
}

Example(s)

Kies het aantal personen
Kies het aantal personen
1
Kies het aantal personen
3
Bepaal uw jaarinkomen
45.000

Chat — Card

Card (holds the amount chooser and form)

Source code

Markup 
{# Amount chooser #}
<div class="chat-card">
    <div class="chat-card__inner">
        <h2 class="chat-card__title">Wat bedraagt uw jaarinkomen?</h2>
        <p class="chat-card__subtitle">Een korte beschrijving over het jaarinkomen</p>
        {% include './chat-amount-chooser.njk' %}
    </div>
</div>

{# Form #}
<div class="chat-card">
    <div class="chat-card__inner">
        {% include './avatar-group.njk' %}
        <h2 class="chat-card__title">Spreek met een van onze gidsen</h2>
        <p class="chat-card__subtitle">Hier is plek voor een korte beschrijving over de gidsen.</p>
        {% include './chat-form.njk' %}
    </div>
</div>

{# Form sent #}
<div class="chat-card">
    <div class="chat-card__inner">
        {% include './avatar-group.njk' %}
        <h2 class="chat-card__title">Uw bericht is verstuurd!</h2>
        <p class="chat-card__subtitle">Op basis van de expertise van de gids en de snelheid waarmee de gids kan antwoorden gaan we je aan een gids koppelen.</p>
    </div>
</div>
Styles 
.chat-card {
    max-width: $chat-component-size;
    margin-bottom: $gutter-large;
    border-top: 6px solid $yellow; border-radius: $border-radius;
    box-shadow: $box-shadow;
    text-align: center;
}
.chat-card__inner {
    min-height: inherit;
    display: flex; flex-wrap: wrap; flex-direction: column;
    padding: $gutter-large;
}
.chat-card__title {
    margin: 0 0 $gutter-small;
    line-height: 1.2;
    font-size: $font-size-large;
}
.chat-card__subtitle {
    margin: 0 0 $gutter-small;
    line-height: 1.2;
}
.chat-card :last-child {
    margin-bottom: 0;
}

Example(s)

Wat bedraagt uw jaarinkomen?

Een korte beschrijving over het jaarinkomen

Kies het aantal personen
Kies het aantal personen
1
Kies het aantal personen
3
Bepaal uw jaarinkomen
45.000

Spreek met een van onze gidsen

Hier is plek voor een korte beschrijving over de gidsen.

Uw bericht is verstuurd!

Op basis van de expertise van de gids en de snelheid waarmee de gids kan antwoorden gaan we je aan een gids koppelen.

Chat — Chat Entry Box

Form user input chat

Source code

Markup 
<form class="chat-entry-box">
    <div class="chat-entry-box__input">
        <textarea id="chat-entry-box-textarea" class="chat-entry-box__textarea" placeholder="Type hier je financi&euml;le vraag" rows="2"></textarea>
        <label for="chat-entry-box-textarea" class="chat-entry-box__label">Type hier je financi&euml;le vraag</label>
    </div>
    <button class="chat-entry-box__button button button--primary" type="submit">
        <span>Verstuur</span>
    </button>
</form>
Styles 
.chat-entry-box {
    z-index: 888;
    display: flex; flex-shrink: 0; align-self: flex-start;
    width: 100%; height: $chat-entry-box-height;
    background-color: $white;
    border-top: 1px solid $grey-light;
    margin-top: auto;
}
// Exception for styleguide viewing only
.styleguide .chat-entry-box {
    position: relative;
}
.chat-entry-box__input {
    position: relative; float: left;
    width: calc(100% - #{$chat-entry-box-button-size} - #{$chat-entry-box-expand-size} - #{$chat-entry-box-expand-size} );
}
@supports (display: flex) {
    .chat-entry-box__input {
        flex: 1 1 auto; float: none; width: auto;
        flex-shrink: 0;
    }
}
.chat-entry-box__textarea,
.chat-entry-box__label {
    font-family: $ui-font; font-size: $font-size-small;
    padding: 16px $gutter-small;
    line-height: 1;
    @include placeholder {
        opacity: 1;
        color: $text-color;
        font-family: inherit; font-size: inherit; line-height: inherit;
    }
    @include bp-min(400) {
        padding: 16px $gutter-medium;
        font-size: $font-size-medium;
    }
}
.chat-entry-box__textarea {
    display: block; width: 100%; height: 100%;
    border: 0;
}
.chat-entry-box__label {
    @include hide-text; // Hide visually, but keep in the DOM for assistive technology
    padding: 0;
}
.chat-entry-box__button {
    position: relative;
    flex-shrink: 0; align-self: center;
    margin: $gutter-small;
    @include bp-max($medium-large) {
        width: $chat-entry-box-button-size; height: $chat-entry-box-button-size;
        padding: 0;
        background-position: 50% 50%; background-size: auto 13px;
        border-radius: 50%;
    }
}
.chat-entry-box__button > span {
    @include bp-max($medium-large) {
        @include hide-text;
    }
}

Example(s)

Chat — Chat Form

Forms that can be used within the chat

type chat-form__input--valid,
chat-form__input--invalid

Source code

Markup 
<form class="chat-form">
    <div class="chat-form__element">
        <label class="chat-form__label">
            Jouw naam
            <input class="chat-form__input" type="text" placeholder="Alexia Janssen" required>
        </label>
    </div>
    <div class="chat-form__element">
         <label class="chat-form__label">
            Jouw e-mail adres
            <input class="chat-form__input" type="email" placeholder="alexia@gmail.com" required>
        </label>
    </div>
    <button type="submit" class="button button--primary">Verstuur</button>
</form>

<form class="chat-form">
    <div class="chat-form__element">
        <label class="chat-form__label">
            Jouw naam
            <input class="chat-form__input chat-form__input--valid" type="text" placeholder="Alexia Janssen" required>
        </label>
    </div>
    <div class="chat-form__element">
        <label class="chat-form__label">
            Jouw e-mail adres
            <input class="chat-form__input chat-form__input--invalid" type="email" placeholder="alexia@gmail.com" required>
        </label>
        <div class="chat-form__message chat-form__message--error" role="alert">
            <p>Voer een geldig e-mail adres in</p>
        </div>
    </div>
    <button type="submit" class="button button--primary">Verstuur</button>
</form>
Styles 
.chat-form__element {
    margin-top: $gutter-small;
}
.chat-form__input[type='text'],
.chat-form__input[type='email'],
.chat-form__input[type='password'],
.chat-form__input[type='search'] {
    width: 100%;
    padding: 16px $gutter-huge 16px $gutter-small;
    background-color: $grey-lighter; background-repeat: no-repeat; background-position: top 50% right $gutter-medium;
    font-family: $ui-font; font-size: $font-size-medium;
    border: 0;
    @include placeholder {
        opacity: 1;
        color: $text-color;
    }
}
.chat-form__input--valid {
    background-image: url('/images/icons/check.svg');
}
.chat-form__input--invalid {
    background-image: url('/images/icons/cross.svg');
}
.chat-form__label {
    display: block;
    color: $text-color;
    font-size: $font-size-small; text-align: left;
}
.chat-form__message {
    font-size: $font-size-small; text-align: left;
}
.chat-form__message > p {
    margin: $gutter-tiny 0 0;
}
.chat-form__message--error {
    color: $error-color;
}

Example(s)

Chat — Conversation

Conversation bubbles

modifiers chat-conversation__item--left,
chat-conversation__item--right,
chat-conversation__item--has-avatar,
chat-conversation__item--actions,
chat-conversation__item--actions-are-expanding,
chat-conversation__item--actions-are-collapsing

Source code

Markup 
{% import "./avatar.njk" as avatar %}

<div class="chat-conversation">
    <ol class="chat-conversation__items">
        <li class="chat-conversation__item chat-conversation__item--left" role="alert" aria-busy="true">
            <div class="chat-conversation__bubble">
                {% include "./chat-loader.njk" %}
            </div>
        </li>
        <li class="chat-conversation__item chat-conversation__item--left">
            <div class="chat-conversation__bubble">
                <p>Wil je zelf een proefberekening maken voor zorgtoeslag of huurtoeslag? Ga naar de Belastingdienst pagina.</p>
            </div>
        </li>
        <li class="chat-conversation__item chat-conversation__item--left">
            <div class="chat-conversation__bubble">
                <p>Eenpersoonshuishouden inkomen moet onder € 22.400 per jaar zijn.</p>
                {{ avatar.avatar(size='small', type="kanbot", class="chat-conversation__avatar", backgroundColor="yellow") }}
            </div>
        </li>
        <li class="chat-conversation__item--actions chat-conversation__item--left">
            <button class="button button--secondary">Jaarinkomen</button>
            <button class="button button--secondary">Vermogen</button>
            <button class="button button--secondary">De hoogte van de kale huur</button>
            <button class="button button--secondary">Je woning</button>
        </li>
        <li class="chat-conversation__item chat-conversation__item--right">
            <div class="chat-conversation__bubble">
                <p>Ja vertel mij meer</p>
            </div>
            <button class="chat-conversation__choose-again">Opnieuw kiezen</button>
        </li>
    </ol>
</div>

<div class="chat-conversation">
    <ol class="chat-conversation__items">
        <li class="chat-conversation__item chat-conversation__item--left">
            <div class="chat-conversation__bubble">
                <h2 class="chat-conversation__item-title">Vermogen</h2>
                <p>Heb je geen toeslagpartner? Dan ligt de vermogensgrens op € 30.000,- op jaarbasis.</p>
                <p>Een vermogen is de waarde van wat je bezit min de schulden die je hebt. De <a href="https://www.belastingdienst.nl">belastingdienst</a> omschrijft het volgende:</p>
                <p>"Wat u wel en niet als vermogen moet meetellen, is hetzelfde als bij uw belastingaangifte. Spaargeld, aandelen en een vakantiehuis in Nederland of het buitenland tellen bijvoorbeeld mee. Uw auto of eigen woning tellen meestal niet mee".</p>
            </div>
        </li>
        <li class="chat-conversation__item chat-conversation__item--has-avatar chat-conversation__item--left">
            <div class="chat-conversation__bubble">
                <p>Eenpersoonshuishouden inkomen moet onder € 22.400 per jaar zijn.</p>
                {{ avatar.avatar(size='small', class="chat-conversation__avatar", type="kanbot", backgroundColor="yellow") }}
            </div>
        </li>
        <li class="chat-conversation__item chat-conversation__item--has-avatar chat-conversation__item--left">
            <div class="chat-conversation__bubble">
                <p>Avatar changes when the guide is typing</p>
                {{ avatar.avatar(size='small', class="chat-conversation__avatar", type="photo", image="avatar--24x24.jpg") }}
            </div>
        </li>
        <li class="chat-conversation__item chat-conversation__item--right">
            <div class="chat-conversation__bubble">
                <p>Ja vertel mij meer</p>
            </div>
        </li>
        <li class="chat-conversation__item chat-conversation__item--left">
            <div class="chat-conversation__bubble">
                {% include "./chat-reactions.njk" %}
            </div>
        </li>
    </ol>
</div>
Styles 
@keyframes slide-from-left {
    0% {
        opacity: .6;
        transform: translateX(-$gutter-medium);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slide-from-right {
    0% {
        opacity: .6;
        transform: translateX($gutter-medium);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes avatar-scale-in {
    0% {
        transform: translate3d(-50%, 50%, 0) scale(.7);
    }
    100% {
        transform: translate3d(-50%, 50%, 0) scale(1);
    }
}

@keyframes actions-collapsing {
    0% {
        opacity: 1; max-height: 700px;
    }
    100% {
        opacity: .5; max-height: 0;
    }
}

@keyframes actions-collapsing-buttons {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

.chat-conversation {
    margin-bottom: $gutter-large;
}
.chat-conversation__items {
    @include bare-list; @include clearfix;
}
.chat-conversation__item {
    @include clearfix;
    position: relative;
    width: 100%;
    margin-bottom: $gutter-small;
}
.chat-conversation__bubble {
    max-width: $chat-component-size;
    padding: $gutter-small $gutter-medium;
    background: $grey-lighter;
    border-radius: $border-radius;
    font-size: $font-size-small;
}
.chat-conversation__bubble > p {
    margin: 0 0 1em;
}
.chat-conversation__bubble > p:last-of-type {
    margin: 0;
}
.chat-conversation__avatar {
    position: absolute; bottom: 0; left: 0; transform: translate(-50%, 50%);
    animation: avatar-scale-in .2s both;
}
.chat-conversation__item--left {
    float: left;
    animation: slide-from-left .3s both;
}
.chat-conversation__item--right {
    float: right;
    animation: slide-from-right .3s both;
}
.chat-conversation__item--right + .chat-conversation__item--left,
.chat-conversation__item--left + .chat-conversation__item--right {
    margin-top: $gutter-small;
}
.chat-conversation__item--has-avatar {
    margin-bottom: $gutter-medium;
}
.chat-conversation__item--left .chat-conversation__bubble {
    float: left;
}
.chat-conversation__item--right .chat-conversation__bubble {
    background-color: $blue; color: $white;
    float: right;
    border-bottom-right-radius: $border-radius;
}
.chat-conversation__item-title {
    margin: 0 0 1em; padding-bottom: $gutter-small;
    font-size: $font-size-large;
    border-bottom: 1px solid rgba($black, .1);
}
.chat-conversation__item--actions {
    overflow: hidden;
    max-width: $chat-component-size;
    margin: $gutter-small 0;
}
.chat-conversation__item--actions-are-collapsing  {
    transform-origin: 0 0;
    animation: actions-collapsing .3s both;
}
.chat-conversation__item--actions-are-expanding  {
    transform-origin: 0 0;
    animation: actions-collapsing .3s both reverse;
}
.chat-conversation__item--actions > button {
    margin: $gutter-tiny $gutter-tiny $gutter-tiny 0;
    transform-origin: 0 0;
    background-image: none; padding-right: 25px;
}
.chat-conversation__item--actions > button:hover,
.chat-conversation__item--actions > button:focus {
    background-image: none;
}
.chat-conversation__choose-again {
    @include bare-button;
    float: right; clear: both;
    margin-top: $gutter-tiny;
    font-size: $font-size-tiny;
    cursor: pointer;
}
.chat-conversation__choose-again::before {
    content: '';
    display: inline-block; width: 10px; height: 10px;
    margin: 0 $gutter-tiny 0 0;
    background: url('/images/icons/reload.svg') no-repeat 50% 50% / contain;
}

Example(s)

  1. Wil je zelf een proefberekening maken voor zorgtoeslag of huurtoeslag? Ga naar de Belastingdienst pagina.

  2. Eenpersoonshuishouden inkomen moet onder € 22.400 per jaar zijn.

  4. Ja vertel mij meer

  1. Vermogen

    Heb je geen toeslagpartner? Dan ligt de vermogensgrens op € 30.000,- op jaarbasis.

    Een vermogen is de waarde van wat je bezit min de schulden die je hebt. De belastingdienst omschrijft het volgende:

    "Wat u wel en niet als vermogen moet meetellen, is hetzelfde als bij uw belastingaangifte. Spaargeld, aandelen en een vakantiehuis in Nederland of het buitenland tellen bijvoorbeeld mee. Uw auto of eigen woning tellen meestal niet mee".

  2. Eenpersoonshuishouden inkomen moet onder € 22.400 per jaar zijn.

  3. Avatar changes when the guide is typing

  4. Ja vertel mij meer

Chat — FAQ

FAQ item within the Kandoor Chat

Source code

Markup 
{# Multipe faq items #}
<div class="chat-faq">
    <ul class="chat-faq__items">
        <li class="chat-faq__item">
            <button>Ik wil weten voor welke toeslagen ik in aanmerking kom.</button>
        </li>
        <li class="chat-faq__item">
            <button>Wie is mijn toeslagpartner?</button>
        </li>
        <li class="chat-faq__item">
            <button>Etiam ultrices dolor sed placerat pharetra?</button>
        </li>
        <li class="chat-faq__item chat-faq__item">
            <button>Wie is mijn toeslagpartner?</button>
        </li>
        <li class="chat-faq__item">
            <button>Etiam ultrices dolor sed placerat pharetra?</button>
        </li>
    </ul>
    <div class="chat-faq__footer">
        <button class="chat-faq__more-items">Meer vragen</button>
    </div>
</div>

{# Multiple faq items without button (expanded state) #}
<div class="chat-faq">
    <ul class="chat-faq__items">
        <li class="chat-faq__item">
            <button>Ik wil weten voor welke toeslagen ik in aanmerking kom.</button>
        </li>
        <li class="chat-faq__item">
            <button>Wie is mijn toeslagpartner?</button>
        </li>
        <li class="chat-faq__item">
            <button>Etiam ultrices dolor sed placerat pharetra?</button>
        </li>
        <li class="chat-faq__item">
            <button>Wie is mijn toeslagpartner?</button>
        </li>
        <li class="chat-faq__item">
            <button>Etiam ultrices dolor sed placerat pharetra?</button>
        </li>
    </ul>
</div>

{# Single faq item #}
<div class="chat-faq">
    <div class="chat-faq__item">
        <button>Ik wil weten voor welke toeslagen ik in aanmerking kom.</button>
    </div>
</div>
Styles 
@keyframes faq-item-in {
    0% {
        opacity: .7;
        transform: translateX(-$gutter-medium);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.chat-faq {
    max-width: $chat-component-size;
    margin-bottom: $gutter-large;
}
.chat-faq__items {
    @include bare-list;
}
.chat-faq__item {
    position: relative;
    text-align: left;
}
@supports (animation-name: faq-item-in) {
    .chat-faq__item {
        opacity: .7;
        transform: translateX(-$gutter-medium);
        animation: faq-item-in .2s forwards;
        $max-amount: 20;
        @for $i from 0 to $max-amount {
            &:nth-child(#{$i}) {
                animation-delay: $i * .05s;
            }
        }
    }
}
.chat-faq__item > button {
    @include bare-button;
    display: block; width: 100%;
    margin-bottom: $gutter-tiny; padding: $gutter-small $gutter-large $gutter-small $gutter-medium;
    background: $blue-light; color: $text-color;
    line-height: 1.4;
    border-radius: $border-radius;
    cursor: pointer;
    transition: all .2s;
}
.chat-faq__item > button:hover,
.chat-faq__item > button:focus {
    background: $blue; color: $white;
}
.chat-faq__footer {
    text-align: center;
}
.chat-faq__more-items {
    @include bare-button;
    cursor: pointer;
}
.chat-faq__more-items::after {
    content: '';
    display: inline-block; vertical-align: middle;
    width: 12px; height: 12px;
    margin: 0 0 0 $gutter-small;
    background: url('/images/icons/chevron--down.svg') no-repeat 50% 50% / contain;
}

Example(s)

Chat — Header

This is the header of the Kandoor chatservice

Source code

Markup 
{% import "./avatar.njk" as avatar %}

<section class="chat-header">
    {{ avatar.avatar(size='medium', type="kanbot") }}
    <header>
        <h1 class="chat-header__title">Welkom, ik ben Kanbot</h1>
        <p class="chat-header__subtitle">Uw virtuele assistent</p>
    </header>
</section>
Styles 
.chat-header {
    display: flex;
    padding: $gutter-large $gutter-medium $gutter-medium;
    background-color: $blue-dark; background-position: 50% 100%;
    background-repeat: no-repeat; background-size: 100% auto;
}
.chat-header .avatar {
    flex: 0 0 auto;
}
.chat-header > header {
    flex: 1 1 auto;
    display: flex; flex-wrap: wrap;
    flex-direction: column; justify-content: flex-end;
    padding-left: $gutter-small * 1.5;
}
.chat-header__title {
    @include ui-font;
    width: 100%;
    margin: 0 0 $gutter-tiny; color: $white;
    font-size: 20px; font-weight: 600; line-height: 1;
    @include bp-min(400) {
        font-size: 24px;
    }
}
.chat-header__subtitle {
    margin: 0 0 $gutter-tiny; line-height: 1.2;
    font-size: $font-size-large; font-weight: 600;
    color: $white;
    font-size: 14px;
    @include bp-min(400) {
        font-size: 16px;
    }
}
.chat-header__subtitle:last-child {
    margin-bottom: 0;
}

Example(s)

Welkom, ik ben Kanbot

Uw virtuele assistent

Chat — Loader

Source code

Markup 
<div class="chat-loader">
    <svg viewbox="0 0 40 40">
        <circle cy="20" cx="20" r="20"></circle>
    </svg>
    <svg viewbox="0 0 40 40">
        <circle cy="20" cx="20" r="20"></circle>
    </svg>
    <svg viewbox="0 0 40 40">
        <circle cy="20" cx="20" r="20"></circle>
    </svg>
</div>
Styles 
@keyframes loader-fade {
    0%,
    30% {
        opacity: .25;
    }
    100% {
        opacity: 1;
    }
}
.chat-loader {
    @include clearfix;
    padding: $gutter-tiny 0;
}
.chat-loader > svg {
    float: left; width: $loading-circle-size; height: $loading-circle-size;
    margin: 0 $gutter-tiny 0 0;
    fill: $yellow;
    animation: loader-fade .5s linear infinite alternate;
}
.chat-loader > svg:nth-child(2) {
    animation-delay: .3s;
}
.chat-loader > svg:nth-child(3) {
    animation-delay: .666666s;
}

Example(s)

Chat — Reactions

Emoji reaction module (design to be determined)

Source code

Markup 
<ul class="chat-reactions">
    <li class="chat-reactions__reaction">
        <button>
            <figure class="rating">
                <span class="rating__image">:-D</span>
                <figcaption class="rating__description">Super</figcaption>
            </figure>
        </button>
    </li>
      <li class="chat-reactions__reaction">
        <button type="button">
            <figure class="rating">
                <span class="rating__image">:-)</span>
                <figcaption class="rating__description">Goed</figcaption>
            </figure>
        </button>
    </li>
      <li class="chat-reactions__reaction">
        <button>
            <figure class="rating">
                <span class="rating__image">:-></span>
                <figcaption class="rating__description">Prima</figcaption>
            </figure>
        </button>
    </li>
      <li class="chat-reactions__reaction">
        <button>
            <figure class="rating">
                <span class="rating__image">:-/</span>
                <figcaption class="rating__description">Matig</figcaption>
            </figure>
        </button>
    </li>
    <li class="chat-reactions__reaction">
        <button>
            <figure class="rating">
                <span class="rating__image">:-(</span>
                <figcaption class="rating__description">Slecht</figcaption>
            </figure>
        </button>
    </li>
</ul>
Styles 
.chat-reactions {
    @include bare-list;
}
.chat-reactions__reaction {
    z-index: 0; position: relative;
    display: inline-block;
    margin: $gutter-tiny $gutter-tiny $gutter-tiny 0;
    transform: translateZ(0); backface-visibility: hidden;
}
.chat-reactions__reaction:last-child {
    margin: 0;
}
.chat-reactions__reaction > button {
    @include bare-button;
    font-size: $font-size-small; text-align: center;
    transition: background .3s;
    overflow: visible; // Old browsers
}
.chat-reactions__reaction:hover,
.chat-reactions__reaction:hover  {
    z-index: 10;
}
.chat-reactions__reaction:hover .rating__image,
.chat-reactions__reaction:focus .rating__image {
    background: $yellow;
    transform: scale(1.45);
}

Example(s)

Chat — Website links

Chat module containing external links

Source code

Markup 
<ul class="chat-links">
    <li class="chat-links__item">
        <a href="https://www.kandoor.nl" rel="external">Read more at Kandoor.nl</a>
    </li>
    <li class="chat-links__item">
        <a href="https://www.grrr.nl" rel="external">This is a weblink flowing over multiple lines</a>
    </li>
    <li class="chat-links__item">
        <a href="https://www.grrr.nl" rel="external">Visit grrr.nl</a>
    </li>
</ul>
Styles 
.chat-links {
    @include bare-list;
    max-width: $chat-component-size;
}
.chat-links__item > a {
    position: relative;
    display: block;
    margin-bottom: $gutter-tiny;
    padding: $gutter-small $gutter-huge $gutter-small $gutter-medium;
    background: $blue-light url('/images/external-link.svg') no-repeat top 50% right $gutter-medium;
    color: $text-color;
    line-height: 1.4; text-decoration: none;
    border-radius: $border-radius;
    transition: background .2s;
}
.chat-links__item > a:hover,
.chat-links__item > a:focus {
    background-color: $blue; color: $white;
}
.chat-links__item:last-of-type {
    margin-bottom: 0;
}

Example(s)

Checkbox

Checkboxes with different status (:checked, disabled & default)

Source code

Markup 
{% macro checkbox(disabled="", checked="", id="") %}
    <input
        type="checkbox"

        {% if id %}
            id="{{ id }}"
        {% endif %}

        {% if disabled == 'true' %}
            disabled
        {% endif %}

        {% if checked == 'true' %}
            checked
        {% endif %}
    >
{% endmacro %}

<p><small>This is a macro and its example will be included in "<a href="#form">Form examples</a>".</small></p>
Styles 
input[type='checkbox'] {
    @include checkbox;
}

Example(s)

This is a macro and its example will be included in "Form examples".

Content Block

Content Block

modifiers content-block--has-blob

Source code

Markup 
<div class="content-block container">
    <div class="content-block__inner row">
        <div class="col-sm-12 col-lg-8 offset-lg-2">
            <h2>Level 2 heading</h2>
            <p>Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.</p>
            <h3>Zo werkt het</h3>
            <p>Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.</p>
            <p>Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, <a href="/">en die worden direct</a> beantwoord door onze bot. Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.</p>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
                <li>List item 4 Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.</li>
                <li>List item 5</li>
                <li>List item 6</li>
            </ul>
            <h3>Level 3 heading</h3>
            <p>Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, <a href="/">en die worden direct</a> beantwoord door onze bot. Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.</p>
            <h4>Level 4 heading</h4>
            <p>Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, <a href="/">en die worden direct</a> beantwoord door onze bot. Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.</p>
            <h5>Level 5 heading</h5>
            <p>Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, <a href="/">en die worden direct</a> beantwoord door onze bot. Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.</p>
            <h6>Level 6 heading</h6>
            <p>Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, <a href="/">en die worden direct</a> beantwoord door onze bot. Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.</p>
            <ol>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
                <li>List item 4 Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.</li>
                <li>List item 5</li>
                <li>List item 6</li>
            </ol>
        </div>
    </div>
</div>
Styles 
.content-block {
    @include row(large);
    position: relative;
    overflow: visible;
}
.content-block--has-blob::before {
    z-index: -2;
    content: '';
    position: absolute; top: 110%; left: -50%; transform: translate(-50%, -50%);
    width: 1550px; height: 840px;
    background: url('/../images/blob--content-block.svg') no-repeat 50% 50% / 100% auto;
    @include bp-min($medium) {
        top: 67%; left: 40%;
        width: 1550px; height: 840px;
    }
}
.content-block__inner {
    position: relative;
}

Example(s)

Level 2 heading

Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.

Zo werkt het

Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.

Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot. Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.

  • List item 1
  • List item 2
  • List item 3
  • List item 4 Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.
  • List item 5
  • List item 6

Level 3 heading

Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot. Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.

Level 4 heading

Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot. Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.

Level 5 heading

Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot. Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.

Level 6 heading

Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot. Een korte introductie zo werkt het. Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4 Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.
  5. List item 5
  6. List item 6

CTA Block

Call to Action Block

modifiers cta-block--has-avatar-group

Source code

Markup 
<div class="cta-block">
    <div class="cta-block__inner container">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <h2 class="cta-block__title">Eén van onze 211 financiële gidsen helpt jou op weg</h2>
                <p>Kandoor bestaat omdat wij zien dat mensen steeds meer financiële keuzes moeten maken.</p>
                <a href="/" class="button button--primary">Word gids</a>
            </div>
        </div>
    </div>
</div>
Styles 
.cta-block {
    position: relative;
    background-color: $primary-color;
}
.cta-block__inner {
    @include row(medium); text-align: center;
}

/**
 * Has avatar group
 */
.cta-block--has-avatar-group {
    margin-top: $avatar-size-huge / 2;
}
.cta-block--has-avatar-group .cta-block__inner {
    padding-top: $avatar-size-huge / 2;
    @include bp-min($medium-large) {
        padding-top: $avatar-size-huge / 1.5;
    }
}
.cta-block .avatar-group {
    position: absolute; top: 0; left: 50%;
    transform: translate(-50%, -50%);
}

Example(s)

Eén van onze 211 financiële gidsen helpt jou op weg

Kandoor bestaat omdat wij zien dat mensen steeds meer financiële keuzes moeten maken.

Word gids

Datepicker

Datepicker, custom styled Flatpickr element

Source code

Markup 
<input type="time" class="js-datepicker-input" id="datepicker-input">
Styles 
.datepicker__input {
    @include input;
}

/**
 * Flatpickr overrides
 */
.flatpickr-calendar.open {
    z-index: 40;
}

// Pseudo arrows
.flatpickr-calendar:before {
    margin: 0 -10px;
    border-width: 10px;
}
.flatpickr-calendar:after {
    margin: 0 -8px;
    border-width: 8px;
}
.flatpickr-months {
    padding: $gutter-small;
    position: relative;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    height: 100%;
    width: $tap-size;
}
.flatpickr-months .flatpickr-prev-month > svg,
.flatpickr-months .flatpickr-next-month > svg {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.flatpickr-months .flatpickr-prev-month:hover > svg,
.flatpickr-months .flatpickr-prev-month:focus > svg,
.flatpickr-months .flatpickr-next-month:hover > svg,
.flatpickr-months .flatpickr-next-month:focus > svg {
    fill: $tertiary-color;
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays .flatpickr-weekday {
    color: $text-color;
}
.flatpickr-current-month {
    padding-top: 0;
    display: flex; align-items: center; justify-content: center;
    height: 100%;
}
.dayContainer .flatpickr-day {
    color: $text-color;
}
.dayContainer .prevMonthDay,
.dayContainer .nextMonthDay {
    color: $grey;
}
.flatpickr-day.today,
.flatpickr-day.selected {
    border: none;
}
.flatpickr-day.today {
    background: $grey-light; color: $text-color;
}
.flatpickr-day.selected {
    background: $tertiary-color; color: $white;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: $tertiary-color; color: $white;
}
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: lighten($tertiary-color, 10%);
}

Example(s)

Footer Menu

Footer Menu

Source code

Markup 
<nav class="footer-menu">
    <ul>
        <li class="footer-menu__item"><a href="/">Gebruiksvoorwaarden</a></li>
        <li class="footer-menu__item"><a href="/">Privacyverklaring</a></li>
        <li class="footer-menu__item"><a href="/">Cookieverklaring</a></li>
        <li class="footer-menu__item"><a href="/">Jobs</a></li>
    </ul>
</nav>
Styles 
.footer-menu {
    width: 100%;
    @include bp-min($medium) {
        @include row-top(small);
    }
    @include bp-min($medium-large) {
        width: auto;
    }
}
.footer-menu > ul {
    @include bare-list;
    margin-bottom: $gutter-medium;
    @include bp-min($medium) {
        margin-bottom: 0;
    }
}
.footer-menu > ul > li {
    margin: 0;
    font-size: $font-size-tiny;
    @include bp-min($medium) {
        display: inline-block;
    }
    @include bp-min($large) {
        font-size: $font-size-small;
    }
}
.footer-menu > ul > li:not(:last-child) {
    margin-right: $gutter-small;
    @include bp-min($medium) {
        margin-right: $gutter-medium;
    }
    @include bp-min($large) {
        margin-right: $gutter-large;
    }
}
.footer-menu > ul > li > a {
    text-decoration: none;
}
.footer-menu > ul > li > a:hover,
.footer-menu > ul > li > a:focus {
    text-decoration: underline;
}

Example(s)

Form examples

Form displaying several input types

Source code

Markup 
{% import "./checkbox.njk" as checkbox %}
{% import "./radio.njk" as radio %}

<form class="form" action="" method="post">
    <fieldset>
        <legend>Regular inputs</legend>
        <div class="form__row">
            <label for="name">Naam</label>
            <input type="text" id="name">
        </div>
        <div class="form__row">
            <label for="name">Emailadres</label>
            <input type="email" id="email">
        </div>
        <div class="form__row">
            <label for="name">Woonplaats</label>
            <input type="text" id="city">
        </div>
        <div class="form__row">
            <label for="name">Password</label>
            <input type="password" id="password">
        </div>
        <div class="form__row">
            <label for="datepicker-input">Kies datum</label>
            {% include './datepicker.njk' %}
        </div>
        <div class="form__row">
            <label for="message">Bericht</label>
            <textarea id="message" rows="4"></textarea>
        </div>
    </fieldset>

    <fieldset>
        <legend>Checkbox examples</legend>
        <div class="form__row">
            {{ checkbox.checkbox(id="checkbox-1", checked="true") }}
            <label for="checkbox-1">Maandag</label>
        </div>
        <div class="form__row">
            {{ checkbox.checkbox(id="checkbox-2") }}
            <label for="checkbox-2">Dinsdag</label>
        </div>
        <div class="form__row">
            {{ checkbox.checkbox(id="checkbox-3") }}
            <label for="checkbox-3">Woensdag</label>
        </div>
        <div class="form__row">
            {{ checkbox.checkbox(id="checkbox-4") }}
            <label for="checkbox-4">Donderdag</label>
        </div>
        <div class="form__row">
            {{ checkbox.checkbox(id="checkbox-4", disabled="true") }}
            <label for="checkbox-5">Vrijdag</label>
        </div>
    </fieldset>

    <fieldset>
        <legend>Radio examples</legend>
        <div class="form__row">
            {{ radio.radio(id="radio-1", name="form-radio", value="zoekopdracht", checked="true") }}
            <label for="radio-1">Google zoekopdracht</label>
        </div>
        <div class="form__row">
            {{ radio.radio(id="radio-2", name="form-radio", value="adverentie") }}
            <label for="radio-2">Advertentie</label>
        </div>
        <div class="form__row">
            {{ radio.radio(id="radio-3", name="form-radio", value="presentatie", disabled="true") }}
            <label for="radio-3">Via een presentatie</label>
        </div>
        <div class="form__row">
            {{ radio.radio(id="radio-4", name="form-radio", value="social") }}
            <label for="radio-4">Social media</label>
        </div>
        <div class="form__row">
            {{ radio.radio(id="radio-5", name="form-radio", value="anders") }}
            <label for="radio-5">Anders</label>
        </div>
    </fieldset>

    <fieldset>
        <legend>Select example</legend>
        <div class="form__row">
            {% include './select.njk' %}
        </div>
    </fieldset>
</form>
Styles 
// Forms
.form {
    margin-bottom: $gutter-medium;
    @include bp-min($medium) {
        margin-bottom: $gutter-large;
    }
}
.form__row {
    margin-bottom: $gutter-tiny;
}
.form__row:last-child {
    margin: 0;
}
.form fieldset {
    margin: 0 0 $gutter-medium; padding: 0;
    border: 0;
    @include bp-min($medium) {
        margin-bottom: $gutter-large;
    }
}
.form legend {
    @include hide-text;
}

.form input:not([type]),
.form input[type='text'],
.form input[type='email'],
.form input[type='number'],
.form input[type='password'],
.form input[type='time'],
.form textarea {
    @include input;
}

Example(s)

Regular inputs
Checkbox examples
Radio examples
Select example

Hamburger

Hamburger

Source code

Markup 
<span class="hamburger">
    <span class="hamburger__line"></span>
    <span class="hamburger__line"></span>
    <span class="hamburger__line"></span>
</span>
Styles 
.hamburger {
    display: inline-block; vertical-align: middle;
    width: 24px; height: 16px;
    transform: translateZ(0);
}
.hamburger__line {
    display: block;
    width: 100%; height: 3px;
    background: $tertiary-color;
    border-radius: 50% 50% / 0 0;
    transition: transform .15s;
}
.hamburger__line:nth-child(2) {
    margin: 4px 0;
}
.site-header__nav-toggle:hover,
.site-header__nav-toggle:focus {
    .hamburger__line:nth-child(1) {
        transform: translate3d(0, -20%, 0);
    }
    .hamburger__line:nth-child(3) {
        transform: translate3d(0, 20%, 0);
    }
}

Example(s)

Image Block

Image Block with blob backdrop

Source code

Markup 
<figure class="image-block">
    <img
        decoding="async"
        src="/images/image--family-960x344.jpg"
        srcset="
            /images/image--family--320x115.jpg 320w,
            /images/image--family--460x165.jpg 460w,
            /images/image--family--960x344.jpg 960w,
            /images/image--family--2000x716.jpg 1200w"
        alt="Moeder en twee kinderen zitten op de bank en kijken naar het scherm van een tablet">
</figure>
Styles 
$image-block-height-small: 270px;
$image-block-height-large: 500px;

.image-block  {
    position: relative; overflow: visible;
}
.image-block > img {
    width: 100%; height: auto;
}
@supports (object-fit: cover) {
    .image-block > img {
        object-fit: cover;height: $image-block-height-small;
        @include bp-min($medium) {
            height: $image-block-height-large;
        }
    }
}
.image-block::before {
    content: '';
    display: block;
    width: 900px; height: 575px;
    z-index: -1;
    position: absolute; top: 75%; left: 120%;
    transform: translate(-50%, -50%);
    background: url('/../images/blob--image-block.svg') no-repeat 50% 50% / 100% auto;
    @include bp-min($medium) {
        top: 65%; left: 100%;
        width: 1550px; height: 880px;
    }
    @include bp-min($large) {
        left: 70%;
    }
}

Example(s)

Moeder en twee kinderen zitten op de bank en kijken naar het scherm van een tablet

Logo List

Logo List

Source code

Markup 
<ul class="logo-list">
    <li class="logo-list__item">
        <a href="https://www.abp.nl/" rel="external">
        {% include './../../images/logo--abp.svg' %}
            <span>ABP</span>
        </a>
    </li>
    <li class="logo-list__item">
        <a href="https://www.svb.nl/" rel="external">
            {% include './../../images/logo--svb.svg' %}
            <span>SVB</span>
        </a>
    </li>
    <li class="logo-list__item">
        <a href="https://www.acp.nl/" rel="external">
            <img src="./../../images/logo--acp.png" alt="">
            <span>ACP</span>
        </a>
    </li>
    <li class="logo-list__item">
        <a href="https://www.obvion.nl/" rel="external">
            <img src="./../../images/logo--obvion.png" alt="">
            <span>Obvion hypotheken</span>
        </a>
    </li>
    <li class="logo-list__item">
        <a href="https://jumba.nl/" rel="external">
            {% include './../../images/logo--jumba-nl.svg' %}
            <span>Jumba.nl</span>
        </a>
    </li>
    <li class="logo-list__item">
        <a href="https://www.menzis.nl/">
            {% include './../../images/logo--menzis.svg' %}
            <span>Menzis</span>
        </a>
    </li>
</ul>
Styles 
.logo-list {
    @include bare-list;
    display: flex; flex-wrap: wrap; justify-content: space-between;
    width: 100%;
    margin: 0 0 $gutter-medium 0;
    @include bp-min($medium) {
        @include row-bottom(small);
        margin-bottom: 0;
    }
}
.logo-list__item {
    display: flex; align-items: center; justify-content: center;
    width: 33.333%;
    margin: 0; padding: $gutter-small 0; text-align: center;
    @include bp-min($medium) {
        width: calc(100% / 6);
        padding: 0;
    }
    @include bp-min($chat-module-switch) {
        width: calc(100% / 3);
    }
    @include bp-min($large) {
        max-width: 90px;
    }
    @include bp-min(1100) {
        width: auto; max-width: calc(100% / 6);
        padding-right: $gutter-small;
    }
}
.logo-list__item > a {
    position: relative;
    display: block;
    text-decoration: none;
}
.logo-list__item > a > svg,
.logo-list__item > a > img {
    max-width: 100%;
}
.logo-list__item > a > span {
    @include hide-text;
}

Example(s)

Nav Overlay

Nav Overlay. Visible when Hamburger is clicked.

Source code

Markup 
{# Toggle aria-hidden attributes through JavaScript to hide duplicate content #}
<div class="nav-overlay" id="menu-overlay" aria-hidden="true">
    <a class="nav-overlay__logo" href="/home">
        {% include './../../images/logo--kandoor.svg' %}
    </a>
    <a href="#document" class="nav-overlay__close js-nav-toggle-close">Sluit</a>
    {% include './site-menu.njk' %}
</div>
Styles 
.nav-overlay {
    display: none;
}
.nav-overlay:target,
.styleguide .nav-overlay { // Exception for styleguide viewing only
    z-index: 999;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: center; align-items: center;
    background-color: $yellow;
    text-align: center;
    overscroll-behavior: contain;
}
// Exception for styleguide viewing only
.styleguide .nav-overlay {
    z-index: 0;
    position: relative;
    display: block;
}
.nav-overlay__logo {
    position: absolute; top: calc(1.5vw + 2rem); left: $gutter-small * 1.5; transform: translateY(8%);
    display: block; width: $logo-small-width; height: $logo-small-height;
}
.nav-overlay__close {
    position: absolute; top: calc(1.5vw + 2rem); right: $gutter-medium;
    margin-top: $gutter-small / 2;
    color: $blue;
    font-size: $font-size-small; line-height: 1;
    text-decoration: none;
    @include bp-min($large) {
        top: $gutter-large; right: $gutter-large;
    }
}
.nav-overlay__close::after {
    content: '';
    display: inline-block; vertical-align: middle;
    width: 24px; height: 24px;
    background: url('/../images/close.svg') no-repeat center center / 100% auto;
    margin: 0 0 0 $gutter-small;
}
.nav-overlay > nav > ul {
    display: block;
}
.nav-overlay > nav > ul > li {
    display: block; width: 100%;
    margin-bottom: $gutter-large;
}
.nav-overlay > nav > ul > li > a {
    @include body-font-bold;
}

Example(s)

Page CTA

Page CTA, usually fixed positioned (but not in the styleguide)

Source code

Markup 
{% import "./avatar.njk" as avatar %}

<aside class="page-cta">
    {{ avatar.avatar(size='medium', type="kanbot") }}
    <header>
        <h1 class="page-cta__title">Kennis van financiën?</h1>
        <p class="page-cta__subtitle">Word gids bij Kandoor</p>
    </header>
    <a class="button button--primary" href="/word-gids">Word gids</a>
</aside>
Styles 
.page-cta {
    display: flex; flex: 1 0 auto; flex-wrap: wrap; width: 100%;
    padding: $gutter-medium;
    background: $blue-medium;
    display: none;
    @include bp-min($medium) {
        z-index: 666;
        position: fixed; bottom: $gutter-large; right: $gutter-large; left: auto;
        display: flex; width: 400px;
        border-radius: $border-radius;
    }
}
// Exception for styleguide viewing only
.styleguide .page-cta {
    z-index: 0;
    position: relative; bottom: auto; right: auto;
}
.page-cta .button {
    margin-left: auto; margin-right: auto;
}
.page-cta .avatar {
    flex: 0 0 auto;
}
.page-cta header {
    flex: 1 1 auto;
    display: flex; flex-wrap: wrap;
    flex-direction: column; justify-content: center;
    padding-left: $gutter-small * 1.5;
}
.page-cta__title {
    @include body-font-bold;
    width: 100%;
    margin: $gutter-tiny 0;
    font-size: 24px; font-weight: 600; line-height: 1;
}
.page-cta__subtitle {
    margin: 0; line-height: 1.2;
    font-size: $font-size-large; font-weight: 600;
    font-size: 16px;
}

Example(s)

Page Header

Page header on top of every page

modifiers page-header--homepage

Source code

Markup 
<header class="page-header">
    <div class="container">
        <div class="row">
            <div class="col-10 col-sm-10 col-lg-6">
                <h1 class="page-header__title">
                    Word gids bij Kandoor
                </h1>
                <p class="page-header__subtitle">
                    Onze financiële gidsen, professionals uit het veld, beantwoorden kosteloos jouw vraag.
                </p>
            </div>
        </div>
    </div>
</header>
Styles 
.page-header {
    @include row(medium);
    position: relative;
}
.page-header__subtitle {
    @include body-font-bold;
    @include bp-min($medium) {
        @include body-font;
    }
}

Example(s)

Word gids bij Kandoor

Onze financiële gidsen, professionals uit het veld, beantwoorden kosteloos jouw vraag.

Progess bar

Progress bar, "value" should be adjusted dynamically, through JavaScript

Source code

Markup 
{# Value should be adjusted dynamically, through JavaScript #}
<progress class="progress-bar" value="40" max="100"></progress>
Styles 
/**
 * Progress indicator with <progress> element
 */
.progress-bar {
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%; height: 12px;
    background: $grey-light; color: $blue;
    border: 0; border-radius: 9px;
    box-shadow: inset 0 0 0 1px $grey;
    @include bp-min($medium) {
        height: 18px;
    }
}

// Generic styles
.progress-bar::-webkit-progress-bar {
    background-color: transparent;
}
.progress-bar::-webkit-progress-value {
    background-color:  $blue;
}
.progress-bar::-moz-progress-bar {
    background-color:  $blue;
}

Example(s)

Radio

Radios with different status (:checked, disabled & default)

Source code

Markup 
{% macro radio(id="", name="", value="", disabled="", checked="") %}
    <input
        type="radio"

        {% if id %}
            id="{{ id }}"
        {% endif %}

        {% if name %}
            name="{{ name }}"
        {% endif %}

        {% if value %}
            value="{{ value }}"
        {% endif %}

        {% if disabled == 'true' %}
            disabled
        {% endif %}

        {% if checked == 'true' %}
            checked
        {% endif %}
    >
{% endmacro %}

<p><small>This is a macro and its example will be included in "<a href="#form">Form examples</a>".</small></p>
Styles 
input[type="radio"] {
    @include radio;
}

Example(s)

This is a macro and its example will be included in "Form examples".

Select / dropdown

Select dropdown

Source code

Markup 
<select class="select">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>

<select class="select" disabled>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</select>
Styles 
select {
    @include button; @include select;
}

Example(s)

Site Footer

Site footer with logo list, social list

Source code

Markup 
<footer class="site-footer" role="contentinfo">
    <div class="container">
        <div class="site-footer__inner">
            <div class="row">
                <div class="col-md-12">
                    <h2>Partners</h2>
                    {% include './logo-list.njk' %}
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                     <h2>Adres</h2>
                    <p>
                        John M. Keynesplein 12-46<br>
                        Gebouw: B.2 Amsterdam<br>
                        1066 EP Amsterdam<br>
                        E-mail: <a href="mailto:info@kandoor">info@kandoor.nl</a>
                    </p>
                </div>
                <div class="col-sm-6">
                    <h2>Volg ons</h2>
                    {% include './social-list.njk' %}
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    {% include './footer-menu.njk' %}
                    <p class="site-footer__copyright">&copy; 2019 APG Deelnemingen NV</p>
                </div>
            </div>
        </div>
    </div>
</footer>
Styles 
.site-footer {
    @include row-top(medium);

    background-color: $white;
    font-size: $font-size-tiny;
    @include bp-min($large) {
        font-size: $font-size-small;
    }
    @include bp-min($chat-module-switch) {
        @include row-bottom(medium);
    }
}
.site-footer__inner {
    width: 100%;
    @include bp-min($medium-large) {
        width: calc(100% - #{$collapsed-module-width});
    }
    @include bp-min($large) {
        width: 65%;
    }
}
.site-footer h2 {
    @include body-font-bold;
    margin: $gutter-small 0 $gutter-small; font-size: $font-size-small;

    @include bp-min($medium) {
        margin: 0 0 $gutter-small;
    }
}
.site-footer__row:last-child {
    margin-bottom: 0;
}
.site-footer__copyright {
    width: 100%;
    margin: 0; 
    color: $grey-medium;
    @include bp-max($chat-module-switch) {
        margin-bottom: $gutter-medium; padding: 0 0 $gutter-medium; 
        font-size: $font-size-tiny;
    }
}

Example(s)

Site Header

Site header with logo and menu

Source code

Markup 
<header class="site-header js-site-header" role="banner">
    <div class="container">
        <div class="row">
            <div class="col-md-12 site-header__inner ">
                <a class="site-header__logo" href="/home">
                    {% include './../../images/logo--kandoor.svg' %}
                </a>
                <a href="#menu-overlay" class="site-header__nav-toggle js-nav-toggle-open">
                    <span class="site-header__nav-label">Menu</span>
                    {% include './hamburger.njk' %}
                </a>
                {# Toggle aria-hidden attributes through JavaScript to hide duplicate content #}
                <div class="site-header__menu-container" aria-hidden="false">
                    {% include './site-menu.njk' %}
                </div>
            </div>
        </div>
    </div>
</header>
Styles 
.site-header {
    @include row(small); position: relative; z-index: 888;
    transition: none;
}
// Exception for styleguide viewing only
.styleguide .site-header {
    z-index: 0;
}
.site-header::before {
    content: '';
    z-index: -1;
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    background: url('/../images/blob--site-header.svg') no-repeat 50% 0 / 100% auto;
    width: 120%; height: 135px;
    @include bp-min(365) {
        background-position: 50% 100%;
    }
    @include bp-min($small) {
        width: 700px; height: 170px;
    }
    @include bp-min($medium) {
        width: 1000px; height: 210px;
    }
    @include bp-min($medium-large) {
        width: 1560px; height: 315px;
    }
}
.site-header--is-fixed {
    position: fixed; top: 0; width: 100%; z-index: 999;
    background: $yellow-dark;
    box-shadow: 0 0 10px rgba($black, .25);
    padding-top: $gutter-small; padding-bottom: $gutter-small;
    transition: padding .2s;
}
.site-header--is-fixed::before {
    content: none;
    transition: none;
}
.site-header__inner {
    display: flex; justify-content: space-between; align-items: center;
}
.site-header__logo {
    display: block; width: $logo-small-width; height: $logo-small-height;
    flex-shrink: 0;
    transform: translateY(8%); transform-origin: 0 50%; transition: transform .2s;
    @include bp-min($medium) {
        margin: 0;
        width: $logo-medium-width; height: $logo-medium-height;
    }
    @include bp-min($large) {
        width: $logo-large-width; height: $logo-large-height;
    }
}
.site-header--is-fixed .site-header__logo {
    transform: scale(.75) translateY(8%);
}
.site-header__nav-toggle {
    position: absolute; top: 50%; right: $gutter-medium;
    transform: translateY(-50%);
    display: flex;
    color: $tertiary-color; text-decoration: none; line-height: 1;
    @include bp-min($nav-switch) {
        display: none;
    }
}
.site-header__nav-label {
    display: inline-block; vertical-align: middle;
    margin-right: $gutter-small;
    font-size: $font-size-small;
}
// Exception for styleguide viewing only
.styleguide .site-header .nav-overlay {
    display: none;
}

Example(s)

Site Menu

Site menu, used within the site header

Source code

Markup 
<nav class="site-menu" role="navigation">
    <ul>
        <li class="site-menu__item"><a href="/">Over ons</a></li>
        <li class="site-menu__item"><a href="/">Hoe werkt het?</a></li>
        <li class="site-menu__item site-menu__item--active"><a href="/word-gids">Word gids</a></li>
        <li class="site-menu__item"><a href="/">Blog</a></li>
        <li class="site-menu__item"><a class="button button--primary" href="/">Log in</a></li>
    </ul>
</nav>
Styles 
.site-menu {
    .site-header__menu-container > & {
        display: none;
        @include bp-min($nav-switch) {
            display: block;
        }
    }
}
.site-menu > ul {
    @include bare-list;
}
.site-menu__item {
    display: inline-block;
    margin: 0 $gutter-large 0 0;
    @include bp-min($medium-large) {
        margin-right: $gutter-large * 1.6;
    }
}
.site-menu__item:last-child {
    margin: 0;
}
.site-menu__item > a {
    margin: 0;
    font-size: $font-size-small; font-weight: 600;
    text-decoration: none;
}

.site-menu__item > a:not(.button) {
    padding-bottom: 3px
}

.site-menu__item--active > a,
.site-menu__item > a:not(.button):hover,
.site-menu__item > a:not(.button):focus {
    border-bottom: 1px solid currentColor;
}

Example(s)

Social List

List of social network icons

Source code

Markup 
<ul class="social-list">
    <li class="social-list__item">
        <a href="https://www.facebook.com/Kandoor-197640267236356/">
            {% include './../../images/social--facebook.svg' %}
            <span>Volg ons op Facebook</span>
        </a>
    </li>
    <li class="social-list__item">
        <a href="https://twitter.com/kandoorNL">
            {% include './../../images/social--twitter.svg' %}
            <span>Volg ons op Twitter</span>
        </a>
    </li>
    <li class="social-list__item">
        <a href="https://www.linkedin.com/company/kandoor-nederland?trk=ppro_cprof">
            {% include './../../images/social--linkedin.svg' %}
            <span>Volg ons op LinkedIn</span>
        </a>
    </li>
</ul>
Styles 
.social-list {
    @include bare-list;
    margin: $gutter-medium 0;
}
.social-list__item {
    display: inline-block; vertical-align: middle;
    margin: 0;
}
.social-list__item:not(:last-child) {
    margin: 0 $gutter-small 0 0;
}
.social-list__item > a {
    position: relative;
    display: block; width: 40px; height: 40px;
    background: $tertiary-color;
    border-radius: 50%;
    transition: background-color .3s;
}
.social-list__item > a:hover,
.social-list__item > a:focus {
    background: lighten($tertiary-color, 5%);
}
.social-list__item > a > svg {
    position: absolute; top: 0; left: 0; bottom: 0; right: 0;
    fill: $white;
}
.social-list span {
    @include hide-text;
}

Example(s)

Table

Table

Source code

Markup 
<div class="table">
    <table class="table__element" role="grid" aria-labelledby="table-caption" aria-readonly="true">
        <caption id="table-caption">Deze tabel bevat informatie over ... </caption>
        <thead>
            <tr role="row">
                <th scope="col">
                    <button class="table__sort-button">Vraag</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Gids</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Gesteld op</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Rating</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 5</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 6</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 7</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 8</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 9</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 10</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 11</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 12</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 13</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 14</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 15</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 16</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 17</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 18</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 19</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 20</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 21</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 22</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 23</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 24</button>
                </th>
                <th scope="col">
                    <button class="table__sort-button">Kolom 25</button>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <span class="table__label">Hoeveel uur per maand moet ik werken wil ik meer verdienen dan WW?</span>
                </td>
                <td>Jim</td>
                <td>
                    <span class="table__date">8 jan 2019 om 9:49</span>
                </td>
                <td>
                    <figure class="rating">
                        <span class="rating__image">:-)</span>
                        <figcaption class="sr-only rating__description">Goed</figcaption>
                    </figure>
                </td>
                <td>Kolom 5</td>
                <td>Kolom 6</td>
                <td>Kolom 7</td>
                <td>Kolom 8</td>
                <td>Kolom 9</td>
                <td>Kolom 10</td>
                <td>Kolom 11</td>
                <td>Kolom 12</td>
                <td>Kolom 13</td>
                <td>Kolom 14</td>
                <td>Kolom 15</td>
                <td>Kolom 16</td>
                <td>Kolom 17</td>
                <td>Kolom 18</td>
                <td>Kolom 19</td>
                <td>Kolom 20</td>
                <td>Kolom 21</td>
                <td>Kolom 22</td>
                <td>Kolom 23</td>
                <td>Kolom 24</td>
                <td>
                    <a href="/" class="table__button button button--tertiary">Bekijk/waardeer</a>
                </td>
            </tr>
            <tr>
                <td>Waarom moet ik werken?</td>
                <td>Katie</td>
                <td>
                    <span class="table__date">8 jan 2019 om 9:49</span>
                </td>
                <td>
                    <figure class="rating">
                        <span class="rating__image">:-)</span>
                        <figcaption class="sr-only rating__description">Goed</figcaption>
                    </figure>
                </td>
                <td>Kolom 5</td>
                <td>Kolom 6</td>
                <td>Kolom 7</td>
                <td>Kolom 8</td>
                <td>Kolom 9</td>
                <td>Kolom 10</td>
                <td>Kolom 11</td>
                <td>Kolom 12</td>
                <td>Kolom 13</td>
                <td>Kolom 14</td>
                <td>Kolom 15</td>
                <td>Kolom 16</td>
                <td>Kolom 17</td>
                <td>Kolom 18</td>
                <td>Kolom 19</td>
                <td>Kolom 20</td>
                <td>Kolom 21</td>
                <td>Kolom 22</td>
                <td>Kolom 23</td>
                <td>Kolom 24</td>
                <td>
                    <a href="/" class="table__button button button--tertiary">Bekijk/waardeer</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="table__label">Wanneer krijg ik AOW?</span>
                </td>
                <td>Jim</td>
                <td>
                    <span class="table__date">8 jan 2019 om 9:49</span>
                </td>
                <td>
                    <figure class="rating">
                        <span class="rating__image">:-)</span>
                        <figcaption class="sr-only rating__description">Goed</figcaption>
                    </figure>
                </td>
                <td>Kolom 5</td>
                <td>Kolom 6</td>
                <td>Kolom 7</td>
                <td>Kolom 8</td>
                <td>Kolom 9</td>
                <td>Kolom 10</td>
                <td>Kolom 11</td>
                <td>Kolom 12</td>
                <td>Kolom 13</td>
                <td>Kolom 14</td>
                <td>Kolom 15</td>
                <td>Kolom 16</td>
                <td>Kolom 17</td>
                <td>Kolom 18</td>
                <td>Kolom 19</td>
                <td>Kolom 20</td>
                <td>Kolom 21</td>
                <td>Kolom 22</td>
                <td>Kolom 23</td>
                <td>Kolom 24</td>
                <td>
                    <a href="/" class="table__button button button--tertiary">Bekijk/waardeer</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="table__label">Hoeveel pensioen heb ik opgebouwd?</span>
                </td>
                <td>Anique</td>
                <td>8 jan 2019 om 9:49</td>
                <td>
                    <figure class="rating">
                        <span class="rating__image">:-)</span>
                        <figcaption class="sr-only rating__description">Goed</figcaption>
                    </figure>
                </td>
                <td>Kolom 5</td>
                <td>Kolom 6</td>
                <td>Kolom 7</td>
                <td>Kolom 8</td>
                <td>Kolom 9</td>
                <td>Kolom 10</td>
                <td>Kolom 11</td>
                <td>Kolom 12</td>
                <td>Kolom 13</td>
                <td>Kolom 14</td>
                <td>Kolom 15</td>
                <td>Kolom 16</td>
                <td>Kolom 17</td>
                <td>Kolom 18</td>
                <td>Kolom 19</td>
                <td>Kolom 20</td>
                <td>Kolom 21</td>
                <td>Kolom 22</td>
                <td>Kolom 23</td>
                <td>Kolom 24</td>
                <td>
                    <a href="/" class="table__button button button--tertiary">Bekijk/waardeer</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
Styles 
.table {
    width: 100%; overflow-x: auto;
}
.table__element {
    max-width: 100%; border-collapse: collapse;
}
.table caption {
    @include hide-text;
}
.table th,
.table td {
    vertical-align: top;
    padding: $table-cell-padding-small;
    text-align: left; line-height: 1.2;
    @include bp-min($medium) {
        padding: $table-cell-padding-medium;
    }
}
.table th {
    background: $yellow-dark;
}
.table th:first-child {
    border-radius: $border-radius 0 0 0;
}
.table th:last-child {
    border-radius: 0 $border-radius 0 0;
}
.table tr:nth-child(odd) {
    background: $white;
}
.table tr:nth-child(even) {
    background: $grey-lighter;
}
.table__sort-button {
    @include bare-button;
    white-space: nowrap;
    color: $text-color;
}
.table__sort-button::after {
    content: '';
    display: inline-block; vertical-align: middle;
    width: 8px; height: 18px;
    margin-left: $gutter-small;
    background: url('/images/icons/sort.svg') no-repeat 50% 50% / contain;
    @include bp-min($medium) {
        width: 10px; height: 23px;
    }
}
.table__button {
    margin: 0;
}
.table__label {
    display: block; width: 270px;
}
.table__date {
    display: block; width: 180px;
}

Example(s)

Deze tabel bevat informatie over ...
Hoeveel uur per maand moet ik werken wil ik meer verdienen dan WW? Jim 8 jan 2019 om 9:49
:-)
Goed
 Kolom 5 Kolom 6 Kolom 7 Kolom 8 Kolom 9 Kolom 10 Kolom 11 Kolom 12 Kolom 13 Kolom 14 Kolom 15 Kolom 16 Kolom 17 Kolom 18 Kolom 19 Kolom 20 Kolom 21 Kolom 22 Kolom 23 Kolom 24 Bekijk/waardeer
Waarom moet ik werken? Katie 8 jan 2019 om 9:49
:-)
Goed
 Kolom 5 Kolom 6 Kolom 7 Kolom 8 Kolom 9 Kolom 10 Kolom 11 Kolom 12 Kolom 13 Kolom 14 Kolom 15 Kolom 16 Kolom 17 Kolom 18 Kolom 19 Kolom 20 Kolom 21 Kolom 22 Kolom 23 Kolom 24 Bekijk/waardeer
Wanneer krijg ik AOW? Jim 8 jan 2019 om 9:49
:-)
Goed
 Kolom 5 Kolom 6 Kolom 7 Kolom 8 Kolom 9 Kolom 10 Kolom 11 Kolom 12 Kolom 13 Kolom 14 Kolom 15 Kolom 16 Kolom 17 Kolom 18 Kolom 19 Kolom 20 Kolom 21 Kolom 22 Kolom 23 Kolom 24 Bekijk/waardeer
Hoeveel pensioen heb ik opgebouwd? Anique 8 jan 2019 om 9:49
:-)
Goed
 Kolom 5 Kolom 6 Kolom 7 Kolom 8 Kolom 9 Kolom 10 Kolom 11 Kolom 12 Kolom 13 Kolom 14 Kolom 15 Kolom 16 Kolom 17 Kolom 18 Kolom 19 Kolom 20 Kolom 21 Kolom 22 Kolom 23 Kolom 24 Bekijk/waardeer

Testimonials

Testimonials, uses the avatar module

Source code

Markup 
{% import "./avatar.njk" as avatar %}

<div class="testimonials">
    <div class="testimonials__inner ">
        <div class="container">
            <ul class="testimonials__list row">
                <li class="testimonial col-lg-4">
                    <div class="testimonial__image">
                    {{ avatar.avatar
                        (
                        size='huge',
                        type="photo",
                        image="avatar--84x84.jpg",
                        class="avatar-group__avatar",
                        modifier="avatar--is-circle avatar--has-border"
                        )
                    }}
                    </div>
                    <blockquote class="testimonial__quote">
                        “Het leuke van Kandoor is dat je een beeld krijgt van vragen waar mensen mee zitten. Het geeft waardevolle inzichten.”
                        <cite>Gids Ernst</cite>
                    </blockquote>
                </li>
                <li class="testimonial col-lg-4">
                    <div class="testimonial__image">
                    {{ avatar.avatar
                        (
                        size='huge',
                        type="photo",
                        image="avatar--84x84.jpg",
                        class="avatar-group__avatar",
                        modifier="avatar--is-circle avatar--has-border"
                        )
                    }}
                    </div>
                    <blockquote class="testimonial__quote">
                        “Mijn kennis dank ik aan de mensen die hun kennis met mij hebben gedeeld. Via Kandoor kan ik mijn kennis delen.”
                        <cite>Gids Emile</cite>
                    </blockquote>
                </li>
                <li class="testimonial col-lg-4">
                    <div class="testimonial__image">
                    {{ avatar.avatar
                        (
                        size='huge',
                        type="photo",
                        image="avatar--84x84.jpg",
                        class="avatar-group__avatar",
                        modifier="avatar--is-circle avatar--has-border"
                        )
                    }}
                    </div>
                    <blockquote class="testimonial__quote">
                        “Het is zo belangrijk om je financiën op orde te hebben. Juist als je niet thuis bent in de financiële wereld.”
                        <cite>Gids Daniëlle</cite>
                    </blockquote>
                </li>
            </ul>
        </div>
    </div>
</div>
Styles 
.testimonials {
    @include smooth-scrolling;
    position: relative; overflow-x: auto;
    padding-top: $avatar-size-large / 2;
    @include bp-min($large) {
        padding-top: $avatar-size-huge / 2;
    }
}
.testimonials__inner {
    @include row-bottom(medium);
    width: $testimonial-min-width * $testimonial-amount;
    background-color: $tertiary-color;
    @include bp-min($small) {
        width: calc((#{$testimonial-min-width} * #{$testimonial-amount}) + (#{$gutter-large} * 2));
    }
    @include bp-min($medium) {
        width: 100%; min-width: $site-width-large;
    }
}
.testimonials__inner > .container {
    display: flex; justify-content: flex-start;
    width: inherit; min-width: inherit;
    @include bp-max($medium) {
        padding-left: 0; padding-right: 0;
    }
    @include bp-max($large) {
        max-width: none;
    }
    @include bp-min($large) {
        justify-content: center;
    }
}
.testimonials__list {
    @include clearfix; @include bare-list;
    white-space: nowrap;
    @include bp-min($large) {
        width: calc(100% + #{$gutter-large});
        margin-left: -($gutter-large / 2); margin-right: -($gutter-large / 2);
    }
}

Example(s)

  • “Het leuke van Kandoor is dat je een beeld krijgt van vragen waar mensen mee zitten. Het geeft waardevolle inzichten.” Gids Ernst
  • “Mijn kennis dank ik aan de mensen die hun kennis met mij hebben gedeeld. Via Kandoor kan ik mijn kennis delen.” Gids Emile
  • “Het is zo belangrijk om je financiën op orde te hebben. Juist als je niet thuis bent in de financiële wereld.” Gids Daniëlle

USP's Block

USP's block

Source code

Markup 
<div class="usps-block container">
    <ul class="usps-block__list row">
        <li class="col-sm-4 usp-item">
            <figure class="usp-item__image">
                <img src="/images/icon--question.png" alt="">
            </figure>
            <h3 class="usp-item__title">Stel je vraag</h3>
            <p class="usp-item__description">Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.</p>
            <footer>54.048 vragen beantwoord</footer>
        </li>
        <li class="col-sm-4 usp-item">
            <figure class="usp-item__image">
                <img src="/images/icon--search.png" alt="">
            </figure>
            <h3 class="usp-item__title">Wij vinden een gids</h3>
            <p class="usp-item__description">Er is altijd iemand die je verder kan helpen met een iets ingewikkelder vraag. Wij zoeken snel de juiste persoon.</p>
            <footer>220 actieve gidsen</footer>
        </li>
        <li class="col-sm-4 usp-item">
            <figure class="usp-item__image">
                <img src="/images/icon--time.png" alt="">
            </figure>
            <h3 class="usp-item__title">Snel en duidelijk antwoord</h3>
            <p class="usp-item__description">Je gids geeft schriftelijk antwoord op je vraag, meestal al binnen één dag. Nog niet helemaal duidelijk? Praat je gewoon even verder.</p>
            <footer>8,9/10 klant ervaring</footer>
        </li>
    </ul>
</div>
Styles 
.usps-block {
    @include row(medium);
}
.usps-block__list {
    padding: 0; list-style: none;
    @include bp-min($medium) {
        display: flex;
    }
}

Example(s)

  • Stel je vraag

    Over pensioen, lijfrente, geld opzij zetten, belasting… Domme vragen bestaan niet. Makkelijke wel, en die worden direct beantwoord door onze bot.

    54.048 vragen beantwoord

  • Wij vinden een gids

    Er is altijd iemand die je verder kan helpen met een iets ingewikkelder vraag. Wij zoeken snel de juiste persoon.

    220 actieve gidsen

  • Snel en duidelijk antwoord

    Je gids geeft schriftelijk antwoord op je vraag, meestal al binnen één dag. Nog niet helemaal duidelijk? Praat je gewoon even verder.

    8,9/10 klant ervaring

Video Block

Responsive video embed

Source code

Markup 
<div class="video-block container">
    <div class="video-block__inner row">
        <div class="col-sm-12 col-lg-8 offset-lg-2">
            <figure>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/4AYLhx-fhDM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </figure>
        </div>
    </div>
</div>
Styles 
.video-block {
    @include row(medium);
}
.video-block figure {
    position: relative;
    width: 100%; height: 0;
    background: $blue-light;
    padding-bottom: 56.25%; // 16:9 aspect ratio;
}
.video-block embed,
.video-block iframe {
    position: absolute; width: 100%; height: 100%;
}

Example(s)