IVORY UI IVORY UI
Install via package manager

Run the below command to install IVORY UI package via npm.

                
                  npm i ivoryui-ivory
Include via CDN

Include the IVORY minified CSS file from CDNs (jsDelivr or unpkg).

Using JSDelivr CDN

                
                  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ivoryui-ivory@6.0.0/ivory.min.css" />

Using UNPKG CDN

                
                  <link rel="stylesheet" href="https://unpkg.com/ivoryui-ivory/ivory.min.css" />

Colors

IVORY provides an out-of-the-box color palette, each color has a adequate purpose. The color system designed in a way to help create a theme that is harmonious, ensures accessible text, and distinguishes UI elements and surfaces from one another.

Use our global :root variables, var(--iv-colorName) syntax to use the colors from the below color palette.

Gray

gray-0 #F8F9FA
gray-1 #F1F3F5
gray-2 #E9ECEF
gray-3 #DEE2E6
gray-4 #CED4DA
gray-5 #ADB5BD
gray-6 #868E96
gray-7 #495057
gray-8 #343A40
gray-9 #212529

Red

red-0 #FFF1F5
red-1 #FFE8E8
red-2 #FFCCC9
red-3 #FFA8A8
red-4 #FF8787
red-5 #FF6B6B
red-6 #FA5252
red-7 #F03E3E
red-8 #E03131
red-9 #C82F2F

Pink

pink-0 #FFF0F6
pink-1 #FFDEEB
pink-2 #FCC2D7
pink-3 #FAA2C1
pink-4 #F783AC
pink-5 #F06595
pink-6 #E64980
pink-7 #D6336C
pink-8 #C2255C
pink-9 #A61E4D

Purple

purple-0 #F8F0FC
purple-1 #F3D9FA
purple-2 #EEBEFA
purple-3 #E599F7
purple-4 #DA77F2
purple-5 #CC5DE8
purple-6 #BE4BDB
purple-7 #AE3EC9
purple-8 #9C36B5
purple-9 #862E9C

Indigo

indigo-0 #EDF2FF
indigo-1 #DBE4FF
indigo-2 #BAC8FF
indigo-3 #91A7FF
indigo-4 #748FFC
indigo-5 #5C7CFA
indigo-6 #4C6EF5
indigo-7 #4263EB
indigo-8 #3B5BDB
indigo-9 #364FC7

Blue

blue-0 #EAF5FF
blue-1 #D7EAFC
blue-2 #A6D2FF
blue-3 #74B9FF
blue-4 #5CACFC
blue-5 #40A0FF
blue-6 #2285F6
blue-7 #0875E1
blue-8 #005CB9
blue-9 #004387

Cyan

cyan-0 #E3FAFC
cyan-1 #C5F6Fa
cyan-2 #99E9F2
cyan-3 #66D9E8
cyan-4 #3BC9DB
cyan-5 #22B8CF
cyan-6 #15AABF
cyan-7 #1098AD
cyan-8 #0C8599
cyan-9 #0B7285

Teal

teal-0 #E6FCF5
teal-1 #C3FAE8
teal-2 #96F2D7
teal-3 #63E6BE
teal-4 #38D9A9
teal-5 #20C997
teal-6 #12B886
teal-7 #0CA678
teal-8 #099268
teal-9 #087F5B

Green

green-0 #F6FFED
green-1 #E8FCCF
green-2 #D9F7BE
green-3 #B7EB8F
green-4 #95DE64
green-5 #84D750
green-6 #73D13D
green-7 #52C41A
green-8 #389E0D
green-9 #237804

Yellow

yellow-0 #FFFBE6
yellow-1 #FFF9D0
yellow-2 #FFF3BF
yellow-3 #FFEC99
yellow-4 #FFE066
yellow-5 #FFD43b
yellow-6 #FCC419
yellow-7 #FAB005
yellow-8 #F59F00
yellow-9 #F08C00

Orange

orange-0 #FFF4E6
orange-1 #FFE8CC
orange-2 #FFD8A8
orange-3 #FFC078
orange-4 #FFA94D
orange-5 #FF922B
orange-6 #FD7E14
orange-7 #F76707
orange-8 #E8590C
orange-9 #D9480F

Typography

Type System
Style Usage Font Size / Line Height

Heading1

 <h1>...</h1> 2.25rem / 2.75rem

Heading2

 <h2>...</h2> 2rem / 2.5rem

Heading3

 <h3>...</h3> 1.75rem / 2.25rem

Heading4

 <h4>...</h4> 1.5rem / 2rem
