Voxloud UI Toolkit

Fonts

Example of font-weight 100

Example of font-weight 200

Example of font-weight 400 (normal)

Example of font-weight 500

Example of font-weight 600

Example of font-weight 700 (bold)

Example of font-weight 800

Usage:

GT-Eesti-Pro is set as font for html body

Icons

Small

Big

Buttons

Showcase of all buttons

Button Primary

Primary button with color Bright Crimson

Usage:

Add vox-btn and vox-btn-primary classes

<button class="vox-btn vox-btn-primary">Button primary</button>

Button Secondary

Secondary button with color Bright Crimson

Usage:

Add vox-btn and vox-btn-secondary classes

<button class="vox-btn vox-btn-secondary">Button secondary</button>

Button Secondary Grey

Secondary button with color grey

Usage:

<button class="vox-btn vox-btn-secondary-grey">Button secondary</button>

Button Secondary Dark Grey

Secondary button with color dark grey

Usage:

<button class="vox-btn vox-btn-secondary-dark-grey">Button secondary</button>

Button Disabled

Button disabled

Usage:

<button class="vox-btn vox-btn-primary" disabled>Button disabled</button>

Button Icon

Button Icon

Usage:

<button class=" vox-btn vox-btn-icon"> <i class=[class font-icon]></i></button>

Button groups

Showcase for button groups

Button group Primary

Primary button with color Bright Crimson

Usage:

Wrap a set of buttons with vox-btn-group

Button group Secondary

Secondary button group with color Bright Crimson

Usage:

Wrap a set of buttons with vox-btn-group

Button group Secondary Grey

Secondary button group with color grey

Usage:

Wrap a set of buttons with vox-btn-group

Button Secondary Dark Grey

Secondary button with color dark grey

Usage:

Wrap a set of buttons with vox-btn-group

Button Disabled

Button disabled

Usage:

Wrap a set of buttons with vox-btn-group

Button Icon

Button Icon

Usage:

Wrap a set of buttons with vox-btn-group

Bordered button group

Bordered button Primary

Usage:

Wrap the set of buttons with vox-button-group. Each button inside the group should use the classes vox-button-group__toggle and vox-button-group__toggle-primary.

Bordered button Secondary

Usage:

Wrap the set of buttons with vox-button-group. Each button inside the group should use the classes vox-button-group__toggle and vox-button-group__toggle-secondary

Avatars

Circular

NS
NS
N
N

Usage:

<div class="vox-avatar-circular">
<img width="100%" src="[img source]" alt="">
</div>

Sizing classes are vox-avatar-circular-sm, vox-avatar-circular-xs, vox-avatar-circular-micro.

Usage:

<div class="vox-avatar-circular">
<span>SN</span>
</div>

Sizing classes are vox-avatar-circular-sm, vox-avatar-circular-xs, vox-avatar-circular-micro.

Square

V
V
V
V

Usage:

<div class="vox-avatar-square">
<img width="100%" src="[img source]" alt="">
</div>

Sizing classes are vox-avatar-square-sm, vox-avatar-square-xs, vox-avatar-square-micro.

Usage:

<div class="vox-avatar-square">
<span>SN</span>
</div>

Sizing classes are vox-avatar-square-sm, vox-avatar-square-xs, vox-avatar-square-micro.

Radio buttons

Unchecked

Checked

Unchecked disabled

Checked disabled

Usage:

<input type="radio" class="vox-radio" />

Usage:

<input type="radio" class="vox-radio" disabled />

Checkbox

Unchecked

Checked

Indeterminate

Unchecked (disabled)

Checked (disabled)

Indeterminate(disabled)

Usage:

<input type="checkbox" class="vox-checkbox" />

Note:

The state intermediate must be assigned in javascript by setting the property indeterminate to true

Usage:

<input type="checkbox" class="vox-checkbox" disabled />

Note:

The state intermediate must be assigned in javascript by setting the property indeterminate to true

Text fields

Readonly mode

Readonly default

This field is required

Usage:

                <div class="vox-input-group vox-input-group_dense"><input class="vox-text-field" type="text" value="Value" readonly><i class="vox-text-field__icon vox-text-field__icon_black icon-small-alert"></i><span class="vox-input-group__error-message">Error message</span></div>

Icon text field

Icon text field default

Error message

Usage:

                <div class="vox-input-group vox-input-group_valid"><input class="vox-text-field" type="text" placeholder="Placeholder"><i class="vox-text-field__icon vox-text-field__icon_black icon-small-check"></i><span class="vox-input-group__error-message">Error message</span></div>

Icon text field disabled

Error message

Usage:

                      <div class="vox-input-group vox-input-group_valid"><input class="vox-text-field" type="text" placeholder="Placeholder" disabled><i class="vox-text-field__icon vox-text-field__icon_black icon-small-check"></i><span class="vox-input-group__error-message">Error message</span></div>

