Visdom Library

How To

To use this simply include the below code to your project.

<link rel="stylesheet" href="https://ux.visualdomain.com.au/library.min.css" />

Colours - Background

Available Colours

#0d2b36 - navy
#03aee1 - blue
#00c5ff - light-blue
#dbf3fc - aqua

#bcd5f4 - dark-blue
#267adb - darker-blue

#ff3333 - red
#fed0d1 - light-red
#ff55da - pink
#ffe1f8 - light-pink

#ff8000 - orange
#ffe6ce - light-orange

#339900 - green
#d7eccd - light-green
#9333f2 - purple
#e8d4fc - light-purple

#feeedb - cream
#ce9501 - yellow
#fff2cc - light-yellow

#333333 - black
#666666 - darker-grey
#999999 - dark-grey

#cccccc - grey
#dddddd - light-grey
#e6e6e6 - lighter-grey
#f3f3f3 - lightest-grey

#ffffff - white
transparent

Note: This is for background style.

Available classes:
  • .vd-background-navy
  • .vd-background-blue
  • .vd-background-light-blue
  • .vd-background-dark-blue
  • .vd-background-darker-blue
  • .vd-background-red
  • .vd-background-light-red
  • .vd-background-pink
  • .vd-background-light-pink
  • .vd-background-orange
  • .vd-background-light-orange
  • .vd-background-green
  • .vd-background-light-green
  • .vd-background-purple
  • .vd-background-light-purple
  • .vd-background-yellow
  • .vd-background-light-yellow
  • .vd-background-black
  • .vd-background-white
  • .vd-background-darker-grey
  • .vd-background-dark-grey
  • .vd-background-grey
  • .vd-background-light-grey
  • .vd-background-lighter-grey
  • .vd-background-lightest-grey
  • .vd-background-aqua
  • .vd-background-cream
  • .vd-background-transparent

Apply background color on hover

Hover here
Available classes:
  • .vd-hover-background-{color}
Colours - Text

All colours from the above are available to use as a text colour.

Sample text with color class #0d2b36 - navy

Sample text with color class #03aee1 - blue

Sample text with color class #00c5ff - light blue

Sample text with color class #ff3333 - red

Sample text with color class #ff8000 - orange

Sample text with color class #339900 - green

Sample text with color class #333333 - black

Note: This is for text color style.

Available classes:
  • .vd-navy
  • .vd-blue
  • .vd-light-blue
  • .vd-dark-blue
  • .vd-darker-blue
  • .vd-red
  • .vd-light-red
  • .vd-orange
  • .vd-light-orange
  • .vd-green
  • .vd-light-green
  • .vd-purple
  • .vd-light-purple
  • .vd-yellow
  • .vd-light-yellow
  • .vd-black
  • .vd-white
  • .vd-darker-grey
  • .vd-dark-grey
  • .vd-grey
  • .vd-light-grey
  • .vd-lighter-grey
  • .vd-lightest-grey
  • .vd-aqua
  • .vd-cream
  • .vd-transparent

Apply text color on hover

Hover here
Available classes:
  • .vd-hover-{color}
Border - Colours

All colours from the above are available to use as a border colour.

#0d2b36 - navy
#03aee1 - blue
#00c5ff - light-blue
#dbf3fc - aqua

#ff3333 - red
#ff8000 - orange
#339900 - green
#feeedb - cream

#333333 - black
#666666 - darker-grey
#999999 - dark-grey

#cccccc - grey
#dddddd - light-grey
#e6e6e6 - lighter-grey
#f3f3f3 - lightest-grey

#ffffff - white
transparent

Note: This is for border-color style

Available classes:
  • .vd-border-navy
  • .vd-border-blue
  • .vd-border-light-blue
  • .vd-border-dark-blue
  • .vd-border-darker-blue
  • .vd-border-red
  • .vd-border-light-red
  • .vd-border-orange
  • .vd-border-light-orange
  • .vd-border-green
  • .vd-border-light-green
  • .vd-border-purple
  • .vd-border-light-purple
  • .vd-border-yellow
  • .vd-border-light-yellow
  • .vd-border-black
  • .vd-border-white
  • .vd-border-darker-grey
  • .vd-border-dark-grey
  • .vd-border-grey
  • .vd-border-light-grey
  • .vd-border-lighter-grey
  • .vd-border-lightest-grey
  • .vd-border-aqua
  • .vd-border-cream
  • .vd-border-transparent

