UI Components style guide

ColorsIconsCSS componentsVue components

Colors

$yellow
#fdd753
$dark-yellow
#daaa00
$light-yellow
#fff7dd
$red
#d96464
$light-grey
#f7f7f7
$blue
#229ac9
$green
#20c267
$black
#1d1d1b
$white
#ffffff
$light-purple
#f6f5fa

Icons

Use as CSS background-image like this:

+cdn-background-image("icons/xxxxx.svg")

or as inline HTML image like this:

<img :src="$root.x.cdnPath + '/icons/xxxxx.svg'" />

add-white.svg

add.svg

alert-error-red.svg

alert-error.svg

alert-info.svg

alert-success.svg

apple.svg

attachment.svg

calendar.svg

camera-white.svg

camera.svg

chat-bubble-new-white.svg

chat-bubble-white.svg

checkmark-green.svg

checkmark-white.svg

checkmark.svg

chevron-down-circle.svg

chevron-down.svg

chevron-left.svg

chevron-right.svg

chevron-white-left.svg

chevron-white-right.svg

classes.svg

close-button.svg

close.svg

clusters.svg

courses.svg

crop.svg

dropdown-arrow-lighter.svg

dropdown-arrow.svg

edit.svg

export.svg

facebook.svg

flip-h-white.svg

flip-v-white.svg

hamburger.svg

image.svg

linked-in.svg

loader.svg

microphone.svg

notification-check.svg

notification-error.svg

notification-info-black.svg

notification-info.svg

paperclip-black.svg

pencil.svg

plus.svg

quick-reply.svg

recording-stop.svg

reply.svg

rotate-ccw-white.svg

rotate-cw-white.svg

search.svg

send-message.svg

spinner-black.svg

spinner-white.svg

t-m-black.svg

t-m-white.svg

tests-black.svg

tests-inactive.svg

tests.svg

three-dots.svg

trash-can.svg

upload.svg

CSS components

Buttons

<button class="c-button --primary">
    Primary button
</button>

Primary button with loader:

<button disabled class="c-button --primary --loading">
    Primary button (with loading indicator)
</button>
<button class="c-button --primary --small">
    Primary button (small)
</button>

Primary button (small) with loader:

<button disabled class="c-button --primary --small --loading">
    Primary button (with loading indicator)
</button>
<button class="c-button --primary --full-width">
    Primary button (full-width)
</button>
<button class="c-button --primary" disabled>
    Primary button (disabled)
</button>
<button class="c-button --primary --with-icon">
    <img src="/ui-components/img/emojis/🚀.png">
    Primary button (with icon)
</button>
<button class="c-button --primary-inverted">
    Primary button (inverted)
</button>
<button class="c-button --secondary">
    Secondary button
</button>

Secondary button with loader:

<button disabled class="c-button --secondary --loading">
    Secondary button (disabled)
</button>
<button class="c-button --secondary" disabled>
    Secondary button (disabled)
</button>
<button class="c-button">
    Text button
</button>

Icon button primary:

<button class="c-button --primary --round-icon-button">
    <img src="ui-components/img/icons/chevron-white-right.svg" />
</button>

Icon button secondary:

<button class="c-button --secondary --round-icon-button">
    <img src="ui-components/img/icons/chevron-right.svg" />
</button>

Button group:

<div class="c-button-group">
    <button class="c-button --secondary">Link</button>
    <button class="c-button --secondary">Link</button>
    <button class="c-button --secondary">Link</button>
    <button class="c-button --secondary">Link</button>
    <button class="c-button --secondary">Link</button>
</div>

Card

White card with padding

A card can contain any kind of generic content. 

<div class="c-card --box-bg --with-padding">
    <h2 class="c-heading u-mb">White card with padding</h2>

    <p>
        A card can contain any kind of generic content.
    </p>
</div>

Yellow card with padding

A card can contain any kind of generic content. 

<div class="c-card --yellow-bg --with-padding">
    <h2 class="c-heading u-mb">Yellow card with padding</h2>

    <p>
        A card can contain any kind of generic content.
    </p>
</div>

White card (with large padding)

A card can contain any kind of generic content. 

<div class="c-card --box-bg --with-large-padding">
    <h2 class="c-heading u-mb">White card (with large padding)</h2>

    <p>
        A card can contain any kind of generic content.
    </p>
</div>

White card (with box shadow)

This card has a very subtle box-shadow 

<div class="c-card --box-bg --with-padding --with-box-shadow">
    <h2 class="c-heading u-mb">White card (with box shadow)</h2>

    <p>
        This card has a very subtle box-shadow
    </p>
</div>

Chat bubble component

Gefeliciteerd!

<p class="c-chat-bubble --black">Gefeliciteerd!</p>

Je hebt het target van fase 1 gehaald! 👏

<p class="c-chat-bubble --yellow">Je hebt het target van fase 1 gehaald! 👏</p>

We gaan door naar fase 2!

<p class="c-chat-bubble --grey">We gaan door naar fase 2!</p>

Chat status indicator component

Chat met Wouter

<div class="c-chat-status-indicator">
    <p class="--handover">Chat met Wouter</p>