Dense text field

Dense text field default

Error message

Usage:

                <div class="vox-input-group vox-input-group_dense"><input class="vox-text-field" type="text" placeholder="Placeholder"><i class="vox-text-field__icon vox-text-field__icon_black icon-small-check"></i><span class="vox-input-group__error-message">Error message</span></div>

Dense text field filled

Error message

Usage:

                <div class="vox-input-group vox-input-group_valid vox-input-group_dense"><input class="vox-text-field" type="text" placeholder="Placeholder"><i class="vox-text-field__icon vox-text-field__icon_black icon-small-check"></i><span class="vox-input-group__error-message">Error message</span></div>

Dense text field disabled

Error message

Usage:

                <div class="vox-input-group vox-input-group_dense"><input class="vox-text-field" type="text" placeholder="Placeholder" disabled><i class="vox-text-field__icon vox-text-field__icon_black icon-small-check"></i><span class="vox-input-group__error-message">Error message</span></div>

Dense text field validation error

Error message

Usage:

                <div class="vox-input-group vox-input-group_invalid vox-input-group_dense"><input class="vox-text-field" type="text" placeholder="Placeholder"><i class="vox-text-field__icon icon-small-check"></i><span class="vox-input-group__error-message">Error message</span></div>

Number field

Number field default

Usage:

                <input class="vox-text-field vox-text-field_number" type="number" maxlength="1">

Number field disabled

Usage:

                <input class="vox-text-field vox-text-field_number" type="number" maxlength="1" disabled>

Number field validation error

Usage:

                <input class="vox-text-field vox-text-field_invalid vox-text-field_number" type="number" maxlength="1">

Typeahead input

Typeahead input default

Usage:

                <div class="vox-typeahead-group"><input type="text" class="form-control vox-text-field vox-typeahead-input" [popupClass]="'vox-typeahead-dropdown'"></div>

Dense Typeahead input

Usage:

                <div class="vox-typeahead-group vox-typeahead-group_dense"><input type="text" class="form-control vox-text-field vox-typeahead-input" [popupClass]="'vox-typeahead-dropdown'"></div>

Text Field Icons

Error message

Error message

Error message

<div class="vox-input-group">
<input type="text" class="vox-text-field" placeholder="Placehoder" />
<span class="vox-text-field-icon" data-icon=[unicode_icon] style="font-family: [font-family]">
</span>
</div>

Note:

The usage is the same of the Text Field. The only difference is that to use a custom icon the property data-icon must be added to the span and setted to the unicode of the icon. Also the font-family of the icons must be setted from style.

Progress bar

Usage:

Bar colors for progress bar: vox-progress__bar_aquamarine, vox-progress__bar_bright-crimson, vox-progress__bar_royal-blue.

          <div class="vox-progress progress"><div class="vox-progress__bar vox-progress__bar_bright-crimson progress-bar" role="progressbar" style="width: 30%"></div></div>

00:40

Usage:

Bar colors for progress bar with text: vox-progress-text__bar_aquamarine, vox-progress-text__bar_bright-crimson, vox-progress-text__bar_royal-blue.

Text font sizes for progress bar with text: vox-progress-text__text_size-s, vox-progress-text__text_size-s.

          <div class="vox-progress-text progress"><span class="vox-progress-text__text vox-progress-text__text_size-s">00:40</span><div class="vox-progress-text__bar vox-progress-text__bar_aquamarine progress-bar" role="progressbar" style="width: 60%"></div></div>

+39 02 1238376

Usage:

Bar colors for progress bar with text: vox-progress-text__bar_aquamarine, vox-progress-text__bar_bright-crimson, vox-progress-text__bar_royal-blue.

Text font sizes for progress bar with text: vox-progress-text__text_size-s, vox-progress-text__text_size-s.

          <div class="vox-progress-text progress"><span class="vox-progress-text__text vox-progress-text__text_size-l">+39 02 1238376</span><div class="vox-progress-text__bar vox-progress-text__bar_aquamarine progress-bar" role="progressbar" style="width: 100%"></div></div>

Tooltip

Chips

Bright crimson text chip

Label name

Usage:

                <span class="vox-chip vox-chip_bright-crimson-text">Label name</span>

Royal blue text chip

Label name

Usage:

                <span class="vox-chip vox-chip_royal-blue-text">Label name</span>

Gold text chip

Label name

Usage:

                <span class="vox-chip vox-chip_gold-text">Label name</span>

Peach text chip

Label name

Usage:

                <span class="vox-chip vox-chip_peach-text">Label name</span>

Aquamarine text chip

Label name

Usage:

                <span class="vox-chip vox-chip_aquamarine-text">Label name</span>

Purple text chip

Label name

Usage:

                <span class="vox-chip vox-chip_purple-text">Label name</span>

Bright crimson chip

Label name