Apply or change border color on hover

Hover here
Available classes:
  • .vd-hover-border-{color}
Border - Width
0 - 0px
1 - 1px
2 - 2px
3 - 3px
4 - 4px
5 - 5px
6 - 6px
7 - 7px
8 - 8px
9 - 9px
10 - 10px
vd-border-width-10
vd-border-top-width-5

Note: This is for border-width style.

Border .vd-border-{color} have default border width of 3px (browser default).
If we need to apply border to specific direction, we need to use the class for that specific direction in combination with .vd-border-width-0

Available classes with lowest to highest hierarchy.
e.g vd-border-width-1 will override vd-border-width-0
  • .vd-border-width-0
  • .vd-border-width-1
  • .vd-border-width-2
  • .vd-border-width-3
  • .vd-border-width-4
  • .vd-border-width-5
  • .vd-border-width-6
  • .vd-border-width-7
  • .vd-border-width-8
  • .vd-border-width-9
  • .vd-border-width-10
  • .vd-border-block-width-{size}
  • .vd-border-inline-width-{size}
  • .vd-border-top-width-{size}
  • .vd-border-left-width-{size}
  • .vd-border-bottom-width-{size}
  • .vd-border-right-width-{size}
Border - Radius
0 - 0px
2 - 2px
4 - 4px
5 - 5px
6 - 6px
8 - 8px
10 - 10px
25 - 25px
50 - 50px
100 - 100px

Note: This is for border-radius style.

Available classes:
  • .vd-border-radius-0
  • .vd-border-radius-2
  • .vd-border-radius-4
  • .vd-border-radius-5
  • .vd-border-radius-6
  • .vd-border-radius-8
  • .vd-border-radius-10
  • .vd-border-radius-25
  • .vd-border-radius-50
  • .vd-border-radius-100
Box Shadow
This is a sample box/menu.
Available classes:

.vd-box-shadow

Typography

H1 - Regular, 44px, line-height - 1.15 (50px)

H2 - Regular, 30px, line-height - 1.35 (40px)

H3 - Regular, 20px, line-height - 1.5 (30px)

H4 - Regular, 16px, line-height - 1.65 (26px)

H5 - Regular, 14px, line-height - normal (17px)
H6 - Regular, 24px, line-height - 1.25 (30px)

This is the sample of body text (<p>). Regular, 16px, line-height - 26px.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis diam sit amet risus vehicula, mollis lacinia neque euismod. Sed at mollis magna. Sed dignissim sollicitudin nibh, at facilisis est posuere vitae. Integer congue dui vulputate fermentum molestie. Donec cursus hendrerit eros nec pretium. Maecenas consequat cursus ante, id egestas orci pulvinar et. Sed ullamcorper arcu sit amet nibh finibus tristique.

This is sample of a link (<a>).

Strong text

Small text

Extra small text

Available classes:
  • <h1>
  • .vd-h1
  • <h2>
  • .vd-h2
  • <h3>
  • .vd-h3
  • <h4>
  • .vd-h4
  • <h5>
  • .vd-h5
  • <h6>
  • .vd-h6
  • <p>
  • .vd-p
  • <a>
  • .vd-a
  • .vd-text-strong
  • .vd-text-small
  • .vd-text-extra-small
  • .vd-text-nowrap
  • .vd-text-decoration-none
Text Align

Left align text.

Center align text.

Right align text.

Justify align text.

Available classes:
  • .vd-text-align-left
  • .vd-text-align-center
  • .vd-text-align-right
  • .vd-text-align-justify
Layouts

Layouts is for padding and margin, sample below shows how much padding for each section is.

extra-small - 5px
small - 10px
medium - 15px
large - 25px
extra-large - 40px
vd-padding-30
vd-padding-block-10
Sizes available with lowest to highest hierarchy.
10px will override 0px
  • auto (for margin only)
  • 0 (0px)
  • extra-small (5px)
  • 10 (10px)
  • small (10px)
  • medium (15px)
  • 20 (20px)
  • large (25px)
  • 30 (30px)
  • 40 (40px)
  • extra-large (40px)
  • 50 (50px)
  • 60 (60px)
  • 70 (70px)
  • 80 (80px)
  • 90 (90px)
  • 100 (100px)