</div>

Nieuwe berichten

<div class="c-chat-status-indicator">
    <p class="--new-messages">Nieuwe berichten</p>
</div>

Headings

Small heading 20px

<h2 class="c-heading --small">Small heading 20px</h2>

Medium-sized heading 24px

<h2 class="c-heading --medium">Medium-sized heading 24px</h2>

Medium-sized heading 24px (bolder)

<h2 class="c-heading --medium --bolder">Medium-sized heading 24px (bolder)</h2>

Large heading 30px

<h2 class="c-heading --large">Large heading 30px</h2>

Large heading 30px (bolder)

<h2 class="c-heading --large --bolder">Large heading 30px (bolder)</h2>

XL heading 36px

<h2 class="c-heading --xl">XL heading 36px</h2>

XL heading 36px (bolder)

<h2 class="c-heading --xl --bolder">XL heading 36px (bolder)</h2>

XXL heading 50px

<h2 class="c-heading --xxl">XXL heading 50px</h2>

XXL heading 50px (bolder)

<h2 class="c-heading --xxl --bolder">XXL heading 50px (bolder)</h2>

Select box

<div class="c-select">
    <select>
        <option>2hvb</option>
        <option>1vwo</option>
        <option>vm2a</option>
    </select>
</div>

Toggle input

<div class="c-toggle-input">
    <input
        type="checkbox"
        id="example"
    >
    <label for="example"></label>
</div>

On/off indicator

  • Rey McDermott
  • Keara Feil
  • Karianne Lynch
  • Matt Gorczany

Neil Bode

<ul>
    <li class="c-on-off-indicator --on">Rey McDermott</li>
    <li class="c-on-off-indicator --on">Keara Feil</li>
    <li class="c-on-off-indicator --off">Karianne Lynch</li>
    <li class="c-on-off-indicator --off">Matt Gorczany</li>
</ul>

<p class="c-on-off-indicator --off">Neil Bode</p>

Links

A link with underline 
<a href="#" class="c-link --underline">
    A link with underline
</a>
A link with a small font-size 
<a href="#" class="c-link --small">
    A link with a small font-size
</a>

Inputs

<label class="c-label">
    Input label
</label>
<input
    class="c-input"
    type="text"
    placeholder="Input field"
/>
<input type="text" class="c-input --search --small" />
<input type="text" class="c-input --reset --small" />
<input
    class="c-input --error"
    type="text"
    placeholder="Input error state"
/>
<textarea class="c-input"></textarea>
<div class="l-input-button-wrapper">
    <input class="c-input" type="text" />
    <button class="c-button --primary">Verzenden</button>
</div>

Paragraph component

Lorem, ipsum dolor sit, amet consectetur adipisicing elit. Dolor soluta, culpa dicta ipsa vero ad eius sed iusto animi nobis nam quis ab temporibus ipsam voluptate nesciunt earum quod ex! 

<p class="c-p">
    Lorem, ipsum dolor sit, amet consectetur adipisicing elit. Dolor
    soluta, culpa dicta ipsa vero ad eius sed iusto animi nobis nam
    quis ab temporibus ipsam voluptate nesciunt earum quod ex!
</p>

Lorem, ipsum dolor sit, amet consectetur adipisicing elit. Dolor soluta, culpa dicta ipsa vero ad eius sed iusto animi nobis nam quis ab temporibus ipsam voluptate nesciunt earum quod ex! 

<p class="c-p --small">
    Lorem, ipsum dolor sit, amet consectetur adipisicing elit. Dolor
    soluta, culpa dicta ipsa vero ad eius sed iusto animi nobis nam
    quis ab temporibus ipsam voluptate nesciunt earum quod ex!
</p>

Lorem, ipsum dolor sit, amet consectetur adipisicing elit. Dolor soluta, culpa dicta ipsa vero ad eius sed iusto animi nobis nam quis ab temporibus ipsam voluptate nesciunt earum quod ex! 

<p class="c-p --error">
    Lorem, ipsum dolor sit, amet consectetur adipisicing elit. Dolor
    soluta, culpa dicta ipsa vero ad eius sed iusto animi nobis nam
    quis ab temporibus ipsam voluptate nesciunt earum quod ex!
</p>

Table component

Heading 0.1 Heading 0.2 Heading 0.3
Table cell 1.1 Table cell 1.2 Table cell 1.3
Table cell 2.1 Table cell 2.2 Table cell 2.3 
<table class="c-table">
    <tr>
        <th>Heading 0.1</th>
        <th>Heading 0.2</th>
        <th>Heading 0.3</th>
    </tr>
    <tr>
        <td>Table cell 1.1</td>
        <td>Table cell 1.2</td>
        <td>Table cell 1.3</td>
    </tr>
    <tr>
        <td>Table cell 2.1</td>
        <td>Table cell 2.2</td>
        <td>Table cell 2.3</td>
    </tr>
</table>

Vue components

FAQ component

FAQ 1
FAQ 2

This component has one prop, called faq, this contains an object that has a `title` object and a `paragraphs` array. 

<McFaq :faq="faq" />
<McFaq :faq="faq" />

Single-select autocomplete search input 

