Style Guide

Project Guidelines

Release notes

QUANTUMS

Logos

Spacing

Colors

Typography

Border Radius

Shadows

ATOMS

Checkbox

Icons

Input

Links

Radio Button

Select

Toggle

MOLECULES

Buttons

Banners

Skeleton Loaders

Chips

Dropdown

ORGANISM

Tables

Details / Summary

Dialog

Menu

Tile

Segmented Control

Nav

Van Lanschot Kempen Style guide

The aim of this project is to provide a ready-to-use style guide for Van Lanschot Kempen in the form of a single CSS file

With this file, you can build upon basic HTML elements.

Or can be installed as npm package.

---

Project Guidelines

• Style guide only contains HTML and CSS components
• DoD for new additions to the style guide are:
  • No 3rd party dependencies introduced
  • all states & variations are included
  • devices that are supported are: Desktop / laptop / tablet / mobile
  • code (toggle) is included
  • guidance is included on when and how to apply element / component in a platform
  • One Dev per team that uses the shared style guide should have reviewed
  • UX-team should have approved
• A glossary / list with terms of definitions is added (f.e.; style guide, design system)
• Link to figma 'ready' items / 'brand as one' is added
• List of work / to-do's for MVL & VLK IM is added
• List the teams that are 'on board'; UX, O.A., MVL, VLK IM, CIA.

---

Release Notes

5.11.0

• Add new 'Signal' colors
• Add new 'Kom verder' color
• Fix 'Kom verder' color order

5.10.0

• Remove Header margins

5.9.1

• Fix 'Kom verder' color bug

5.9.0

• Add 'Kom verder' brand colors

5.8.1

• Updated pipeline and bumped version

5.8.0

• Add segmented control disabled state

5.7.0

• Add button small size

5.6.0

• Add drop down menu background color

5.5.0

• Adjusted menu paddings, added small menu option.

5.4.1

• Remove border of chip in selected state

5.4.0

• Change background color of selected chip

5.3.0

• Added segmented control

5.2.2

• Add new signal color

5.2.1

• Update azure tags

5.2.0

• Fixed collapsible table icon direction
• Updated menu
• Added tinted table

5.1.1

• Make the chart colors usable

5.1.0

• Updated chart colors
• Added chart hover colors

5.0.0

• Removed styling of default elements: button, input, menu, dialog.
• New classes added .vlk-button, .vlk-menu, .vlk-dialog, .vlk-input-radio, .vlk-input, .vlk-select

Migration:

Old: <button></button> New: <button class="vlk-button"></button>
Old: <menu class="left"></menu> New: <menu class="vlk-menu"></menu>
Old: <dialog></dialog> New: <dialog class="vlk-dialog"></dialog>
Old: <input type="radio" /> New: <input type="radio" class="vlk-input-radio" />
Old: <input type="text" /> New: <input type="text" class="vlk-input" />
Old: <select /> New: <select class="vlk-select" />
Old: <ol /> New: <ol class="vlk-list" />
Old: <ul /> New: <ul class="vlk-list" />

4.12.0

• Add new cloud-download icon

4.11.0

• Update table row sizes
• Add header tint style

4.10.0

• Add double-chevron-forward-outline icon

4.9.2

• Use relative urls for fonts and icons

4.9.1

• Tag gulp-svgmin as dev dependency

4.9.0

• Added collapsible table

4.8.3

• Added new icon for account

4.8.2

• Small toggle alignments

4.8.1

• Ensure text remains visible during webfont load

4.8.0

• Add new transfer icon
• Update action button styles to reflect Marvel

4.7.2

• Replace gulp-svgo package with gulp-svgmin to fix vulnerability

4.7.1

• Reduce gap between Image/Text and Chevron in dropdown

4.7.0

• Added drop down menu

4.6.1

• Added selected background color (see select chip)

4.6.0

• Changed the 'link' tile. Interactive tiles should have a navigation border as default and no shadow.
• Increased the padding of the tile to 16px

4.5.0

• Added xsmall skeleton loader and the .round css option to fully round the borders.

4.4.1

• Toggle color fix

4.4.0

• Added filter chips

4.3.0

• Added chips

4.2.0

• Added a feedback icon and the ability to search for an icon.

4.1.0

• Added Mercier logo

4.0.0

Introduced SCSS variables for colors. See styleguide/_variables.scss file

Information colors has more contrast.

CSS variables removed:

