Main page
Colors
Page list
Page add
Simple page
Alert Window
Pagination
Validation
Animation
Accordion
Autocomplete
Dialogue
Charts

Style library

New library!

Please use new also new library

https://assets.erply.com/goerp-design-docs/playground/index.html?path=/docs/components-badges--docs

Include the stylesheet in your website <head>

<link rel="stylesheet" href="https://assets.erply.com/bo-prototype/_style.css">

Include the js in your website <head>

<script src="https://assets.erply.com/bo-prototype/js/bo-prototype.bundle.js"></script>

Badges

Colors

  • default
  • primary
  • secondary
  • dark
  • success
  • warning
  • error 

<ul>
    <li class="badge">default</li>
    <li class="badge badge--primary">primary</li>
    <li class="badge badge--secondary">secondary</li>
    <li class="badge badge--dark">dark</li>
    <li class="badge badge--success">success</li>
    <li class="badge badge--warning">warning</li>
    <li class="badge badge--error">error</li>
</ul>

Sizes

  • small badge
  • default badge
  • big badge 

<ul>
    <li class="badge badge--small">small badge</li>
    <li class="badge">default badge</li>
    <li class="badge badge--big">big badge</li>
</ul>

Badge status

Complete Error in progress Success Warning 

     <span class="badge-small text-op bg-opacity-complete">Complete</span>
    <span class="badge-small text-error bg-opacity-error">Error</span>
    <span class="badge-small text-progress bg-opacity-progress">in progress</span>
    <span class="badge-small text-success bg-opacity-success">Success</span>
    <span class="badge-small text-warning bg-opacity-warning">Warning</span>

Breadcrumbs


<nav class="breadcrumbs">
    <div class="aligner aligner--centerVertical">
        <a href="#!" class="crumb-active">Example 1</a>
        <span class="icon-Chevron-Right-Small"></span>
        <a href="#!" class="crumb-active">Example 2</a>
        <span class="icon-Chevron-Right-Small"></span>
        <a href="#!" class="crumb-active">Example 3</a>
        <span class="icon-Chevron-Right-Small"></span>
        <a href="#!" class="crumb text">Example Active</a>
    </div>
</nav>

Tabs

Tab 1 Tab 2 Tab 3 

    <div class="tabs">
      <a href="#" class="tabs-item">Tab 1</a>
      <a href="#" class="tabs-item is-selected">Tab 2</a>
      <a href="#" class="tabs-item">Tab 3</a>
    </div>

Button colors


    <button class="button button--primary">Button</button>
    <button class="button button--medium button--primary">primary</button>
    <button class="button button--medium button--secondary">secondary</button>
    <button class="button button--medium button--green">green</button>
    <button class="button button--medium button--delete">delete</button>
    <button class="button button--medium button--outlined">outlined</button>
    <button class="button button--medium button--transparent">transparent</button>
    <button class="button button--medium button--outlined icon-Star"></button>

Mobile full size


<button class="button button--primary button--mobileFull">Button</button>
<button class="button button--primary button--mobileFull icon-Star"></button>

Button sizes


<button class="button button--primary button--big">Button big</button>
<button class="button button--primary">Button default</button>
<button class="button button--primary button--small">Button small</button>

Buttons Loading


<button  class="button  button--navigation--outlined" id="startButton">
  <i class="icon-Inbox-In margin-right-2"></i>
  <a>Download</a>
</button>
<div class="progressBar">
  <div class="progressBody"></div>
  <i class="margin-right-2"></i>
  <div class="progressText text-center">
  </div>
  <div class="progressIndicator"></div>
</div>

Icon font

All available ERPLY icons. LinkAlways start writing a class with "icon-.."


<i class="icon-Star"></i>

Use font-size and color to change the icon appearance.


<i class="icon-Star" style="font-size: 2rem; color: cornflowerblue;"></i>

Tables

Standard

ID Name Type Location Name
PointOfSaleId Name Type Warehouse 