<mc-single-complete
                    @select="onSinglecompleteSelect"
                    :items="schools"
                    placeholder="Zoeken"
                    v-if="!isLoading"
                /> 
data() {
    return {
        autocompleteSelection: [],
    }
},
methods: {
    onAutocompleteSelect(value) {
        this.autocompleteSelection.push(value)
    },
},

Your selection: []

Multi-select autocomplete search input

  • Emily-Jane Crouch
  • Sonya Underwood
  • Jasmin Peck
  • Katerina Nava
  • Kaitlyn Morley
  • Sapphire Dougherty
  • Albert Woolley
  • Haniya Wyatt
  • Ailish Marquez
  • Daphne Morse
<mc-autocomplete
    @select="onAutocompleteSelect"
    :items="someArray"
    placeholder="Zoeken"
    :init-select-open="false"
    :keep-select-open="false"
    :show-search-icon="true"
    :number-of-columns="3"
    :multiple="true"
    :init-selected-items="arrayWithSelectedValuesOnInit"
/>

All props are optional, except "items". "init-selected-items" can be used to set values in the "items" array on initialization, when the mcAutoComplete is used for "update" features, with already saved selections.

When an option is selected, the value is being sent to the parent through an emit event. In the parent, you can use an "onAutocompleteSelect()" method to do something with the selected value, like this for example: 

data() {
    return {
        autocompleteSelection: [],
    }
},
methods: {
    onAutocompleteSelect(value) {
        this.autocompleteSelection.push(value)
    },
    onAutocompleteUnselect(i) {
        this.autocompleteSelection.splice(i, 1)
    },
},

Change password

<mc-set-password
    @setnewpassword="password = $event"
/>
<mc-set-password
    new-password
    @setnewpassword="password = $event"
/>

Alerts

v1 (for projects that use Vuex)

Required properties:

alertType: info, success or error
text: Any string

If you don't pass on a closable or duration property, it will use the defaults, which are:

closable: true
duration: 5000 

<button
    class="c-button --primary"
    @click="
        $store.commit({
            type: "addAlert",
            text:
                "This is a closable info alert with a duration of 5 seconds, with a custom (emoji) icon",
            alertType: "info",
            image: "/ui-components/img/emojis/😍.png",
        })
    ">
    Click to trigger an info alert
</button>
<button
    class="c-button --primary"
    @click="
        $store.commit({
            type: "addAlert",
            text:
                "This is a closable success alert with a duration of 10 seconds",
            alertType: "success",
            duration: 10000,
        })
    ">
    Click to trigger a 10 second success alert
</button>
<button
    class="c-button --primary"
    @click="
        $store.commit({
            type: "addAlert",
            text:
                "This is a non-closable error alert with a duration of 5 seconds",
            alertType: "error",
            closable: false,
        })
    ">
    Click to trigger an error alert
</button>
<button
    class="c-button --primary"
    @click="
        $store.commit({
            type: "addAlert",
            title: "Undefined error",
            text:
                "This is a closable error alert which does not close automatically",
            alertType: "error",
            closable: true,
            infiniteDuration: true,
        })
    ">
    Click to trigger an error alert
</button>

v2 (for projects that use Pinia)

Required properties:

message: Any string
type: "success" | "error"
closable: boolean

duration is set to 5000 (5 seconds) 

<script lang="ts" setup>
import { useAlertStore } from "@/assets/ui-components/pinia-stores/alert" 

const alert = useAlertStore()
</script>

<template>
    <button
        class="c-button --primary"
        @click="
            alert.show("This is a generic error alert", "error", true)
        "
    >
        Show generic error alert
    </button>
</template>

Modal

A reusable modal component, with a few different options (done with props) for size and padding. If you don't pass a "size" prop, it will take 90% of the width of the body. 

<mc-modal>
    <template #trigger>
        (HTML for the trigger (link/button) here)
    </template>

    (HTML for the content of the modal here)
</mc-modal>
<mc-modal padding>
    <template #trigger>
        (HTML for the trigger (link/button) here)
    </template>

    (HTML for the content of the modal here)
</mc-modal>
<mc-modal padding size="small">
    <template #trigger>
        (HTML for the trigger (link/button) here)
    </template>

    (HTML for the content of the modal here)

</mc-modal>
<mc-modal padding size="large">
    <template #trigger>
        (HTML for the trigger (link/button) here)
    </template>

    (HTML for the content of the modal here)

</mc-modal>

Checkbox

<mc-checkbox
    label="Checkbox label"
    name="checkbox-name"
/>
<mc-checkbox
    label="Checkbox label2"
    name="checkbox-name2"
/>

Tooltip

Tooltip with icon (default)

i
Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
<mc-tooltip>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</mc-tooltip>

Tooltip on the bottom

i
Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
<mc-tooltip bottom>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</mc-tooltip>

Tooltip with a different generic trigger

Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
<mc-tooltip>
    <template #trigger>
        <button class="c-button --primary">
            Hover over me to see a tooltip with a custom trigger
        </button>
    </template>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</mc-tooltip>

Mr. Chadd maakt gebruik van cookies om de functionaliteit te waarborgen.