• --colors-brand-vanilla
• --vlk-bg-body
• --colors-utility-signal-green-hover
• --vlk-error-hover
• --vlk-error-focus-outline
• --vlk-link
• --vlk-link-visited
• --colors-brand-light-petrol-200-20
• --colors-brand-light-petrol-100-50
• --colors-brand-light-petrol-100-20
• --vlk-visited

Improved:

• Checkbox checked via label in documentation

3.0.1

• Align plain button with marvel

3.0.0

• Automatically set right icon on banners by applying the class.
• Simplified by reducing the amount of elements needed.
• Swapped the error / warning icon

2.0.4

• Remove the brand petrol color for label elements

2.0.3

• Fix spacing and background colour on table headers

2.0.2

• Add Border Radius as part of the Quantum Design

2.0.1

• Added shadows

2.0.0

• Updated colors and typography. Some colors are removed leading to a breaking change

1.0.12

• Radiobutton styling now with CSS

1.0.11

• Added Checkbox

1.0.10

• Added VLK logo

1.0.9

• Buttons in menu now have navigation color
• Removed web components
• Decline button now a destructive button

1.0.8

• Added button guidelines

1.0.7

• Aligned button styles with Marvel

1.0.6

Restructured components to Atomic Design

1.0.5

• Fix brand color list
• Fix primary button disabled color

1.0.4

Move the circle within small toggle by 1 pixel in x

1.0.3

Add relative . to icon path

1.0.2

Fixed relative path to icons

1.0.1

Removed hardcoded version number from source (Gulpfile), not needed anymore when using an npm package

1.0.0

Published to Azure DevOps NPM repository

---

Brand Logos

<img class="logo" src="assets/images/vlk-logo.svg" />

---

<img class="logo" src="assets/images/mv-logo.svg" />

---

Spacing

For spacing (margin / padding / width / height), use multiples of 8px for consistency and to make sure that layouts scale well.

---

Brand Colors

• Petrol
• Light petrol
• Navy
• Ochre
• Chocolate
• Rose
• Dark rose
• Blue gray

CSS variables:

color: var(--colors-brand-petrol);
color: var(--colors-brand-light-petrol);
color: var(--colors-brand-navy);
color: var(--colors-brand-ochre);
color: var(--colors-brand-chocolate);
color: var(--colors-brand-rose);
color: var(--colors-brand-dark-rose);
color: var(--colors-brand-bluegray);

Or with SCSS variables:

color: map-get($colors-brand, "petrol");
color: map-get($colors-brand, "light-petrol");
color: map-get($colors-brand, "navy");
color: map-get($colors-brand, "ochre");
color: map-get($colors-brand, "chocolate");
color: map-get($colors-brand, "rose");
color: map-get($colors-brand, "dark-rose");
color: map-get($colors-brand, "blue-gray");

Signal Colors

• Red
• Neutral
• Red orange
• Light Green
• Ivory
• Orange
• Green
• Blue

color: map-get($colors-signal, "red");
color: map-get($colors-signal, "neutral");
color: map-get($colors-signal, "red-orange");
color: map-get($colors-signal, "light-green");
color: map-get($colors-signal, "ivory");
color: map-get($colors-signal, "orange");
color: map-get($colors-signal, "green");
color: map-get($colors-signal, "blue");

Interface Colors

• Rich black
• Navigation
• Action
• Neutral
• Negative
• Success
• Warning
• Error
• Information
• Visited

color: map-get($colors-interface, "rich-black");
color: map-get($colors-interface, "navigation");
color: map-get($colors-interface, "action");
color: map-get($colors-interface, "neutral");
color: map-get($colors-interface, "negative");
color: map-get($colors-interface, "success");
color: map-get($colors-interface, "warning");
color: map-get($colors-interface, "error");
color: map-get($colors-interface, "information");
color: map-get($colors-interface, "visited");

Color Shades example: Petrol

• Petrol 200
• Petrol 400
• Petrol
• Petrol 600
• Petrol 800

color: var(--colors-brand-petrol-200);
color: var(--colors-brand-petrol-400);
color: var(--colors-brand-petrol);
color: var(--colors-brand-petrol-600);
color: var(--colors-brand-petrol-800);

Interface Color Shades example: Gray

• Gray 50
• Gray 100
• Gray 150
• Gray 200
• Gray 250
• Gray 300
• Gray 400
• Gray 500
• Gray 600
• Gray 700
• Gray 800
• Gray 900

color: var(--colors-interface-gray-50);
color: var(--colors-interface-gray-100);
color: var(--colors-interface-gray-150);
color: var(--colors-interface-gray-200);
color: var(--colors-interface-gray-250);
color: var(--colors-interface-gray-300);
color: var(--colors-interface-gray-400);
color: var(--colors-interface-gray-500);
color: var(--colors-interface-gray-600);
color: var(--colors-interface-gray-700);
color: var(--colors-interface-gray-800);
color: var(--colors-interface-gray-900);