Available classes for margin with lowest to highest hierarchy.
vd-margin-block-{size} will override vd-margin-{size}
  • .vd-margin-{size}
  • .vd-margin-block-{size}
  • .vd-margin-inline-{size}
  • .vd-margin-top-{size}
  • .vd-margin-left-{size}
  • .vd-margin-bottom-{size}
  • .vd-margin-right-{size}
Available classes for padding with lowest to highest hierarchy.
vd-padding-block-{size} will override vd-padding-{size}
  • .vd-padding-{size}
  • .vd-padding-block-{size}
  • .vd-padding-inline-{size}
  • .vd-padding-top-{size}
  • .vd-padding-left-{size}
  • .vd-padding-bottom-{size}
  • .vd-padding-right-{size}
Sample usage:
  • .vd-margin-extra-small
  • .vd-margin-top-20
  • .vd-margin-block-0
  • .vd-margin-inline-0
  • .vd-margin-10 vd-margin-inline-5
Buttons

Our buttons are fixed size, hence please consider using short text inside the button.

Button Size
Below are the available sizes:

Button Style
Below are the available styles:

Note:
Black background purposes is to show white color text.
This button will mainly be used on banner.

Button Disabled
This will only work on button html, and not anchor tag.

Available button size classes:
  • .vd-btn-big
  • .vd-btn-medium
  • .vd-btn-small

Available button style classes:

  • .vd-btn-blue
  • .vd-btn-white
  • .vd-btn-grey
  • .vd-btn-transparent

Both classes need to be combined
Sample usage:

  • class="vd-btn-big vd-btn-blue"
  • class="vd-btn-medium vd-btn-grey"

To use disabled, you will need button element, this is because disabled is not a class but an attribute of a button.
Sample usage:

<button class="vd-btn-medium vd-btn-grey" disabled>

This is our new icon implementation. We converted svg images and use it as a font.

Please use iconography when possible as it is our preferred way to do icons.

Usage:

<i class="vd-icon icon-name"></i>

Using with classes for font size and color

Sample usage:

<i class="vd-icon icon-stopwatch vd-h1 vd-green vd-margin-right-small"></i>

<i class="vd-icon icon-stopwatch vd-h3 vd-red vd-margin-right-small"></i>

Inherits parent's font size and color

Promotion Link
Sample usage:

<button class="vd-margin-right-small vd-btn-medium vd-btn-white"> <i class="vd-icon icon-upload-cloud vd-margin-right-extra-small"></i> Upload </button>

<button class="vd-margin-right-small vd-btn-medium vd-btn-white" disabled> <i class="vd-icon icon-gift vd-margin-right-extra-small"></i> Upload </button>

<a class="vd-a"> <i class="vd-icon icon-gift" ></i> Promotion Link </a>

vd-icon-circle

Sample usage:

<i class="vd-icon icon-plus vd-icon-circle vd-background-light-blue vd-white"></i>

vd-icon-circle + hover classes

Sample usage:

<i class="vd-icon icon-pencil vd-icon-circle vd-hover-white vd-hover-background-light-blue"></i>

<i class="vd-icon icon-envelope vd-icon-circle vd-hover-background-lightest-grey vd-hover-black"> </i>

Available Icons:

icon-arrow-up-right-down-left

icon-arrow-up-to-line

icon-arrows-rotate

icon-ban

icon-bars

icon-bars-filter

icon-bars-sort

icon-bin

icon-binoculars

icon-book-read

icon-book

icon-box-archive

icon-buildings

icon-calendar-days

icon-camcorder

icon-captions

icon-caret-down-up

icon-caret-up-down

icon-chalkboard-user

icon-champagne-glasses

icon-chat

icon-check

icon-chevron-down

icon-chevron-left

icon-chevron-right

icon-chevron-up

icon-circle-chevron-down

icon-circle-chevron-left

icon-circle-chevron-right

icon-circle-chevron-up

icon-circle-info

icon-circle-pause

icon-circle-question

icon-circle-user

icon-circle