Usage:

                <span class="vox-chip vox-chip_bright-crimson">Label name</span>

Royal blue chip

Label name

Usage:

                <span class="vox-chip vox-chip_royal-blue">Label name</span>

Purple chip

Label name

Usage:

                <span class="vox-chip vox-chip_purple">Label name</span>

Gold chip

Label name

Usage:

                <span class="vox-chip vox-chip_gold">Label name</span>

Aquamarine chip

Label name

Usage:

                <span class="vox-chip vox-chip_aquamarine">Label name</span>

Black chip

Label name

Usage:

                <span class="vox-chip vox-chip_black">Label name</span>

Peach chip

Label name

Usage:

                <span class="vox-chip vox-chip_peach">Label name</span>

Dark grey chip

Label name

Usage:

                <span class="vox-chip vox-chip_dark-grey">Label name</span>

Light grey chip

Label name

Usage:

              <span class="vox-chip vox-chip_light-grey">Label name</span>

Cards

Default card

Usage:

                <div class="vox-card"></div>

Addon card

Basic

Subheading

Lear more

9,00 € al mese

Usage:

              <div class="vox-card-addon"><div class="vox-card-addon__card"><img src="https://www.wildix.com/wp-content/uploads/2018/04/wp480g-1.jpg" alt="" width="88" height="88"><div class="vox-card-addon__info"><h4>Basic</h4><span>Subheading</span><div class="vox-card-addon__actions"><button class="vox-btn vox-btn-secondary-grey">Add</button><a href="#">Lear more</a></div></div></div></div>

Tabs

Default tabs

card content goes here

Usage:

              
          <div class="vox-tabs">
            <div class="vox-tabs-container">
              <button class="vox-btn vox-tab">Tab</button>
            </div>
          </div>
          <div class="vox-card vox-tab-content">
            tab content goes here
          </div>

Dense tabs

tab content goes here

Usage:

              
       <div class="vox-tabs vox-tabs_dense">
         <div class="vox-tabs-container">
           <button class="vox-btn vox-tab">Tab</button>
         </div>
       </div>
       <div class="vox-card vox-tab-content">
         tab content goes here
       </div>

Small tabs

tab content goes here

Usage:

              
     <div class="vox-tabs vox-tabs_small">
       <div class="vox-tabs-container">
         <button class="vox-btn vox-tab">Tab 1</button>
         <button class="vox-btn vox-tab active">Active tab</button>
         <button class="vox-btn vox-tab">Tab with long name</button>
         <button class="vox-btn vox-tab" disabled>Disabled tab</button>
       </div>
     </div>
     <div class="vox-card vox-tab-content">
       tab content goes here
     </div>

Toggles

Default toggle

Usage:

<label class="vox-toggle">
  <input class="vox-toggle__input" type="checkbox">
  <span class="vox-toggle__switcher"></span>
</label>

Aquamarine toggle

Usage:

<label class="vox-toggle vox-toggle_aquamarine">
  <input class="vox-toggle__input" type="checkbox">
  <span class="vox-toggle__switcher"></span>
</label>

Disabled toggle

Usage:

<label class="vox-toggle">
  <input class="vox-toggle__input" type="checkbox" disable>
  <span class="vox-toggle__switcher"></span>
</label>

Accordions

Accordion hidden

1

Text

Accordion shown

1

Text

Inline messages

Inline message royal-blue

This is a message.Link

Usage:

              <div class="vox-inline-message vox-inline-message_royal-blue">
                   <div>
                     <i class="icon-small-calendar-check"></i>
                     <span>This is a message.<a href="#">Link</a></span>
                   </div>
                   <i class="icon-small-close"></i>
                 </div>

Inline message gold

This is a message.Link

Usage:

<div class="vox-inline-message vox-inline-message_gold">
  <div>
    <i class="icon-small-call-blacklist"></i>
    <span>This is a message.<a href="#">Link</a></span>
  </div>
  <i class="icon-small-close"></i>
</div>

Inline message light-grey

This is a message.Link

Usage:

<div class="vox-inline-message vox-inline-message_light-grey">
  <div>
    <i class="icon-small-music"></i>
    <span>This is a message.<a href="#">Link</a></span>
  </div>
  <i class="icon-small-close"></i>
</div>

Dropdowns

Dropdown input

Dropdown menu default

Dropdown menu active

Dropdown user menu

Audio players

Audio player

00:00-02:00

Audio player active

00:48-02:00

Team/Numbers dropdown menu

Numbers dropdown menu

Team dropdown menu

Tables

Table

#	First name	Last name	Email	Phone number	Extension
2492	DL	Test	dimitri.lukiiyaniuk@wildix.com	+393791267320	101
2492	DL	Test	dimitri.lukiiyaniuk@wildix.com	+393791267320	101

Pagination

Pagination

Choose page size:

Link

Link

Vox link