Chart Colors

Usage of colors:

• Pie Chart - The biggest 'chunk' will have color 1 (Light Petrol), next color 2 and so on as defined from left to right below.
• Bar Chart - Same order of priority for color as pie-chart
• Line Chart - Light Petrol should be used

• Light Petrol
• Navy
• Ochre
• Chocolate
• Rose
• Aqua Blue
• Petrol
• Rose Quartz
• Amber Brown
• Deep Sea Blue
• Blue Gray

color: var(--colors-brand-light-petrol);
color: var(--colors-brand-navy);
color: var(--colors-brand-ochre);
color: var(--colors-brand-chocolate);
color: var(--colors-brand-rose);
color: var(--colors-brand-aqua-blue);
color: var(--colors-brand-petrol);
color: var(--colors-brand-rose-quartz);
color: var(--colors-brand-amber-brown);
color: var(--colors-brand-deep-sea-blue);
color: var(--colors-brand-blue-gray);

Chart Hover Colors

• Dark Petrol
• Dark Navy
• Dark Ochre
• Dark Chocolate
• Deep Rose
• Teal Blue
• Dark Teal
• Burgundy
• Rustic-brown
• Deep Teal
• Steel Blue

color: var(--colors-brand-dark-petrol);
color: var(--colors-brand-dark-navy);
color: var(--colors-brand-dark-ochre);
color: var(--colors-brand-dark-chocolate);
color: var(--colors-brand-deep-rose);
color: var(--colors-brand-teal-blue);
color: var(--colors-brand-dark-teal);
color: var(--colors-brand-burgundy);
color: var(--colors-brand-rustic-brown);
color: var(--colors-brand-deep-teal);
color: var(--colors-brand-steel-blue);

'Kom verder' Colors

• Navy
• Lime
• Petrol
• Mint
• Sea Grean
• Deep Sea
• Daffodil
• Sun
• Blue Gray
• Ochre
• Dark Gray
• Off Black

color: var(--colors-brand-kom-verder-navy);
color: var(--colors-brand-kom-verder-lime);
color: var(--colors-brand-kom-verder-petrol);
color: var(--colors-brand-kom-verder-mint);
color: var(--colors-brand-kom-verder-sea-green);
color: var(--colors-brand-kom-verder-deep-sea);
color: var(--colors-brand-kom-verder-daffodil);
color: var(--colors-brand-kom-verder-sun);
color: var(--colors-brand-kom-verder-blue-gray);
color: var(--colors-brand-kom-verder-ochre);
color: var(--colors-brand-kom-verder-dark-gray);
color: var(--colors-brand-kom-verder-off-black);

---

Typography

Heading 1

Following paragraph...

Heading 2

Following paragraph...

Heading 3

Following paragraph...

Heading 4

Following paragraph...

Heading 5

Following paragraph...

Heading 6

Following paragraph...

<h1>Heading 1</h1>
<p>Following paragraph...</p>
<h2>Heading 2</h2>
<p>Following paragraph...</p>
<h3>Heading 3</h3>
<p>Following paragraph...</p>
<h4>Heading 4</h4>
<p>Following paragraph...</p>
<h5>Heading 5</h5>
<p>Following paragraph...</p>
<h6>Heading 6</h6>
<p>Following paragraph...</p>

Definitions

For short definitions, use the title attribute on the dfn element, which will show the definition on hover:

TIN

<dfn title="Tax Identification Number">TIN</dfn>

---

Border Radius

Small

Small border radius is used for small buttons, checkboxes, etc.

.vlk-checkbox {
  border-radius: var(--border-radius-small);
}

Medium

Medium border radius is mainly used for buttons

Primary

button {
  border-radius: var(--border-radius-medium);
}

---

Shadows

• None - Level 0 - Consider this layer as the "plane" on which elements are placed by default if not declaring any elevation value. Here is some example of elements usually placed on this level:
  • Document root
  • Document body
  • Backgrounds
  • Any element that is not elevated
• Small - Level 1 - This is the first level of elevation from 0, elements placed here cast a small shadow. Here some elements that can be placed on this level:
  • Button raised
  • Card raised
  • Notification badges
  • Tooltip
• Medium - Level 2 -The second level of elevation can hold elements like:
  • Popover
  • Tooltips
• Large - Level 3 - Elements that can be placed on this elevation level are those that are always palced above everything else:
  • Modals
  • Dialogs