Heading5
 <h5>...</h5> 1.25rem / 2rem
Heading6
 <h6>...</h6> 1.125rem / 1.75rem

P

 <p>....</p> 0.875rem / 1.5rem

.text-16

 class=".text-16" 1rem / 1.75rem

.text-12

 class=".text-12" 0.75rem / 1.25rem
Font Family & Font Weight

IVORY gives you the flexibility to have your preferred font family in your web page.

IVORY doesn't apply any font-weight in the typography. But provides the below CSS utility classes for font-weight.

Class Font Weight
text-100 100
text-200 200
text-300 300
text-400 400
text-500 500
text-600 600
text-700 700
text-800 800
text-900 900
Text Links

Text Link

Alerts

Standard Alerts

IVORY has success, info, warning and error alert types.

Tip: You can enhance the ivory alerts with your choice of icons for alert type representation and action button.

Success Text
Info Text
Warning Text
Error Text 
                  
                    <div class="iv-alert iv-alert-success">Success Text<div>

                    <div class="iv-alert iv-alert-info">Info Text</div>

                    <div class="iv-alert iv-alert-warning">Warning Text</div>

                    <div class="iv-alert iv-alert-error">Error Text</div>
Alert Banner

These are application level alerts showed as a banner at top of page.

Your trial period is about to expire in 1 day.
Service Notice: There is a schduled maintainance on coming Sunday, from 6:00AM to 6:00PM.
A new version is available for this product. Restart the application if you want to upgrade. 
                
                  <div class="iv-alert-banner iv-banner-error">

                    <div class="content">

                      Your trial period is about to expire in 1 day.

                    </div>

                  </div>

                  <div class="iv-alert-banner iv-banner-warning">

                    <div class="content">

                      Service Notice: There is a schduled maintainance on coming Sunday, from 6:00AM to 6:00PM.

                    </div>

                  </div>

                  <div class="iv-alert-banner iv-banner-info">

                    <div class="content">

                      A new version is available for this product. Restart the application if you want to upgrade.

                    </div>

                  </div>

Badges

Badge is a status descriptor for UI elements. Badge normally appears in proximity to notifications with eye-catching appeal.

Standalone Badge

5 5 5 5 

                
                  <span class="iv-badge">5</span>

                  <span class="iv-badge iv-badge-success">5</span>

                  <span class="iv-badge iv-badge-warning">5</span>

                  <span class="iv-badge iv-badge-error">5</span>
Basic Badge
9 99 999 999+ 
                
                  <span class="iv-badge-group">

                    <sup class="iv-badge iv-badge-error">Text</sup>

                  </span>
Dot Badge
link 

                
                  <span class="iv-badge-group">

                    ...

                    <sup class="iv-badge iv-badge-error iv-badge-dot"></sup>

                  </span>

Buttons

Buttons are user interface elements which allows users to take actions throughout the project. It is important that they have ample click space and help communicate the importance of their actions.

Primary Buttons

IVORY provides 3 types of buttons: Solid, Outline and Flat buttons.

IVORY primary buttons are defined with blue color. Use .btn-primary class along with the button style class.

Solid Buttons

Solid buttons are used to highlight the primary actions. To avoid confusing users, don’t use more than one primary solid button within a section or view.

 
  
                    
                      <button class="iv-btn btn-primary">Confirm</button>

                      <button class="iv-btn btn-primary btn-sm">Confirm</button>

                      <button class="iv-btn btn-primary btn-ro">Confirm</button>

                      <button class="iv-btn btn-primary btn-ro btn-sm">Confirm</button>
Outline Buttons

Outline buttons are used to indicate the secondary actions, when they are along with the solid buttons. Multiple Outline buttons can be used in a section.

 
  
                    
                      <button class="iv-btn-o btn-primary">Confirm</button>

                      <button class="iv-btn-o btn-primary btn-sm">Confirm</button>

                      <button class="iv-btn-o btn-primary btn-ro">Confirm</button>

                      <button class="iv-btn-o btn-primary btn-ro btn-sm">Confirm</button>
Flat Buttons

Flat buttons have significant purpose, don't get confused with hyperlink. Flat buttons can be used inline scenarios where user can identify this as a button.

  
                    
                      <button class="iv-btn-f btn-primary">Confirm</button>

                      <button class="iv-btn-f btn-primary btn-sm">Confirm</button>

Default Grey-Scale Buttons

Solid Buttons
  
                    
                      <button class="iv-btn">Default</button>

                      <button class="iv-btn btn-ro>Default</button>