icon-clock-rotate-left

icon-clock

icon-compare

icon-copy

icon-credits

icon-doc

icon-download-cloud

icon-download-file

icon-download-storage

icon-ellipsis-vertical

icon-embed

icon-envelope-open-check-arrow-right

icon-envelope-open-dollar

icon-envelope-open

icon-envelope

icon-eye

icon-file-link

icon-folder-grid

icon-folder-video

icon-gift

icon-hand-pointer

icon-hat-wizard

icon-house

icon-industry

icon-lightbulb

icon-link

icon-magnifying-glass

icon-message-envelope

icon-microchip-ai

icon-minus

icon-mobile-signal

icon-money-check-dollar-pen

icon-paint-brush

icon-paper-eye

icon-paper-lightbulb

icon-paper-paint-roller

icon-paper-paintbrush

icon-paper-pencil

icon-paper-person

icon-paper-phone

icon-paper-pin

icon-paper-play

icon-paper-quote-right

icon-paper-video

icon-paper-windows

icon-paperclip

icon-pencil-solid

icon-pencil-to-square

icon-pencil

icon-phone-volume

icon-photo-film

icon-play-rotate-right

icon-plus

icon-presentation-screen

icon-profile

icon-rabbit-running

icon-rearrange

icon-rotate-left

icon-screencast

icon-share

icon-shield-user-circle

icon-shirt

icon-sparkles

icon-square

icon-square-caret-right-folders

icon-square-poll-vertical

icon-square-user-between-lines

icon-stopwatch

icon-tag

icon-tags

icon-thumbs-up

icon-thumbtack

icon-thumbtack-outline

icon-toggle-off

icon-toggle-on

icon-triangle-exclamation

icon-tv

icon-upload-cloud

icon-user-gear

icon-user-tag

icon-volume-slash

icon-volume

icon-xmark

Icons

Red Dot

This red-dot position will follow depending on the padding top of its parent. Also, make sure you set position relative on the parent class.

Chat

Sample usage:

<p class="vd-position-relative vd-padding-top-10 vd-red-dot">Chat</p>

Note: To use this with an icon, you need to assign it on the parent div of that icon

<div class="vd-position-relative vd-padding-top-10 vd-red-dot"><div class="vd-icon-profile"></div></div>

Available classes:
  • .vd-red-dot
  • .vd-green-dot
  • .vd-grey-dot

Icons Picture

By default below icons set at width 40px and height 40px. You will need to overwrite the width and height in your project to resize it.

Sample icon:

Sample usage:

<div class="vd-icon-profile"></div>

Icons with hover:

vd-icon-arrow-down-grey-black

vd-icon-arrow-down-grey-blue

vd-icon-arrow-left-grey-black

vd-icon-arrow-left-grey-white

vd-icon-arrow-right-grey-black

vd-icon-arrow-right-grey-white

vd-icon-arrow-up-grey-black

vd-icon-arrow-up-grey-blue

vd-icon-call

vd-icon-chat

vd-icon-close

vd-icon-file

vd-icon-home

vd-icon-link

vd-icon-mail

vd-icon-mobile

vd-icon-play

vd-icon-profile

vd-icon-share

vd-icon-tick

vd-icon-tooltip

vd-icon-plus

vd-icon-envelope

vd-icon-pencil-circle

vd-icon-calendar

vd-icon-doc

vd-icon-bin

vd-icon-close-circle

vd-icon-tick-circle

vd-icon-plus-circle

vd-icon-clock

vd-icon-email-forward

vd-icon-file-link

vd-icon-replay

vd-icon-archive

vd-icon-paper-plane

vd-icon-select-all

vd-icon-prohibit

vd-icon-three-dot

vd-icon-health-circle

vd-icon-heart

vd-icon-list-view-grey-circle

vd-icon-thumbnail-view-grey-circle

vd-icon-pencil-grey-circle

vd-icon-three-dots-circle

vd-icon-star

vd-icon-star-circle

vd-icon-pause-circle-hover

vd-icon-pause-red-dot-circle-hover

Icons without hover:

vd-icon-info-orange

vd-icon-promotion

vd-icon-notification

vd-icon-rebook

vd-icon-pencil-blue

vd-icon-pencil-grey