• None
• Shadow S
• Shadow M
• Shadow L

box-shadow: var(--shadow-small);
box-shadow: var(--shadow-medium);
box-shadow: var(--shadow-large);

---

Checkbox

<input type="checkbox" class="vlk-checkbox">
<input type="checkbox" class="vlk-checkbox" checked="checked">
<input type="checkbox" class="vlk-checkbox" disabled>
<input type="checkbox" class="vlk-checkbox" checked="checked" disabled>

---

Icons (webfont)

Example:

<i class="vlk-icon icon-accessibility-outline"></i>

List of icons

Small

Medium

Large

• icon-accessibility-outline
• icon-accessibility
• icon-account
• icon-add-outline
• icon-add-user-outline
• icon-address-book-outline
• icon-address-book
• icon-airplay
• icon-applepay-outline
• icon-applepay
• icon-arrow-back-outline
• icon-arrow-down-outline
• icon-arrow-forward-outline
• icon-arrow-up-outline
• icon-attachment-outline
• icon-bookmark-outline
• icon-bookmark
• icon-bullet
• icon-buy-round-outline
• icon-buy-round
• icon-calculator-outline
• icon-calculator
• icon-card-outline
• icon-card
• icon-cards-outline
• icon-cards
• icon-chat-outline
• icon-chat
• icon-chevron-back-outline
• icon-chevron-down-outline
• icon-chevron-forward-outline
• icon-chevron-up-outline
• icon-close-outline
• icon-close-round-outline
• icon-close-round
• icon-close
• icon-cloud-download
• icon-code
• icon-compass-round-outline
• icon-compass-round
• icon-confirm-outline
• icon-confirm-round-outline
• icon-confirm-round
• icon-confirm-user-outline
• icon-copy-link-outline
• icon-currency-round-outline
• icon-currency-round
• icon-date-outline
• icon-date
• icon-deceased
• icon-dictate-outline
• icon-dictate
• icon-digipas
• icon-document-outline
• icon-document-pdf-outline
• icon-document-pdf
• icon-document
• icon-double-chevron-forward-outline
• icon-double-email-outline
• icon-download-outline
• icon-edit-outline
• icon-edit
• icon-email-outline
• icon-email
• icon-enlarge-outline
• icon-erase-outline
• icon-erase
• icon-error-round-outline
• icon-error-round
• icon-euro-transfer-round-outline
• icon-faceid-outline
• icon-feedback-outline
• icon-feedback
• icon-filter-outline
• icon-fingerprint-outline
• icon-flight-outline
• icon-flight
• icon-global-outline
• icon-global
• icon-group-outline
• icon-group
• icon-hat-outline
• icon-hat
• icon-help-round-outline
• icon-help-round
• icon-hide
• icon-home-outline
• icon-home
• icon-house-outline
• icon-house
• icon-image-outline
• icon-image
• icon-index-outline
• icon-index
• icon-info-round-outline
• icon-info-round
• icon-like-outline
• icon-like
• icon-link-outline
• icon-list-outline
• icon-location-outline
• icon-location
• icon-lock-outline
• icon-lock
• icon-market-outline
• icon-market
• icon-menu-outline
• icon-minus-outline
• icon-minus-round-outline
• icon-minus-round
• icon-mobile-outline
• icon-mobile
• icon-more-horizontal-round
• icon-more-horizontal
• icon-more-vertical
• icon-negative
• icon-new-tab-outline
• icon-news-outline
• icon-news
• icon-nfc-outline
• icon-nfc
• icon-no-access-outline
• icon-no-access
• icon-notification-outline
• icon-notification
• icon-pause-round-outline
• icon-pause-round
• icon-phone-outline
• icon-phone
• icon-physical-meeting-outline
• icon-pincode
• icon-play-round-outline
• icon-play-round
• icon-plus-round-outline
• icon-plus-round
• icon-portfolio-outline
• icon-portfolio
• icon-positive
• icon-presentation-outline
• icon-print-outline
• icon-print
• icon-rating-outline
• icon-rating
• icon-redeem-outline
• icon-redeem
• icon-reload-outline
• icon-remove-outline
• icon-remove
• icon-reverse-outline
• icon-risk-profile-round-outline
• icon-risk-profile-round
• icon-scan-outline
• icon-search-outline
• icon-sell-round-outline
• icon-sell-round
• icon-settings-outline
• icon-share-outline
• icon-show
• icon-sign-out-outline
• icon-sort-down
• icon-sort-none
• icon-sort-up
• icon-stop-round-outline
• icon-stop-round
• icon-stopwatch-outline
• icon-stopwatch
• icon-suitcase-outline
• icon-suitcase
• icon-sustainable-outline
• icon-sustainable
• icon-swap-ol
• icon-task-list-outline
• icon-task-list
• icon-theme-round-outline
• icon-theme-round
• icon-time-left-outline
• icon-time-outline
• icon-time
• icon-transfer-outline
• icon-transfer
• icon-unlock-outline
• icon-unlock
• icon-upload-outline
• icon-user-outline
• icon-user
• icon-virtual-cards-outline
• icon-wallet-outline
• icon-warning-outline
• icon-warning
• icon-webber

