Colors

Black
White
Bright Crimson
Royal Blue
Aquamarine
Gold
Peach
Purple
Dark Grey
Medium Grey
Light Grey
Lighter Grey

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

Typography

Heading 1

Business phone system

Heading 2

Save time and money

Heading 3

Connect your team

Heading 4

An Affordable price

Heading 5

Create a new number

Heading 6

Audio message

Subheading

No credit card required

Field label

Enter your email address

Paragraph

Voxloud is the first business phone system in cloud, designed for small business that want to look like a national company in seconds, not weeks.

Small

all prices are VAT excluded

Bright crimson text

Some text

Royal blue text

Some text

Aquamarine text

Some text

Gold text

Some text

Peach text

Some text

Purple text

Some text

Dark grey text

Some text

Medium grey text

Some text

Light grey text

Some text

Lighter grey text

Some text

Avatars

Avatar circular micro

avatar

Usage:

Add vox-avatar-circular and vox-avatar-circular-micro classes. 

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

Avatar circular xs

avatar

Usage:

Add vox-avatar-circular and vox-avatar-circular-xs classes. 

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

Avatar circular sm

avatar

Usage:

Add vox-avatar-circular and vox-avatar-circular-sm classes. 

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

Avatar circular

avatar

Usage:

Add vox-avatar-circular class. 

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

Avatar circular text micro

N

Usage:

Add vox-avatar-circular and vox-avatar-circular-micro classes. 

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

Avatar circular text xs

N

Usage:

Add vox-avatar-circular and vox-avatar-circular-xs classes. 

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

Avatar circular text sm

NS

Usage:

Add vox-avatar-circular and vox-avatar-circular-sm classes. 

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

Avatar circular text

NS

Usage:

Add vox-avatar-circular class. 

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

Avatar square text micro

N

Usage:

Add vox-avatar-square and vox-avatar-square-micro classes. 

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

Avatar square text xs

N

Usage:

Add vox-avatar-square and vox-avatar-square-xs classes. 

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

Avatar square text sm

NS

Usage:

Add vox-avatar-square and vox-avatar-square-sm classes. 

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

Avatar square text

NS

Usage:

Add vox-avatar-square class. 

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

Avatar square micro

avatar

Usage:

Add vox-avatar-square and vox-avatar-square-micro classes. 

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

Avatar square xs

avatar

Usage:

Add vox-avatar-square and vox-avatar-square-xs classes. 

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

Avatar square sm

avatar

Usage:

Add vox-avatar-square and vox-avatar-square-sm classes. 

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

Avatar square

avatar

Usage:

Add vox-avatar-square class. 

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

Icons

Icon small add circle

Usage:

Add icon-small-add-circle class. 

                                      <span class="icon-small-add-circle"></span>

Big

Small

Buttons

Button primary

Usage:

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

Button primary loading

Usage:

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

Button primary disabled

Usage:

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

Button secondary

Usage:

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

Button secondary dark grey

Usage:

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

Button icon

Usage:

                                        <button class="vox-btn vox-btn-secondary-grey"><i class="icon-small-edit"></i></button>

Button group

Usage:

                                
<div class="vox-btn-group">
  <button class="vox-btn vox-btn-primary">Button</button>
  <button class="vox-btn vox-btn-primary">One</button>
  <button class="vox-btn vox-btn-primary">Two</button>
  <button class="vox-btn vox-btn-primary">Three</button>
</div>

Checkbox

Unchecked

Usage:

                                        <input class="vox-checkbox" type="checkbox" title="Unchecked">

Checked

Usage:

                                        <input class="vox-checkbox" type="checkbox" title="Checked" checked>

Indeterminate

Usage:

                                        <input class="vox-checkbox indeterminate" type="checkbox" title="Indeterminate">

Unchecked (disabled)

Usage:

                                        <input class="vox-checkbox" type="checkbox" title="Unchecked (disabled)" disabled>

Checked (disabled)

Usage:

                                        <input class="vox-checkbox" type="checkbox" title="Checked (disabled)" checked disabled>

Indeterminate (disabled)

Usage:

                                        <input class="vox-checkbox indeterminate" type="checkbox" title="Indeterminate(disabled)" disabled>

Radio button

Unchecked

Usage:

                                        <input class="vox-radio" type="radio" title="Unchecked">

Checked

Usage:

                                        <input class="vox-radio" type="radio" title="Checked" checked>

Unchecked (disabled)

Usage:

                                        <input class="vox-radio" type="radio" title="Unchecked (disabled)" disabled>

Checked (disabled)

Usage:

                                        <input class="vox-radio" type="radio" title="Checked (disabled)" checked disabled>

Text fields

Text field default

Error message

Usage:

                                        <div class="vox-input-group"><input class="vox-text-field" type="text" title="Text field default" placeholder="Placehoder"><i class="vox-text-field__icon vox-text-field__icon_valid icon-small-check"></i><span class="vox-input-group__error-message">Error message</span></div>

Text field filled

Error message

Usage:

                                        <div class="vox-input-group vox-input-group_valid"><input class="vox-text-field__icon icon-small-check" type="text" title="Text field filled" placeholder="Placehoder"><i class="vox-text-field__icon vox-text-field__icon_valid icon-small-check"></i><span class="vox-input-group__error-message">Error message</span></div>

Text field validation error

Error message

Usage:

                                        <div class="vox-input-group vox-input-group_invalid"><input class="vox-text-field__icon icon-small-check" type="text" title="Text field validation error" placeholder="Placehoder"><i class="vox-text-field__icon icon-small-alert"></i><span class="vox-input-group__error-message">Error message</span></div>

Icon text field default

Error message

Usage:

                                        <div class="vox-input-group vox-input-group_valid"><input type="text" class="vox-text-field__icon icon-small-check" title="Icon text field default" placeholder="Placehoder" /><i class="vox-text-field__icon vox-text-field__icon_black icon-small-call"></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__icon icon-small-check" type="text" title="Icon text field disabled" placeholder="Placehoder"><i class="vox-text-field__icon vox-text-field__icon_black icon-small-call"></i><span class="vox-input-group__error-message">Error message</span></div>

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

Progress-bar

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>

Progress bar with small text

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>

Progress bar with large text

+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

Tooltip default

Usage:

                                        <i class="vox-tooltip icon-small-info" data-toggle="tooltip" data-placement="top" title="This is tooltip content"></i>

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>

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>

Toggle

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" disabled>
  <span class="vox-toggle__switcher"></span>
</label>

Accordion

Accordion hidden
1

Text
Accordion shown
1

Text

Inline messages

Inline message gold
This is a message.Link
Inline message light-grey
This is a message.Link

Audio players

Audio player default
00:00-02:00
Audio player active
00:48-02:00