Outline Buttons
  
                    
                      <button class="iv-btn-o">Default</button>

                      <button class="iv-btn-o btn-ro">Default</button>
Flat Buttons
                    
                      <button class="iv-btn-f">Default</button>

Disabled State

You can disable the button by adding disabled attribute to it.

Status Buttons

IVORY provides the buttons 2 other colors: Red & Green. Red and Green buttons are used for a call to action.

                    
                      <button class="iv-btn btn-primary btn-danger">Delete</button>

                      <button class="iv-btn-o btn-primary btn-danger">Delete</button>

                      <button class="iv-btn btn-primary btn-success">Approve</button>

                      <button class="iv-btn-o btn-primary btn-success">Approve</button>

Card

IVORY cards are built with as little markup and styles as possible, but provides a lot of customization. IVORY cards can be used in many ways, the below examples will give you some idea.

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.

                  
                    <div class="iv-card">

                      <div class="iv-card-header">

                        <h4 class="text-600 mb-0">Card Title</h4>

                      </div>

                      <div class="iv-card-content">

                        <p class="text-16 text-300 mb-0">

                          Some quick example text to build on the card title and make up the bulk of the card's content.

                        </p>

                      </div>

                    </div>

Checkbox

                
                  <div class="iv-checkbox">

                    <input type="checkbox" id="check1" />

                    <label for="check1">Checkbox<label>

                  <div>

                  <div class="iv-checkbox">

                    <input type="checkbox" id="check2" checked />

                    <label for="check2">Checked Checkbox</label>

                  </div>
Disabled

The checkbox can be disabled by disabled attribute on the checkbox input.

                
                  <div class="iv-checkbox">

                    <input type="checkbox" id="check3" disabled />

                    <label for="check3">Disabled Checkbox<label>

                  <div>

                  <div class="iv-checkbox">

                    <input type="checkbox" id="check4" disabled checked />

                    <label for="check4">Checkbox disabled & checked</label>

                  </div>

Input File

The file input uses the native HTML File Input.

                
                  <div class="iv-file">

                    <label tabindex="0" for="upload1" class="iv-file-select" role="button">Browse to upload</label>

                    <input id="upload1" type="file" accept />

                  </div>

Form

Standard Form

In IVORY standard form, the label and the form element will be arranged one after one in a row manner.

                  
                    <div class="iv-form">

                      <div class="iv-field">

                        <label class="iv-label">Username</label>

                        <input class="iv-input" type="text" />

                      </div>

                      <div class="iv-field">

                        <label class="iv-label">Password</label>

                        <input class="iv-input" type="password" />

                      </div>

                      <button class="iv-btn btn-primary">Signin</button>

                    </div>
Horizontally Aligned Form

In horizontal form, label & form element are aligned side-by-side.

                  
                    <div class="iv-form iv-form-horizontal">

                      <div class="iv-field">

                        <label class="iv-label">Firstname</label>

                        <input class="iv-input" type="text" />

                      </div>

                      <div class="iv-field">

                        <label class="iv-label">Lastname</label>

                        <input class="iv-input" type="text" />

                      </div>

                      <div class="iv-field">

                        <label class="iv-label">Email</label>

                        <input class="iv-input" type="text" />

                      </div>

                      <div class="iv-field">

                        <label class="iv-label">Password</label>

                        <input class="iv-input" type="password" />

                      </div>

                      <button class="iv-btn btn-primary">Register</button>

                    </div>

Grid

Simplest grid system

Add the as many col elements as you want, to a row container. No matter how many you've added, IVORY just create the equal width columns in the row.

one
Two
Three
Four
Five
Basic Grid

IVORY provides a 12-column mobile first grid system. The below example will give you an idea of how to build Flexbox grid structure using IVORY.

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
                
                  <div class="row">

                    <div class="col-1">One</div>

                    <div class="col-11">Eleven</div>

                  </div>

                  <div class="row">

                    <div class="col-2">Two</div>

                    <div class="col-10">Ten</div>

                  </div>

                  <div class="row">

                    <div class="col-3">Three</div>

                    <div class="col-9">Nine</div>

                  </div>

                  <div class="row">

                    <div class="col-4">Four</div>

                    <div class="col-8">Eight</div>

                  </div>

                  <div class="row">

                    <div class="col-5">Five</div>

                    <div class="col-7">Seven</div>

                  </div>

                  <div class="row">

                    <div class="col-6">Six</div>

                    <div class="col-6">Six</div>

                  </div>