Input

Input fields with labels

Use .vlk-form-label class to place the label on top of the input field.

<label for="input-text" class="vlk-form-label">Form label</label>
<select class="vlk-select">
    <option>Choose value...</option>
</select>

<label for="input-text" class="vlk-form-label">Form label</label>
<input type="text" id="input-text" class="vlk-input" />

---

Links

Example link

Example visited link

Against colored background

<a href="#">Example link</a> 
<a class="link-against-color" href="#">Example link</a>

---

Radio Button

Radio Button Radio Button Selected Radio Button Disabled Radio Button Selected Disabled

<input class="vlk-input-radio" type="radio" id="radio1" name="group1"><label for="radio1">Radio Button</label>
<input class="vlk-input-radio" type="radio" id="radio2" name="group1" checked="checked"><label for="radio2">Radio Button Selected</label>
<input class="vlk-input-radio" type="radio" id="radio3" name="group2" disabled><label for="radio3" disabled>Radio Button Disabled</label>
<input class="vlk-input-radio" type="radio" id="radio4" name="group2" checked="checked" disabled><label for="radio4" disabled>Radio Button Selected Disabled</label>

---

Select

<select class="vlk-select" class="secondary" name="pets">
  <option value="">Please choose an option</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <optgroup label="Dangerous animals">
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
  </optgroup>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

---

Toggle

  <input type="checkbox" class="vlk-toggle"/>
  <input type="checkbox" class="vlk-toggle" disabled/>

Toggle in dark mode

 <input type="checkbox" class="vlk-toggle white"/>
 <input type="checkbox" class="vlk-toggle white" disabled/>

Toggle sizes

  <input type="checkbox" class="vlk-toggle"/>
  <input type="checkbox" class="vlk-toggle small"/>

---

Buttons

Navigation buttons

<button class="vlk-button">Primary</button>
<button class="vlk-button" disabled>Primary disabled</button>
<button class="vlk-button small">Primary Small</button>
<button class="vlk-button white">Primary</button>
<button class="vlk-button white" disabled>Primary disabled</button>
<button class="vlk-button white small">Primary small</button>

<button class="vlk-button secondary">Secondary</button>
<button class="vlk-button secondary" disabled>Secondary disabled</button>
<button class="vlk-button white secondary">Secondary</button>
<button class="vlk-button white secondary" disabled>Secondary disabled</button>

<button class="vlk-button plain">Plain</button>
<button class="vlk-button plain" disabled>Plain disabled</button>
<button class="vlk-button white plain">Plain</button>
<button class="vlk-button white plain" disabled>Plain disabled</button>

Action buttons

<button class="vlk-button action">Action</button>
<button class="vlk-button action" disabled>Action disabled</button>
<button class="vlk-button white action">Action</button>
<button class="vlk-button white action" disabled>Action disabled</button>

<button class="vlk-button action secondary">Action secondary</button>
<button class="vlk-button action secondary" disabled>Action secondary disabled</button>
<button class="vlk-button white action secondary">Action secondary</button>
<button class="vlk-button white action secondary" disabled>Action secondary disabled</button>

<button class="vlk-button action plain">Action plain</button>
<button class="vlk-button action plain" disabled>Action plain disabled</button>
<button class="vlk-button white action plain">Action</button>
<button class="vlk-button white action plain" disabled>Action disabled</button>

<button class="vlk-button destructive">Destructive primary action</button>
<button class="vlk-button destructive" disabled>Destructive primary action disabled</button>

<button class="vlk-button destructive secondary">Destructive secondary action</button>
<button class="vlk-button destructive secondary" disabled>Destructive secondary action disabled</button>

<button class="vlk-button plain destructive">Plain destructive</button>
<button class="vlk-button plain destructive" disabled>Plain destructive disabled</button>

Guidelines