vd-icon-minus-black

vd-icon-plus-black

vd-icon-preprod-location

vd-icon-preprod-location-white

vd-icon-preprod-pencil

vd-icon-preprod-pencil-white

vd-icon-preprod-quote

vd-icon-preprod-quote-white

vd-icon-preprod-shoot

vd-icon-preprod-shoot-white

vd-icon-preprod-talent

vd-icon-preprod-talent-white

vd-icon-preprod-call

vd-icon-preprod-call-white

vd-icon-preprod-board

vd-icon-preprod-board-white

vd-icon-preprod-brief

vd-icon-preprod-brief-white

vd-icon-preprod-concept

vd-icon-preprod-concept-white

vd-icon-preprod-frames

vd-icon-preprod-frames-white

vd-icon-preprod-treatment

vd-icon-preprod-treatment-white

vd-icon-switch-blue

vd-icon-switch-grey

vd-icon-tick-round

vd-icon-close-round

vd-icon-plus-round

vd-icon-plus-round-blue

vd-icon-close-red

vd-icon-close-white

vd-icon-tick-green

vd-icon-upload

vd-icon-credits

vd-icon-credits-blue

vd-icon-light-bulb

vd-icon-file-audio

vd-icon-file-doc

vd-icon-file-excel

vd-icon-file-image

vd-icon-file-pdf

vd-icon-file-video

vd-icon-file-zip

vd-icon-file-unknown

vd-icon-book-read-blue

vd-icon-book-read-grey

vd-icon-info-circle-blue

vd-icon-info-circle-grey

vd-icon-user-circle-blue

vd-icon-user-circle-grey

vd-icon-user-circle-white

vd-icon-comment-round-blue

vd-icon-chair-office

vd-icon-copyright

vd-icon-search

vd-icon-building

vd-icon-building-blue

vd-icon-product-animation

vd-icon-product-edit

vd-icon-product-social

vd-icon-product-upload

vd-icon-link-default

vd-icon-projects

vd-icon-projects-white

vd-icon-comment-smile

vd-icon-calendar-grey

vd-icon-calendar-white

vd-icon-mail-grey

vd-icon-folder-open

vd-icon-media

vd-icon-media-white

vd-icon-camcorder

vd-icon-camcorder-white

vd-icon-camcorder-black

vd-icon-camcorder-violet

vd-icon-tasks-file

vd-icon-tasks-bullet

vd-icon-credits-grey

vd-icon-live-streaming

vd-icon-live-streaming-white

vd-icon-personalized

vd-icon-personalized-white

vd-icon-pointer

vd-icon-pointer-white

vd-icon-price-tag

vd-icon-price-tag-white

vd-icon-projector-screen

vd-icon-projector-screen-white

vd-icon-rabbit

vd-icon-rabbit-white

vd-icon-real-estate

vd-icon-real-estate-white

vd-icon-series

vd-icon-series-white

vd-icon-shirt

vd-icon-shirt-white

vd-icon-thumbs-up

vd-icon-thumbs-up-white

vd-icon-training-hr

vd-icon-training-hr-white

vd-icon-tv

vd-icon-tv-white

vd-icon-camera-blue

vd-icon-clipboard

vd-icon-pin-grey

vd-icon-pin-blue

vd-icon-eye

vd-icon-credit-card-blue

vd-icon-cash-bag-green

vd-icon-clock-grey

vd-icon-clock-white

vd-icon-glass

vd-icon-glass-white

vd-icon-health

vd-icon-expand

vd-icon-list-view-blue

vd-icon-thumbnail-view-blue

vd-icon-video-private

vd-icon-video-public

vd-icon-padlock

vd-icon-heart-red

vd-icon-heart-white

vd-icon-heart-transparent-grey-border

vd-icon-heart-red-circle

vd-icon-arrow-down-white

vd-icon-copy-white

vd-icon-copy-transparent-grey-border

vd-icon-pencil-white

vd-icon-pencil-transparent-grey-border

vd-icon-three-dots-white

vd-icon-three-dots-transparent-grey-border

vd-icon-eye-white

vd-icon-eye-transparent-grey-border

vd-icon-filter

vd-icon-filter-white

vd-icon-star-white

vd-icon-star-yellow