<table class="table">
  <thead>
    <tr class="text-left">
       <th>ID</th>
       <th>Name</th>
       <th>Type</th>
       <th>Location Name</th>
       <th></th>
    </tr>
  </thead>
<tbody>
    <tr class="row-table">
        <td data-title="#">PointOfSaleId</td>
        <td data-title="Name">Name</td>
        <td data-title="Type">Type</td>
        <td data-title="Location Name">Warehouse</td>
    </tr>
    <tr class="row-table">
        <td data-title="#">PointOfSaleId</td>
        <td data-title="Name">Name</td>
        <td data-title="Type">Type</td>
        <td data-title="Location Name">Warehouse</td>
    </tr>
</tbody>
</table>

Responsive

ID Name Type Location Name
PointOfSaleId Name Type Warehouse 

<table class="table table--responsive">
  <thead>
    <tr class="text-left">
       <th>ID</th>
       <th>Name</th>
       <th>Type</th>
       <th>Location Name</th>
       <th></th>
    </tr>
  </thead>
<tbody>
    <tr class="row-table">
        <td data-title="#">PointOfSaleId</td>
        <td data-title="Name">Name</td>
        <td data-title="Type">Type</td>
        <td data-title="Location Name">Warehouse</td>
    </tr>
    <tr class="row-table">
        <td data-title="#">PointOfSaleId</td>
        <td data-title="Name">Name</td>
        <td data-title="Type">Type</td>
        <td data-title="Location Name">Warehouse</td>
    </tr>
</tbody>
</table>

Typography

Sizes

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet


        <p class="text-huge">Lorem ipsum dolor sit amet</p>
        <p class="text-big">Lorem ipsum dolor sit amet</p>
        <p class="text-medium">Lorem ipsum dolor sit amet</p>
        <p class="text-label">Lorem ipsum dolor sit amet</p>
        <p class="text-small">Lorem ipsum dolor sit amet</p>

Text with subtitle

Text medium

Lorem ipsum dolor sit amet, consectetur adipisicing elit


<p class="text-big text-withSubtitle">Text medium</p>
<p class="text-medium text-gray">Lorem ipsum dolor sit amet</p>

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

commodi eveniet

Veritatis omnis quas distinctio, possimus ratione. Facere iure ea laborum dicta, et aliquam, aspernatur modi.


<p>Lorem ipsum dolor sit amet,
a href="#">commodi eveniet</a>!
Veritatisdicta, et aliquam, aspernatur modi.</p>

Colors

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.


<p class="text-gray">Lorem ipsum dolor sit amet...</p>

<p class="text-primary">Lorem ipsum dolor sit amet...</p>

<p class="text-success">Lorem ipsum dolor sit amet...</p>

<p class="text-error">Lorem ipsum dolor sit amet...</p>

Text aligners

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet


<p class="text-center">Lorem ipsum dolor sit amet</p>

<p class="text-right">Lorem ipsum dolor sit amet</p>

Modifiers

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae atque ut quis enim tenetur culpa voluptatem explicabo accusantium saepe rerum officiis temporibus.


<p class="text-uppercase">Lorem ipsum dolor sit amet...</p>
<p class="text-lineThrough">Lorem ipsum dolor sit amet...</p>
<p class="text-italic">Lorem ipsum dolor sit amet...</p>
<p class="text-underline">Lorem ipsum dolor sit amet...</p>

Forms

Input


<label class="label" for="test10">Input</label>
<div class="input input-fullWidth">
  <input id="test10" placeholder="Input" type="text"/>
</div>

Input with error

Error message!

Input with success

Good password!


<div class="form">
  <label class="label" for=>Input</label>
        <div class="input input-fullWidth has-error">
              <input placeholder="Input" type="text"/>
        </div>
   <p class="text-error text-small">Error message!</p>
</div>

<div class="form">
  <label class="label" >Input</label>
 <div class="input input-fullWidth has-success">
  <input  placeholder="Input" type="text"/>
 </div>
 <p class="text-success text-small">Good password!</p>