• Navigation buttons are used to navigate between pages or sections (go to x)
• Action buttons are used to perform actions (save, execute, transfer, confirm, sign)
• Destructive buttons are used to perform destructive actions (delete, remove)
• (Medium / default size) buttons have 12px of margin between them
• Buttons have square margins between them and the edge of the container
• There is only one primary button per container, aligned to the right
• There is only one destructive button per container
• The destructive button is aligned to the right if it is the primary action, aligned to the left if it is not the primary action
• On desktop, buttons are aligned to the right of the container
• On mobile, buttons are sized to fit the container
• On mobile, buttons are stacked vertically, primary button on top, aligned to the bottom of the container
• On a dark background, buttons use the white variant
• Exception: When a button is in a vertical menu (like this left side menu), the button should be centered

Desktop

Mobile

---

Banners

<div class="vlk-banner success">This is a success banner.</div>
<br/>
<div class="vlk-banner warning">This is a warning banner.</div>
<br/>
<div class="vlk-banner error">This is an error banner.</div>
<br/>
<div class="vlk-banner information">This is a information banner.</div>
<br/>
<div class="vlk-banner error">
    Multiple line banner: line 1<br/>
    Multiple line banner: line 2<br/>
    Multiple line banner: line 3<br/>
    Multiple line banner: line 4<br/>
</div>

---

Skeleton loaders

Line

Add a class .rounded to apply fully rounded corners.

<table class="vlk-table skeleton-loader rounded">
  <tbody>
    <tr>
      <td><div class="line xsmall"></div></td>
      <td><div class="line xsmall"></div></td>
    </tr>
    <tr>
      <td><div class="line small"></div></td>
      <td><div class="line small "></div></td>
    </tr>
    <tr>
      <td><div class="line medium"></div></td>
      <td><div class="line medium"></div></td>
    </tr>
    <tr>
      <td><div class="line large"></div></td>
      <td><div class="line large"></div></td>
    </tr>
  </tbody>
</table>

<table class="vlk-table skeleton-loader rounded">
  <tbody>
    <tr>
      <td><div class="line xsmall"></div></td>
      <td><div class="line xsmall"></div></td>
    </tr>
  </tbody>
</table>

---

Chips

Assist Chips

<button class="vlk-chip">Chips</button>
<button class="vlk-chip" disabled>Chips</button>

Chips with icons

<button class="vlk-chip">
  <i class="vlk-icon icon-add-outline leading-icon"></i>
  Leading icon
</button>
<button class="vlk-chip">
  Trailing icon
  <i class="vlk-icon icon-close trailing-icon"></i>
</button>
<button class="vlk-chip">
  <i class="vlk-icon icon-add-outline large-icon leading-icon"></i>
  Large leading icon
</button>
<button class="vlk-chip">
  Large trailing icon
  <i class="vlk-icon icon-close large-icon trailing-icon"></i>
</button>
<button class="vlk-chip">
  <i class="vlk-icon icon-add-outline leading-icon"></i>
  Leading and trailing icons
  <i class="vlk-icon icon-close trailing-icon"></i>
</button>
<button class="vlk-chip">
  <i class="vlk-icon icon-add-outline large-icon leading-icon"></i>
  Large leading and trailing icons
  <i class="vlk-icon icon-close large-icon trailing-icon"></i>
</button>

Select Chips

<div class="vlk-select-chip">
  <button class="vlk-chip">
    Select Quarter
    <i class="vlk-icon icon-chevron-down-outline trailing-icon"></i>
  </button>
  <ul class="select-content">
    <li>Q4 2022</li>
    <li>Q3 2022</li>
    <li>Q2 2022</li>
  </ul>
</div>

When List item is selected:

<div class="vlk-select-chip">
  <button class="vlk-chip">
    <i class="vlk-icon icon-confirm-outline leading-icon"></i>
    Q4 2022
    <i class="vlk-icon icon-chevron-down-outline trailing-icon"></i>
  </button>
  <ul class="select-content">
    <li class="selected">Q4 2022</li>
    <li>Q3 2022</li>
    <li>Q2 2022</li>
  </ul>
</div>

---

Dropdown

<div class="vlk-dropdown">
  <div class="dropdown-select">
    <span>Select Language</span>
    <i class="vlk-icon icon-chevron-down-outline"></i>
  </div>
</div>

<div class="vlk-dropdown expanded">
  <div class="dropdown-select">
    <span>Nederlands</span>
    <i class="vlk-icon icon-chevron-down-outline"></i>
  </div>
  <ul class="dropdown-menu">
    <li class="selected">
      Nederlands
    </li>
    <li>
      English
    </li>
  </ul>
</div>

