• 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

    Release Notes

    5.8.1

    5.8.0

    5.7.0

    5.6.0

    5.5.0

    5.4.1

    5.4.0

    5.3.0

    5.2.2

    5.2.1

    5.2.0

    5.1.1

    5.1.0

    5.0.0

    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

    4.11.0

    4.10.0

    4.9.2

    4.9.1

    4.9.0

    4.8.3

    4.8.2

    4.8.1

    4.8.0

    4.7.2

    4.7.1

    4.7.0

    4.6.1

    4.6.0

    4.5.0

    4.4.1

    4.4.0

    4.3.0

    4.2.0

    4.1.0

    4.0.0

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

    Information colors has more contrast.

    CSS variables removed:

    Improved:

    3.0.1

    3.0.0

    2.0.4

    2.0.3

    2.0.2

    2.0.1

    2.0.0

    1.0.12

    1.0.11

    1.0.10

    1.0.9

    1.0.8

    1.0.7

    1.0.6

    Restructured components to Atomic Design

    1.0.5

    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

    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

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

    Interface Colors

    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

    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

    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:


    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

    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);

    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

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

    Shadows


    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

    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" />

    Example link

    Example visited link

    Against colored background

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

    Radio Button

    <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

    <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

    Desktop
    Mobile

    Banners

    This is a success banner.

    This is a warning banner.

    This is an error banner.

    This is a information banner.

    Multiple line banner: line 1
    Multiple line banner: line 2
    Multiple line banner: line 3
    Multiple line banner: line 4

    <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

    • Q4 2022
    • Q3 2022
    • Q2 2022
    <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>
    Select Language
    Nederlands
    • Nederlands
    • English 
    <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>
    • nl-NL Nederlands
    • en-GB English 
    <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% 
    <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>
    Header cell sizing
    Small
    Header1
    Medium
    Header1
    Large
    Header1 
    <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

    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. 

    <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>
  • 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

    Example Account
    4.975.880,36 EUR
    NL63 FVLB 0226 0716 42
    +10,93%
    <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:

    Example Account
    4.975.880,36 EUR
    NL63 FVLB 0226 0716 42
    +10,93%
    <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

    • Day
    • Week
    • Month
    • Year
      <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 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>