Don't want the gutter?

IVORY grid has the gutter width of 30px i.e. 15px on each side of a column. IVORY also provides the gutter less grid system. To avail the gutter less grid layout, add .no-gutter class to the row container.

Twelve
Six
Six
Four
Four
Four
Three
Three
Three
Three
                
                  <div class="row">

                    <div class="col">One</div>

                    <div class="col">Two</div>

                    <div class="col">Three</div>

                    <div class="col">Four</div>

                    <div class="col">Five</div>

                  </div>
Breakpoints

As IVORY focuses mobile first, it provides you the standard and universally followed 6 breakpoints for responsive grid:

                
                  // Extra small devices (portrait phones, less than 576px)

                  No media query since this is the default

                   

                  // Small devices (landscape phones, 576px and up)

                  @media (min-width: 576px) { ... }

                   

                  // Medium devices (tablets, 768px and up)

                  @media (min-width: 768px) { ... }

                   

                  // Large devices (desktops, 992px and up)

                  @media (min-width: 992px) { ... }

                   

                  // X-Large devices (large desktops, 1200px and up)

                  @media (min-width: 1200px) { ... }

                   

                  // XX-Large devices (larger desktops, 1400px and up)

                  @media (min-width: 1400px) { ... }

Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Use the following class infix to avail the responsive column for the targeted device size.

Breakpoint IVORY Class infix

<576px

None

≥576px

 sm

≥768px

 md

≥992px

 lg

≥1200px

 xl

≥1400px

 xxl 
                
                  <div class="col-xxl-1 col-xl-2 col-lg-3 col-md-4 col-sm-6 col">

                  ...

                  </div>

Input

IVORY follows the native input element for the input field, which should be having the class .iv-input

                  
                    <input class="iv-input" type="text" placeholder="Enter Text Here" value="" />

List

IVORY provides 2 types of lists; native HTML lists & styled lists.

The HTML suuports 3 types of lists by default: Unordered, Ordered and Description list. Just add .iv-list to your <ul> or <ol> or <dl>.

Native HTML Lists

Unordered List

For Unordered List you can use the addon classes like: .iv-list-disc, .iv-list-circle, .iv-list-square to display the respective list styles. Here is an example:

  • Amsterdam
  • Manali
  • Monaco
  • Milano
  • Auckland
  • Florance
                  
                    <ul class="iv-list iv-list-disc">

                      <li>Amsterdam</li>

                      <li>Manali</li>

                      <li>Monaco</li>

                      <li>Milano</li>

                      <li>Auckland</li>

                      <li>Florance</li>

                    </ul>
Ordered List

For Ordered List you can use the addon classes like: .iv-list-decimal, .iv-list-lower-alpha, .iv-list-upper-roman to display the respective list styles. Here is an example:

  1. One
  2. Two
  3. Three
  4. Four
  5. Five
                  
                    <ol class="iv-list iv-list-decimal">

                      <li>One</li>

                      <li>Two</li>

                      <li>Three</li>

                      <li>Four</li>

                      <li>Five</li>

                    </ol>
Description List

Here is an example for description list:

Coffee
Black Coffee
Cappuccino
Espresso
Flat White
Macchiato
Tea
Green Tea
Lemon Tea
Fermented Tea
Herbal Tea
                  
                    <dl class="iv-list">

                      <dt>Coffee</dt>

                      <dd>Black Coffee</dd>

                      <dd>Cappuccino</dd>

                      <dd>Espresso</dd>

                      <dd>Flat White</dd>

                      <dd>Macchiato</dd>

                      <dt>Tea</dt>

                      <dd>Green Tea</dd>

                      <dd>Lemon Tea</dd>

                      <dd>Fermented Tea</dd>

                      <dd>Herbal Tea</dd>

                    </dl>

Styled Lists:

Styled lists will be used for various documentation purposes.

Styled list
  • Head
  • Shoulders
  • Knees
  • Toes
                
                  <ul class="iv-styled-list">

                    <li>Head</li>

                    <li>Shoulders</li>

                    <li>Knees</li>

                    <li>Toes</li>

                  </ul>

Progress

To incorporate the IVORY progress bar use .iv-progress class on top of the HTML native progress element. IVORY provides the progress bar in two variants.

Regular variant

30% 
                  
                    <progress class="iv-progress" value="30" max="100"> 30% </progress>

Small variant

30% 
                  
                    <progress class="iv-progress progress-sm" value="30" max="100"> 30% </progress>