<div class="vlk-dropdown">
  <div class="dropdown-select">
    <img class="selected-language flag-nl"  />
    <i class="vlk-icon icon-chevron-down-outline"></i>
  </div>
</div>

<div class="vlk-dropdown expanded">
  <div class="dropdown-select">
    <img class="selected-language flag-nl"  />
    <i class="vlk-icon icon-chevron-down-outline"></i>
  </div>
  <ul class="dropdown-menu">
    <li class="selected">
      <img class="flag-nl" />
      Nederlands
    </li>
    <li>
      <img class="flag-en" />
      English
    </li>
  </ul>
</div>

---

Tables

Default table

Header	Second Header
Example row	Table Row Value
Example row	Table Row Value

<table class="vlk-table">
  <thead>
    <tr>
      <th>Header</th>
      <th>Second Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example row</td>
      <td>Table Row Value</td>
    </tr>
    <tr>
      <td>Example row</td>
      <td>Table Row Value</td>
    </tr>
  </tbody>
</table>

tint table

Header	Second Header
Example row	Table Row Value
Example row	Table Row Value

<table class="vlk-table tint">
  <thead>
    <tr>
      <th>Header</th>
      <th>Second Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example row</td>
      <td>Table Row Value</td>
    </tr>
    <tr>
      <td>Example row</td>
      <td>Table Row Value</td>
    </tr>
  </tbody>
</table>

Table with alternating row

Header	Second Header
Example row	Table Row Value
Alternating row	Table Row Value

<table class="vlk-table alternate">
  <thead>
    <tr>
      <th>Header</th>
      <th>Second Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example row</td>
      <td>Table Row Value</td>
    </tr>
    <tr>
      <td>Alternating row</td>
      <td>Table Row Value</td>
    </tr>
  </tbody>
</table>

Table size small

Header	Second Header
Example row	Table Row Value
Example row with text wrap	Table Row Value

<table class="vlk-table sm">
  <thead>
    <tr>
      <th>Header</th>
      <th>Second Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example row</td>
      <td>Table Row Value</td>
    </tr>
    <tr>
      <td>Example row with text wrap</td>
      <td>Table Row Value</td>
    </tr>
  </tbody>
</table>

Table size medium

Header	Second Header
Example row	Table Row Value
Example row with text wrap	Table Row Value

<table class="vlk-table md">
  <thead>
    <tr>
      <th>Header</th>
      <th>Second Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example row</td>
      <td>Table Row Value</td>
    </tr>
    <tr>
      <td>Example row</td>
      <td>Table Row Value</td>
    </tr>
  </tbody>
</table>

Table size large

Header	Second Header
Example row	Table Row Value
Example row with text wrap	Table Row Value

<table class="vlk-table lg">
  <thead>
    <tr>
      <th>Header</th>
      <th>Second Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example row</td>
      <td>Table Row Value</td>
    </tr>
    <tr>
      <td>Example row</td>
      <td>Table Row Value</td>
    </tr>
  </tbody>
</table>

Table row hover

Header	Second Header
Example row	Table Row Value
Example row	Table Row Value

<table class="vlk-table">
  <thead>
    <tr>
      <th>Header</th>
      <th>Second Header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="hover">
      <td>Example row</td>
      <td>Table Row Value</td>
    </tr>
    <tr class="hover">
      <td>Example row</td>
      <td>Table Row Value</td>
    </tr>
  </tbody>
</table>

Table row collapsible

Name	1Y	3Y
Asset class 1
Instrument Name 1	-6.77%	1.27%
Instrument Name 2	5.27%	0.42%
Asset class 2
Instrument Name 3	-6.77%	1.27%
Instrument Name 4	5.27%	0.42%

<table class="vlk-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>1Y</th>
      <th>3Y</th>
    </tr>
  </thead>
  <tbody class="collapsible">
    <tr>
      <td colspan="3">
        <div>
          <i class="vlk-icon icon-chevron-forward-outline"></i>
          Asset class 1
        </div>
      </td>
    </tr>
    <tr>
      <td>Instrument Name 1</td>
      <td>-6.77%</td>
      <td>1.27%</td>
    </tr>
    <tr>
      <td>Instrument Name 2</td>
      <td>5.27%</td>
      <td>0.42%</td>
    </tr>
  </tbody>
  <tbody class="collapsible collapsed">
    <tr>
      <td colspan="3">
        <div>
          <i class="vlk-icon icon-chevron-forward-outline"></i>
          Asset class 2
          <div>
      </td>
    </tr>
    <tr>
      <td>Instrument Name 3</td>
      <td>-6.77%</td>
      <td>1.27%</td>
    </tr>
    <tr>
      <td>Instrument Name 4</td>
      <td>5.27%</td>
      <td>0.42%</td>
    </tr>
  </tbody>