vd-icon-star-blue

vd-icon-star-grey

vd-icon-download

vd-icon-pause-circle

vd-icon-stop

vd-icon-bamboo-hr

vd-icon-google-calendar
Form Elements V2

For now we only support input field, select field, and text area. For custom specific plugin like multi-select, search-select, we will use plugin on project specific base.

Note: We want to keep this same structure when implementing form element.

<div class="vd-field"> // wrapper with class .vd-field

  <label>Default</label> // label element

  <input type="text" placeholder="placeholder"> // field

</div>

Input field sample:

<div class="vd-field"> <label>Default</label> <input type="text" placeholder="Placeholder"> </div>

<div class="vd-field vd-required"> <label>Required</label> <input type="text" placeholder="Placeholder"> </div>

<div class="vd-field vd-input-valid"> <label>Valid</label> <input type="text" placeholder="Placeholder"> </div>

<div class="vd-field vd-input-error"> <label>Error</label> <input type="text" placeholder="Placeholder"> </div>

Select field sample:

Note: Currently there's no way to change text color when select field is empty. As a workaround, we use the required attribute and :invalid pseudo-class to make the text grey when empty is selected. Only do this when select is not inside form element with submit button.

<div class="vd-field"> <label>Default</label> <select required> <option value="">Empty<select> <option value="option1">Option 1<select> </select> </div>

<div class="vd-field vd-required"> <label>Required</label> <select required> <option value="">Empty<select> <option value="option1">Option 1<select> </select> </div>

<div class="vd-field vd-input-valid"> <label>Valid</label> <select required> <option value="">Empty<select> <option value="option1">Option 1<select> </select> </div>

<div class="vd-field vd-input-error"> <label>Error</label> <select required> <option value="">Empty<select> <option value="option1">Option 1<select> </select> </div>

Textarea sample:

<div class="vd-field"> <label>Default</label> <textarea placeholder="placeholder"></textarea> </div>

<div class="vd-field vd-required"> <label>Required</label> <textarea placeholder="placeholder"></textarea> </div>

<div class="vd-field vd-input-valid"> <label>Valid</label> <textarea placeholder="placeholder"></textarea> </div>

<div class="vd-field vd-input-error"> <label>Error</label> <textarea placeholder="placeholder"></textarea> </div>

Form Elements (Deprecated)

Input

Requirements and usage

  • Supported types:
    • text
    • email
    • tel
    • number
    • url
    • password
  • Order:
    1. Input element
    2. Label element (Must be defined after input tag)
  • Extra classes available for parent container to handle the following input states:
    • Required: vd-required
    • Filled: vd-input-filled
    • Validation error: vd-input-error
    • Validation success: vd-input-valid
  • By default width of the input will follow parent container
  • Use script to determine input state (click, blur, valid, invalid etc.) and update the classes in the parent container.

Normal State (.vd-input)

Sample:

<div class="vd-input"> <input type="text"> <label>First Name</label> </div>

Sample:

<div class="vd-input"> <input type="email"> <label>Email</label> </div>

Sample:

<div class="vd-input"> <input type="tel"> <label>Tel</label> </div>

Sample:

<div class="vd-input"> <input type="number"> <label>Number</label> </div>

Sample:

<div class="vd-input"> <input type="url"> <label>URL</label> </div>

Normal State Required (.vd-required)

Note: Please use this vd-required class for input text only. For icons or text, use .vd-red-dot above.

Sample:

<div class="vd-input vd-required"> <input type="text"> <label>First Name</label> </div>

<div class="vd-input vd-required"> <input type="password"> <label>Password</label> </div>

Filled State (.vd-input-filled)

Sample:

<div class="vd-input vd-input-filled"> <input type="text" value="John Doe"> <label>First Name</label> </div>

<div class="vd-input vd-input-filled"> <input type="password" value="Secret Value"> <label>Password</label> </div>

Error State (.vd-input-error)

Sample:

<div class="vd-input vd-input-filled vd-input-error"> <input type="text" value="Wrong Name"> <label>Please use proper name</label> </div>

Valid State (.vd-input-valid)

Sample:

<div class="vd-input vd-input-filled vd-input-valid"> <input type="text" value="Correct Name"> <label>First Name</label> </div>