</div>

Select


<label class="label" for="country-code">Select</label>
<div class="select select-fullWidth">
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
  </select>
</div>

Select with error

Error message


<label class="label" for="country-code">Select</label>
    <div class="select select-fullWidth has-error">
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
      </select>
    </div>
    <p class="text-error text-small">Error message</p>

Textarea


<label class="label" for="message">Textarea</label>

<div class="textarea  textarea-fullWidth">

  <textarea id="message"></textarea>

</div>

Textarea with error

Error message


<label class="label" for="message">Textarea</label>
<div class="textarea  textarea-fullWidth has-error">
   <textarea id="message"></textarea>
</div>
<p class="text-error text-small">Error message</p>

Radio buttons


        <div class="radio">
            <input id="radio1" name="radio" type="radio" value=""/>
            <label for="radio1" >Radio button 1</label>
        </div>
        <div class="radio">
            <input id="radio2" name="radio" type="radio" value=""/>
            <label for="radio2" >Radio button 2</label>
        </div>
        <div class="radio">
            <input id="radio3" name="radio" type="radio" value=""/>
            <label for="radio3" >Radio button 3</label>
        </div>

Checkboxes


    <div class="checkbox">
        <input id="one" name="#" type="checkbox" value=""/>
        <label for="one">Checkbox 1</label>
    </div>
    <div class="checkbox">
        <input id="two" name="#" type="checkbox" value=""/>
        <label for="two">Checkbox 2</label>
    </div>
    <div class="checkbox">
        <input id="three" name="#" type="checkbox" value=""/>
        <label for="three">Checkbox 3</label>
    </div>

Switches


        <div class="switches-main b2" id="button-15">

        <input type="checkbox" class="switches"/>

        <div class="knobs"></div>

        <div class="layer"></div>

        </div>

Forms joined


        <div class="p-big border-bottom">
        <div class="formjoined m-none">
            <div class="input formjoined-item formCollapsed-itemPrimary">
                <input id="test8" placeholder="Search" type="text"/>
            </div>
            <button class="formjoined-item button button--primary">Search</button>
        </div>
        </div>
    

                     <div class="formjoined">
        <div class="select formCollapsed-item formjoined-itemPrimary">
            <select name="country-code" id="country-code">
              <option>Vincent</option>
              <option>Jules</option>
              <option>Mia </option>
              <option>Butch</option>
            </select>
        </div>
        <div class="select formjoined-item formjoined-itemPrimary">
            <select name="country-code" id="country-code">
              <option>Mr. White</option>
              <option>Mr. Orange</option>
              <option>Mr. Pink</option>
              <option>Mr. Blonde</option>
            </select>
        </div>
        <div class="select formjoined-item formCollapsed-itemPrimary">
            <select name="country-code" id="country-code">
              <option>Shaw </option>
              <option>Kelly</option>
              <option>Doyle </option>
              <option>Lt. William</option>
            </select>
            </div>
        </div>

Notifications

Info message

Message

Info message

Message

Info message

Message

Info message

Message

Info message

Message

Info message

Message

Info message

Message

Info message

Message


<div class="notification notification--error aligner aligner--spaceBetween row">
    <span class="icon-Radiobutton-Off-2 aligner aligner--centerVertical margin-right-16"></span>
    <div class="col">
    <p><b>Info message</b></p>
    <p class="text-small margin-top-4">Message</p>
    </div>
</div>



<div class="notification bg-primary-background-100 aligner aligner--spaceBetween row">
    <span class="dark icon-Radiobutton-Off-2 aligner aligner--centerVertical margin-right-16"></span>
    <div class="col">
      <p class="text-dark"><b>Info message</b></p>
      <p class="text-small text-dark margin-top-4">Message</p>
    </div>
</div>

Borders

Top bottom



    <div class="border-top border-bottom"></div>

Left right



    <div class="border-left border-right"></div>

Containers

Standard


<div class="container"></div>

Medium


<div class="container-medium"></div>