</table>

Table header with Tint

Header1	Header2

<table class="vlk-table sm tint">
  <thead>
    <tr>
      <th>Header1</th>
      <th>Header2</th>
    </tr>
  </thead>
</table>

Table 'kom-verder'

Header1	Header2

<table class="vlk-table sm kom-verder">
  <thead>
    <tr>
      <th>Header1</th>
      <th>Header2</th>
    </tr>
  </thead>
</table>

Header cell sizing

<table class="vlk-table sm tint">

<table class="vlk-table md tint">

<table class="vlk-table lg tint">

---

Details / summary element

Error details

Details Title

Details content here

<details class="vlk-details">
  <summary class="summary-content">
    <i class="icon-error-round-outline"></i>
    <span>Details Title</span>
    <i class="icon-copy-link-outline"></i>
    <i class="details-expansion-pointer icon-chevron-down-outline"></i>
    <i class="details-expansion-pointer icon-chevron-up-outline"></i>
  </summary>
  <div class="details-content">Details content here</div>
</details>

Collapsible sections

First section

Details content here

Second section

Details content here

Third section

Details content here

<details class="vlk-collapsible">
  <summary>First section</summary>
  <div>Details content here</div>
</details>

<details class="vlk-collapsible">
  <summary>Second section</summary>
  <div>Details content here</div>
</details>

<details class="vlk-collapsible">
  <summary>Third section</summary>
  <div>Details content here</div>
</details>

---

Dialog element

Show modal dialog

Title of the dialog

The following will render a modeless (non-modal) dialog. The "OK" button allows the dialog to be closed when activated. It is important to provide a mechanism to close a dialog within the dialog element.

Decline Confirm

<dialog class="vlk-dialog">
  <h5>Title of the dialog</h5>
  <p>
    The following will render a modeless (non-modal) dialog. The "OK" button allows the dialog to be closed when
    activated. It is important to provide a mechanism to close a dialog within the dialog element.
  </p>
  <form class="action" method="dialog">
    <button class="vlk-button destructive">Decline</button>
    <button class="vlk-button">Confirm</button>
  </form>
</dialog>

---

Menu element

Overview

Release Notes

Help

<menu class="vlk-menu left">
  <li>
    <a class="active">
      <i class="vlk-icon has-icon-before icon-list-outline"></i>
      Overview
    </a>
  </li>
  <li>
    <a>
      <i class="vlk-icon has-icon-before icon-market-outline"></i>
      Release Notes
    </a>
  </li>
  <li>
    <a>
      <i class="vlk-icon has-icon-before icon-info-round-outline"></i>
      Help
    </a>
  </li>
</menu>

Overview

Release Notes

Help

<menu class="vlk-menu small left">
  <li>
    <a class="active">
      <i class="vlk-icon has-icon-before icon-list-outline"></i>
      Overview
    </a>
  </li>
  <li>
    <a>
      <i class="vlk-icon has-icon-before icon-market-outline"></i>
      Release Notes
    </a>
  </li>
  <li>
    <a>
      <i class="vlk-icon has-icon-before icon-info-round-outline"></i>
      Help
    </a>
  </li>
</menu>

---

Tile

<div class="vlk-tile">
  <div class="header">
    <h6>Example Account</h6>
    <div><strong>4.975.880,36 EUR</strong></div>
  </div>
  <div class="content">
    <div><small>NL63 FVLB 0226 0716 42</small></div>
    <div style="color: var(--vlk-success)"><strong>+10,93%</strong></div>
  </div>
</div>

Adding the class 'link' to vlk-tile will add a hover effect and pointer cursor. See example:

<div class="vlk-tile link">
  <div class="header">
    <h6>Example Account</h6>
    <div><strong>4.975.880,36 EUR</strong></div>
  </div>
  <div class="content">
    <div><small>NL63 FVLB 0226 0716 42</small></div>
    <div style="color: var(--vlk-success)"><strong>+10,93%</strong></div>
  </div>
</div>

---

Segmented control

  <ul class="vlk-segmented">
    <li class="segment selected">Day</li>
    <li class="segment">Week</li>
    <li class="segment">Month</li>
    <li class="segment disabled">Year</li>
  </ul>

NAV element

<nav class="vlk-nav">
  <ul>
    <li class="active"><a href="#">Active</a></li>
    <li><a href="#">Link</a></li>
    <li class="disabled"><a>Disabled</a></li>
  </ul>
</nav>

---