Radio

                    
                      <div class="iv-radio">

                        <input type="radio" id="radio1" name="myradio1" />

                        <label for="radio1">Radio Option 1<label>

                      <div>

                      <div class="iv-radio">

                        <input type="radio" id="radio2" name="myradio1" checked />

                        <label for="radio2">Radio Option 2</label>

                      </div>
Disabled

The radio can be disabled by the disabled attribute on the radio input

                    
                      <div class="iv-radio">

                        <input type="radio" id="radio3" name="myradio2" disabled />

                        <label for="radio3">Radio Option 1<label>

                      <div>

                      <div class="iv-radio">

                        <input type="radio" id="radio4" name="myradio2" disabled />

                        <label for="radio4">Radio Option 2</label>

                      </div>

Radio Tabler

Tabler radio buttons are useful in various scenarios, especially in e-commerce applications.

Example:

Select Size

Select Color

                    
                      <div class="iv-tabler">

                        <div class="tabler-item">

                          <input type="radio" class="tabler-input" id="t1" name="my-tabler" value="Black" />

                          <label class="tabler-button" for="t1">Black</label>

                        </div>

                        ...

                      </div>

Select

A select box gives the provision to select one item from the list items.

Here is an example for sample dropdown

                
                  <div class="iv-select">

                    <select placeholder="Select">

                      <option value="1">Maryland</option>

                      <option value="2">Chicago</option>

                      <option value="3">Hamilton</option>

                    </select>

                  </div>

Spinner

A loading spinner is used for indicating a loading state of a page or section. It can be colored according to the applied colors on the current page.

IVORY provides the spinner in 5 sizes:

                
                  <div class="iv-spinner-16"></div>

                  <div class="iv-spinner-24"></div>

                  <div class="iv-spinner-32"></div>

                  <div class="iv-spinner-40"></div>

                  <div class="iv-spinner-48"></div>

More

'More' button is very helpful is in expand/collapse and lazy loading use cases.

Example:
                
                  <div class="iv-more">

                    <button class="iv-btn-f btn-sm">

                      More

                    </button>

                  </div>

Table

A table is used to display the collection of structured data in row column manner.

Firstname Lastname Age City
John Doe 32 Barcelona
Jane Doe 28 Milan
Joe Doe 8 Monaco
Jim Doe 6 Florance
Jene Doe 3 Rotterdam 
                
                  <table class="iv-table">

                    <thead>

                      <tr>

                        <th>Firstname</th>

                        <th>Lastname</th>

                        <th>Age</th>

                        <th>City</th>

                      </tr>

                    </thead>

                    <tbody>

                      <tr>

                        <td>John</td>

                        <td>Doe</td>

                        <td>32</td>

                        <td>Barcelona</td>

                      </tr>

                      ...

                    </tbody>

                  </table>

Textarea

Textarea is used to enter long text input.

Just to add the class iv-textarea to native textarea.

Toggle Switch

Toggle Switch is an on/off control, built on top of the checkbox. It can be toggled by clicking.

Here is a sample toggle
                
                  <div class="iv-toggle-switch">

                    <input type="checkbox" name="phone" value="phone" id="phone">

                    <label for="phone"></label>

                  </div>

Tooltip

A tooltip provides a short details about a specific text or element on the UI in a pop-over. The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.

Tooltip Directions:

With IVORY you can show a tooltip in 8 different directions.

Example:

I'm using .tooltip-top class. Hover me A tooltip provides a short description of a UI element. to preview.

I'm using .tooltip-bottom class. Hover me A tooltip provides a short description of a UI element. to preview.

I'm using .tooltip-left class. Hover me A tooltip provides a short description of a UI element. to preview.

I'm using .tooltip-right class. Hover me A tooltip provides a short description of a UI element. to preview.

I'm using .tooltip-top-left class. Hover me A tooltip provides a short description of a UI element. to preview.

I'm using .tooltip-top-right class. Hover me A tooltip provides a short description of a UI element. to preview.

I'm using .tooltip-bottom-right class. Hover me A tooltip provides a short description of a UI element. to preview.

I'm using .tooltip-bottom-left class. Hover me A tooltip provides a short description of a UI element. to preview.

                
                  <p> 

                    <a class="iv-tooltip">Hover me

                      <span class="tooltip-content tooltip-xs top">Tooltip text</span>

                    </a>

                  </p>

Tooltip Size:

IVORY provides tooltips in 4 different sizes, with the following classes:

Class Size

tooltip-xs

10rem

tooltip-sm

15rem

tooltip-md

20rem

tooltip-lg

25rem