Small


<div class="container-small"></div>

Grid


<div class="container">
    <div class="row">
        <div class="col bg-gray-light"></div>
        <div class="col bg-gray"></div>
        <div class="col bg-gray-light"></div>
        <div class="col bg-gray"><</div>
    </div>
</div>

Gap

Available gaps

gap-12px, gap-14px, gap-16px, gap-18px, gap-20px, gap-24px, gap-30px, gap-32px










<div class="container">
    <div class="row gap-16px">
        <div class="col bg-gray-light"></div>
        <div class="col bg-gray"></div>
        <div class="col bg-gray-light"></div>
        <div class="col bg-gray"></div>
    </div>
</div>

Equal width, responsive columns

Available responsive classes:
col-sm <!-- Equal width on small, medium, large and extra large devices -->
col-md <!-- Equal width on medium, large, and extra large devices -->
col-lg <!-- Equal width on large, and extra large devices -->
col-xl <!-- Equal width on extra large devices -->

3/12
3/12
3/12
3/12

<div class="container">
    <div class="row">
        <div class="col-sm bg-gray-light p-medium text-gray">3/12</div>
        <div class="col-sm bg-gray p-medium text-white">3/12</div>
        <div class="col-sm bg-gray-light p-medium text-gray">3/12</div>
        <div class="col-sm bg-gray p-medium text-white">3/12</div>
    </div>
</div>

Variable width

4/12
2/12
4/12
2/12

<div class="container">
    <div class="row">
        <div class="col-sm-4 bg-gray-light  text-gray">4/12</div>
        <div class="col-sm-2 bg-gray  text-white">2/12</div>
        <div class="col-sm-4 bg-gray-light text-gray">4/12</div>
        <div class="col-sm-2 bg-gray  text-white">2/12</div>
    </div>
</div>

Nesting

Col

Nested col
Nested col

Col


<div class="container">
    <div class="row"> <!-- First level row -->
        <div class="col bg-gray-light p-medium text-gray">
        <p class="mb-small">Col</p>
            <div class="container">
                <div class="row"> <!-- Nested row -->
                <div class="col bg-gray p-medium text-white">Nested col</div>
                <div class="col bg-white p-medium ">Nested col</div>
            </div>
        </div>
        </div>
            <div class="col bg-gray p-medium text-white">
            <p class="mb-small">Col</p>
        </div>
    </div>
</div>

Aligners

Space around

Image 1
Image 2

<div class="aligner aligner--spaceAround">
<div><img src="img/img.jpg" width="50"></div>
<div><img src="img/img.jpg" width="50"></div>
</div>

Space between

Image 1
Image 2

<div class="aligner aligner--spaceBetween">
<div><img src="img/img.jpg" width="50"/></div>
<div><img src="img/img.jpg" width="50"/></div>
</div>

Content start

Image

<div class="aligner aligner--contentStart">
<div><img src="img/img.jpg" width="50"/></div>
</div>

Content end

Image

<div class="aligner aligner--contentEnd">
<div><img src="img/img.jpg" width="50"/></div>
</div>

Center vertical

Image

<div class="aligner aligner--centerVertical">
<div><img src="img/img.jpg" width="50"/></div>
</div>

Center vertical and horizontal

Image

<div class="aligner aligner--centerHoritzontal aligner--centerVertical">
<div><img src="img/img.jpg" width="50"/></div>
</div>

Image modifiers

Circle

# 

<img class="rounded" src="../img/img1.jpg" alt="#" width="100">

Rouded corners

# 

<img class="rounded-corners" src="../img/img6.jpg" alt="#" width="100">

Properties

Available sizes and sides

0, 2, 4, 8, 16, 18, 20, 24, 32, 36, 48, 64 *px

margin, margin-top, margin-bottom, margin-left, margin-right

padding, padding-top, padding-bottom, padding-left, padding-right

Example

<div class="badge margin-left-64">Example</div>

Loading bar



<div class="loadingBar" style="display: none;"></div>