CSS
Copy-paste the stylesheet <link> into <head> before all other stylesheets to load our CSS.
Download CSS files libs.min.css, main.min.css
<link rel="stylesheet" type="text/css" href="yourpath/libs.min.css" />
<link rel="stylesheet" type="text/css" href="yourpath/main.min.css" />JS
Copy-paste the js <script> before </body> to load our JS.
Download libs.min.js.zip, main.js.zip. Extract JS files from archive to your path.
<script src="yourpath/jquery-3.3.1.min.js"></script>
<script src="yourpath/jquery-ui-1.12.1.min.js"></script>
<script src="yourpath/jquery-ui-touch-punch.js"></script>
<script src="yourpath/modernizr.custom.js"></script>
<script src="yourpath/svg4everybody.min.js"></script>
<script src="yourpath/ofi.min.js"></script>
<script src="yourpath/jquery.appear.js"></script>
<script src="yourpath/jquery.fileupload.js"></script>
<script src="yourpath/datatables.min.js"></script>
<script src="yourpath/highlight.js"></script>
<script src="yourpath/select2.min.js"></script>
<script src="yourpath/main.js"></script>
Images
SVG-icons sprite and other textures pack
Sketch
Download sketch file
Change Log
New category
PAGE COMPONENTS
which now contains:- Breadcrumbs;
- Pagination;
- Modals;
- Spinner;
- Signature part;
- Pills;
- Badges;
- Empty element;
- Reply sections/comments.
REPLY SECTION/COMMENTS
- Input field is now dynamic;
- attach file icon’ has been moved to the left, outside the field;
- Border between messages and input field has been added, paddings inside replies-section-body have been changed;
- Added attached files in messages and file attachment process.
TABLES
- Icons/buttons in vertically transformed tables on mobile are now left-aligned;
- New table style – Multi Level Table.
TOOLTIPS
- Added horizontal tooltip.
EMPTY STATE
- Empty state – new element.
REPLY SECTION
- Reply section – new element.
TABLES
- Busy table - new table style.
- Responsive state for regular tables – vertical transformation.
- Changed aligning of text in tables to top.
NAVBARS
- Left Menu - Section Names are now bold.
- Left Menu - background color #FBFDFE.
- Main Menu – updated.
BADGE
- Added small badge.
BUTTONS
- Icon with transparent background – new element.
ICONS
- New icons in sprite.
SWITCHES
- New switch style for dark background
OTHER
- Scroll bar – updated.
BUG FIXES
- Removed opacity from placeholders.
- Added space on top and bottom of dropdown scroll area.
- Removed width from datepicker period.
- Fixed icons in alerts.
Select
- Fixed issue with 100% width of select dropdown
Icons
- Added new icon in sprite
Buttons and Tabs
- Button groups - mobile version
- Left side menu tabs – active/inactive tab styles switched to match other tabs
- Top menu tabs
-
Updated spacing inside the tab – new values explained
here
- New tab without icon (name + hint text)
- Missing font style added – Roboto Condensed Italic
- Horizontal scrolling on mobile
Dropdown Menus
- Dropdown list with icons added – spacing is a bit different from dropdown list without icons
Forms
-
search field style used in multiselect should be universal
- fixed issue where upon opening multiselect menu, search filed was automatically in focus
- Fixed issue with incorrect arrow position in accordions
-
new datepicker type – Datepicker period
- fixed incorrect spacing in selects
- added style for partially selected checkboxed – can be found in Nested Lists and Alternative Multiselect
Components - Navbar
- Changed style for Main menu - button Summary Dashboard
- changed hover style for client select and button Go
Components - Forms and Lists
- added form sections for spacing reference in complex forms
-
new nested list type with multiselect and icons
- fixed incorrect spacings in accordions
- new small pills
Components - Modals
- fixed spacing for X button in modals
Icons
- Added new icons in sprite
Alerts
<div class="message message--success">
<span class="icon-svg-wrap"></span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
<p>
<a href="#" class="link-txt">some link goes here</a>
</p>
</div>
<div class="message message--warning">
<span class="icon-svg-wrap"></span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
</div>
<div class="message message--alert">
<span class="icon-svg-wrap"></span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
</div>
<div id="alert-1" class="message message--success message--bg message--inter active">
<button type="button" class="message__cross" data-close="alert-1"></button>
<span class="icon-svg-wrap"></span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
<p>
<a href="#" class="link-txt">some link goes here</a>
</p>
</div>
<div id="alert-2" class="message message--warning message--bg message--inter active">
<button type="button" class="message__cross" data-close="alert-2"></button>
<span class="icon-svg-wrap"></span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
</div>
<div id="alert-3" class="message message--alert message--bg message--inter active">
<button type="button" class="message__cross" data-close="alert-3"></button></span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
</div>
Nested List
There are 2 types of accordion behavior in the UI:
1) "Bound" is the default one. Within one type of nesting only one block can be expanded simultaneously, all the siblings will be collapsed.
2) "Unbound" is activated by adding the class “w-unbound” to the element with the class "w-accord". In this case, all blocks can be expanded simultaneously.
<div class="accordion type-1 w-accord">
<button class="accordion__head w-accord-head active"></button>
<div class="accordion__body w-accord-body active">
<div class="accordion type-2 w-accord">
<button class="accordion__head w-accord-head"></button>
<div class="accordion__body w-accord-body">
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
</div>
</div>
<div class="accordion type-2 w-accord">
<button class="accordion__head w-accord-head"></button>
<div class="accordion__body w-accord-body">
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
</div>
</div>
<div class="accordion type-2 w-accord">
<button class="accordion__head w-accord-head"></button>
<div class="accordion__body w-accord-body">
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
</div>
</div>
</div>
</div>
<div class="accordion type-1 w-accord">
<button class="accordion__head w-accord-head"></button>
<div class="accordion__body w-accord-body">
<div class="accordion type-2 w-accord">
<button class="accordion__head w-accord-head"></button>
<div class="accordion__body w-accord-body">
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
</div>
</div>
<div class="accordion type-2 w-accord">
<button class="accordion__head w-accord-head"></button>
<div class="accordion__body w-accord-body">
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
</div>
</div>
<div class="accordion type-2 w-accord">
<button class="accordion__head w-accord-head"></button>
<div class="accordion__body w-accord-body">
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
</div>
</div>
</div>
</div>
<div class="accordion type-1 w-accord">
<button class="accordion__head w-accord-head"></button>
<div class="accordion__body w-accord-body">
<div class="accordion type-2 w-accord">
<button class="accordion__head w-accord-head"></button>
<div class="accordion__body w-accord-body">
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
</div>
</div>
<div class="accordion type-2 w-accord">
<button class="accordion__head w-accord-head"></button>
<div class="accordion__body w-accord-body">
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
</div>
</div>
<div class="accordion type-2 w-accord">
<button class="accordion__head w-accord-head"></button>
<div class="accordion__body w-accord-body">
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file"/>
</svg>
</span>
<span></span>
</a>
</div>
</div>
</div>
</div>
Multiselect with Nested List
Bound Behavior
Bound Behavior
This multiselect element is implemented using the standard Nested List element.
<div class="multiselect-accordion accordion type-1 w-accord w-multiselect-accordion">
<div class="accordion__head w-accord-head active">
Bound Behavior
<div class="accordion-head__buttons-wrap">
<span class="icon-svg-wrap icon-svg-wrap--btn">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-edit-24"></use>
</svg>
</span>
<span class="icon-svg-wrap icon-svg-wrap--btn">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-bin"></use>
</svg>
</span>
</div>
</div>
<div class="accordion__body w-accord-body active">
<div class="accordion type-2 w-accord">
<div class="accordion__head w-accord-head">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input multiselect-accordion__check-group">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Group name</span>
</label>
</div>
<div class="accordion__body w-accord-body">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
</div>
</div>
<div class="accordion type-2 w-accord">
<div class="accordion__head w-accord-head">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input multiselect-accordion__check-group">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Group name</span>
</label>
</div>
<div class="accordion__body w-accord-body">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
</div>
</div>
<div class="accordion type-2 w-accord">
<div class="accordion__head w-accord-head">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input multiselect-accordion__check-group">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Group name</span>
</label>
</div>
<div class="accordion__body w-accord-body">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
</div>
</div>
</div>
</div>
<div class="multiselect-accordion accordion type-1 w-accord w-multiselect-accordion">
<div class="accordion__head w-accord-head">
Bound Behavior
<div class="accordion-head__buttons-wrap">
<span class="icon-svg-wrap icon-svg-wrap--btn">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-edit-24"></use>
</svg>
</span>
<span class="icon-svg-wrap icon-svg-wrap--btn">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-bin"></use>
</svg>
</span>
</div>
</div>
<div class="accordion__body w-accord-body">
<div class="accordion type-2 w-accord">
<div class="accordion__head w-accord-head">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input multiselect-accordion__check-group">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Group name</span>
</label>
</div>
<div class="accordion__body w-accord-body">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
</div>
</div>
<div class="accordion type-2 w-accord">
<div class="accordion__head w-accord-head">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input multiselect-accordion__check-group">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Group name</span>
</label>
</div>
<div class="accordion__body w-accord-body">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
</div>
</div>
<div class="accordion type-2 w-accord">
<div class="accordion__head w-accord-head">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input multiselect-accordion__check-group">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Group name</span>
</label>
</div>
<div class="accordion__body w-accord-body">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
</div>
</div>
</div>
</div>
Dropdown button
1) To open a dropdown element add data attribute "data-drop" to the element which initiates the dropdown element opening, and specify the dropdown ID in it.
2) By default the dropdown emerges below the element and is aligned to the left edge of the element initiating the dropdown.
3) To determine dropdown position automatically, write data attribute “data-drop-position” to the element initiating the dropdown.
4) Element initiating the dropdown and the dropdown element must have one parent and absolute positioning.
<div class="btn-group">
<button class="btn btn--primary btn--drop" data-drop="dropdown-1" data-drop-position="">Dropdown button
</button>
<ul id='dropdown-1' class='w-dropdown dropdown stppg'>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>
<span>Lorem ipsum dolor.</span>
<span class='indicator alert'>1</span>
</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>
<span>Lorem ipsum dolor.</span>
<span class='indicator alert'>12</span>
</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>Lorem ipsum dolor.</a>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn--primary btn--icon-txt btn--icon-left btn--drop" data-drop="dropdown-2" data-drop-position="dropdown-2">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-save"/>
</svg>
</span>
Dropdown button
</button>
<ul id='dropdown-2' class='w-dropdown dropdown stppg'>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>
<span>Lorem ipsum dolor.</span>
<span class='indicator alert'>1</span>
</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>
<span>Lorem ipsum dolor.</span>
<span class='indicator alert'>12</span>
</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>Lorem ipsum dolor.</a>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn--primary btn--icon-txt btn--icon-left btn--drop" disabled>
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-save"/>
</svg>
</span>
Dropdown button
</button>
</div>
<div class="btn-group">
<button class="btn btn--primary btn--prev-to-drop-split">Dropdown split button</button>
<button type="button" class="btn btn--primary btn--drop-split" data-drop="dropdown-2-1" data-drop-position="dropdown-2-2"></button>
<ul id='dropdown-2-1' class='w-dropdown dropdown stppg'>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>Lorem ipsum dolor.</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>Lorem ipsum dolor.</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>Lorem ipsum dolor.</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>Lorem ipsum dolor.</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>Lorem ipsum dolor.</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>Lorem ipsum dolor.</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>Lorem ipsum dolor.</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>Lorem ipsum dolor.</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>Lorem ipsum dolor.</a>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn--primary btn--icon-txt btn--icon-left btn--prev-to-drop-split">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-save"/>
</svg>
</span>
<span>Dropdown split button</span>
</button>
<button type="button" class="btn btn--primary btn--drop-split" data-drop="dropdown-2-2" data-drop-position="dropdown-2-2"></button>
<ul id='dropdown-2-2' class='w-dropdown dropdown stppg'>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>
<span>Lorem ipsum dolor.</span>
<span class='indicator alert'>1</span>
</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>
<span>Lorem ipsum dolor.</span>
<span class='indicator alert'>12</span>
</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>Lorem ipsum dolor.</a>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn--primary btn--icon-txt btn--icon-left btn--prev-to-drop-split">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-save"/>
</svg>
</span>
<span>Dropdown split button</span>
</button>
<button type="button" class="btn btn--primary btn--drop-split" data-drop="dropdown-2-3" data-drop-position="dropdown-2-2"></button>
<ul id='dropdown-2-3' class='w-dropdown dropdown dropdown--with-icons stppg'>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item dropdown__item--icon'>
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-plus"/>
</svg>
</span>
<span>Lorem ipsum dolor.</span>
</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item dropdown__item--icon'>
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-edit"/>
</svg>
</span>
<span>Lorem ipsum dolor.</span>
</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item dropdown__item--icon'>
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-add-user"/>
</svg>
</span>
<span>Lorem ipsum dolor.</span>
</a>
</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn-alt btn-alt--icon btn-alt--drop" data-drop="dropdown-filter-1" data-drop-position="dropdown-filter-1">
<span class="btn-alt__icon">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-save"/>
</svg>
</span>
</span>
<span>Button</span>
</button>
<ul id='dropdown-filter-1' class='w-dropdown dropdown stppg'>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>option 1</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>option 2</a>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item'>option 3</a>
</li>
</ul>
</div>
<button type="button" class="btn-alt btn-alt--drop" data-drop="dropdown-actions" data-drop-position="dropdown-actions">
<span>Actions</span>
</button>
<ul id='dropdown-actions' class='w-dropdown dropdown dropdown--menu stppg'>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item dropdown__item--submenu-l1 dropdown__item--drop'>
Copy From
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-copy" />
</svg>
</span>
</a>
<ul class="dropdown dropdown__submenu">
<li class="dropdown__item-wrap"><a href="#" class="dropdown__item">Apr 23 - Apr 29</a></li>
<li class="dropdown__item-wrap"><a href="#" class="dropdown__item">Apr 30 - May 6</a></li>
<li class="dropdown__item-wrap"><a href="#" class="dropdown__item">May 7 - May 13</a></li>
<li class="dropdown__item-wrap"><a href="#" class="dropdown__item">May 14 - May 20</a></li>
<li class="dropdown__item-wrap"><a href="#" class="dropdown__item">May 21 - May 27</a></li>
<li class="dropdown__item-wrap"><a href="#" class="dropdown__item">May 28 - Jun 3</a></li>
</ul>
</li>
<li class='dropdown__item-wrap'>
<a href="#" class='dropdown__item dropdown__item--submenu-l1'>
Export PDF
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-file" />
</svg>
</span>
</a>
</li>
</ul>
Example of form elements interposition
Example with table layout
|
|
|
|
Hint text helping with filling out the form.
|
|
|
Text warning about errors and conditions.
|
|
|
|
Example with simple form cell layout
Example with form sections
Operational Calendar
Operational Calendar
NDCP categories included in the cost:
To see layout for resolution less than 960px minimize the window to the required resolution.
<table class="form">
<tr>
<td>
<label for="id-1" class="form-label">Input Name</label>
</td>
<td>
<div class="form-item-wrap">
<input id="id-1" type="text" class="form-item" placeholder="Input Text">
</div>
</td>
</tr>
<tr>
<td>
<label for="id-2" class="form-label">Long Input Name</label>
</td>
<td>
<div class="form-item-wrap">
<input id="id-2" type="text" class="form-item" placeholder="Input Text">
</div>
<div class="form-hint">Hint text helping with filling out the form.</div>
</td>
</tr>
<tr>
<td>
<label for="id-3" class="form-label">Select Name</label>
</td>
<td>
<div class="form-item-wrap">
<select id="id-2" type="text" class="form-item select2" >
<option value="">Select Option</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>
</div>
<label class="checkbox under">
<input id="checkbox-txt" type="checkbox">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Input label text</span>
</label>
<div class="form-hint error active">Text warning about errors and conditions.</div>
</td>
</tr>
<tr>
<td>
<label for="id-4" class="form-label">Input Name</label>
</td>
<td>
<div class="form-item-wrap date">
<input type="text" class="form-item datepicker" value='06/29/2018' readonly="" autocomplete="off">
<span class='icon-svg-wrap'>
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-calendar"/>
</svg>
</span>
</div>
<label class="radio under">
<input id="radio-txt" type="radio" name="radio-form">
<span class="radio__pseudo-check"></span>
<span class="radio__txt">Input label text</span>
</label>
<label class="radio under">
<input id="radio-txt" type="radio" name="radio-form">
<span class="radio__pseudo-check"></span>
<span class="radio__txt">Input label text</span>
</label>
</td>
</tr>
</table>
<div class="form-cell under">
<label for="single-cell" class="form-label">Input Name</label>
<div class="form-item-wrap">
<input id="single-cell" type="text" class="form-item">
</div>
</div>
<div class="form-cell under">
<label for="single-cell" class="form-label">Long Input Name</label>
<div class="form-item-wrap">
<input id="single-cell" type="text" class="form-item">
</div>
</div>
Inputs
Active
Warning
Error
Success
Disabled
<div class="form-item-wrap">
<input type="text" class="form-item">
</div>
<div class="form-item-wrap warning">
<input type="text" class="form-item">
</div>
<div class="form-item-wrap error">
<input type="text" class="form-item">
</div>
<div class="form-item-wrap success">
<input type="text" class="form-item">
</div>
<div class="form-item-wrap disabled">
<input type="text" class="form-item" disabled>
</div>
Input Groups
<div class="form-item-wrap form-item-wrap--group">
<div class="form-item-prepend">
<span class='icon-svg-wrap'>
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-save"/>
</svg>
</span>
</div>
<input type="text" class="form-item">
</div>
<div class="form-item-wrap form-item-wrap--group">
<div class="form-item-prepend">
<label class="checkbox">
<input id="checkbox-group" type="checkbox">
<span class="checkbox__pseudo-check"></span>
</label>
</div>
<input type="text" class="form-item">
</div>
<div class="form-item-wrap form-item-wrap--group">
<div class="form-item-prepend">
<label class="radio">
<input id="radio-group" type="radio" name="radio-group">
<span class="radio__pseudo-check"></span>
</label>
</div>
<input type="text" class="form-item">
</div>
<div class="form-item-wrap form-item-wrap--group">
<div class="form-item-prepend">
<label class="checkbox">
<input id="checkbox-group-descript" type="checkbox">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Global Function</span>
</label>
</div>
<input type="text" class="form-item">
</div>
Checkbox & radio button
Input not label text
<label class="checkbox">
<input type="checkbox">
<span class="checkbox__pseudo-check"></span>
</label>
<label class="checkbox error">
<input type="checkbox">
<span class="checkbox__pseudo-check"></span>
</label>
<label class="checkbox">
<input type="checkbox" checked disabled>
<span class="checkbox__pseudo-check"></span>
</label>
<label class="checkbox">
<input type="checkbox">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Input label text</span>
</label>
<label class="checkbox">
<input type="checkbox">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Input text<br>takes two rows</span>
</label>
<div class="checkbox">
<input id="checkbox-not-label" type="checkbox">
<label for="checkbox-not-label" class="checkbox__pseudo-check"></label>
<span class="checkbox__txt">Input not label text</span>
</div>
Select
Select regular
Select with groups and filter
Select error
Select warning
Select disabled
To implement select elements use Select2
Add class "select2" to the "select" element.
To embed search in the "select" element, add class "filter" to it.
<div class="form-item-wrap" >
<select class="form-item select2" name="" id="">
<option value="">option 0</option>
<option value="">option 1</option>
<option value="">option 2</option>
<option value="" disabled>option 3</option>
</select>
</div>
<div class="form-item-wrap" >
<select class="form-item select2 filter" name="" id="">
<optgroup label="Group 1">
<option value="">option 1-0</option>
<option value="">option 1-1</option>
<option value="">option 2-1</option>
</optgroup>
<optgroup label="Group 2">
<option value="">option 2-1</option>
<option value="">option 2-2</option>
<option value="">option 2-3</option>
<option value="">option 2-4</option>
<option value="">option 2-5</option>
</optgroup>
</select>
</div>
<div class="form-item-wrap error" >
<select class="form-item select2" name="" id="">
<option value="">option 0</option>
<option value="">option 1</option>
<option value="">option 2</option>
<option value="" disabled>option 3</option>
</select>
</div>
<div class="form-item-wrap warning">
<select class="form-item select2" name="" id="">
<option value="">option 0</option>
<option value="">option 1</option>
<option value="">option 2</option>
<option value="" disabled>option 3</option>
</select>
</div>
<div class="form-item-wrap disabled" >
<select class="form-item select2" name="" id="" disabled="">
<option value="">- Select -</option>
<option value="">option 1</option>
<option value="">option 2</option>
</select>
</div>
Multiselect
Select2 Multiselect
Select2 Multiselect with groups
Select2 Multiselect with filter
To implement multiselect elements use Select2
Add class "select2" and class "multiple" to the "select" element and specify the attribute multiple = "multiple" on it.
To embed search in the "select" element, add class "filter" to it.
<div class="form-item-wrap">
<select class="form-item select2 multiple" multiple="multiple">
<option value="1-0">option 1-0</option>
<option value="1-1">option 1-1</option>
<option value="2-1">option 2-1</option>
<option value="2-0">option 2-0</option>
<option value="2-1">option 2-1</option>
<option value="2-2">option 2-2</option>
</select>
</div>
<div class="form-item-wrap">
<select class="form-item select2 multiple" multiple="multiple">
<optgroup label="Group 1">
<option value="1-0">option 1-0</option>
<option value="1-1">option 1-1</option>
<option value="2-1">option 2-1</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-0">option 2-0</option>
<option value="2-1">option 2-1</option>
<option value="2-2" disabled="">option 2-2</option>
</optgroup>
</select>
</div>
<div class="form-item-wrap">
<select class="form-item select2 multiple filter" multiple="multiple">
<optgroup label="Group 1">
<option value="1-0">option 1-0</option>
<option value="1-1">option 1-1</option>
<option value="2-1">option 2-1</option>
</optgroup>
<optgroup label="Group 2">
<option value="2-0">option 2-0</option>
<option value="2-1">option 2-1</option>
<option value="2-2" disabled="">option 2-2</option>
</optgroup>
</select>
</div>
Multiselect alternative
This multiselect element is implemented using the standard dropdown element.
<div class="multiselect-alt">
<div class="form-item-wrap" data-drop="multiselect-alt" data-drop-position>
<input class="form-item" value="Select option" readonly="">
</div>
<div id="multiselect-alt" class="multiselect-alt__menu dropdown w-dropdown">
<div class="form-item-wrap">
<input type="text" class="form-item" placeholder="Search...">
</div>
<div class="multiselect-alt__helper">
<button type="button" class="multiselect-alt__checkall">Check All</button>
<button type="button" class="multiselect-alt__uncheckall">Uncheck All</button>
</div>
<div id="options-1" class="multiselect-alt__options">
<div class="accordion type-4 w-accord w-unbound w-multiselect-accordion">
<div class="accordion__head w-accord-head">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input multiselect-accordion__check-group">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Group Name</span>
</label>
</div>
<div class="accordion__body w-accord-body">
<div class="accordion type-4 w-accord w-unbound">
<div class="accordion__head w-accord-head">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input multiselect-accordion__check-group">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
</div>
<div class="accordion__body w-accord-body">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1-1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1-2</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1-3</span>
</label>
</div>
</div>
<div class="accordion type-4 w-accord w-unbound">
<div class="accordion__head w-accord-head">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input multiselect-accordion__check-group">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 2</span>
</label>
</div>
<div class="accordion__body w-accord-body">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 2-1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 2-2</span>
</label>
</div>
</div>
</div>
</div>
<div class="accordion type-4 w-accord w-unbound w-multiselect-accordion">
<div class="accordion__head w-accord-head">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input multiselect-accordion__check-group">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Group Name</span>
</label>
</div>
<div class="accordion__body w-accord-body">
<div class="accordion type-4 w-accord w-unbound">
<div class="accordion__head w-accord-head">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input multiselect-accordion__check-group">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1</span>
</label>
</div>
<div class="accordion__body w-accord-body">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1-1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 1-2</span>
</label>
</div>
</div>
<div class="accordion type-4 w-accord w-unbound">
<div class="accordion__head w-accord-head">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input multiselect-accordion__check-group">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 2</span>
</label>
</div>
<div class="accordion__body w-accord-body">
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 2-1</span>
</label>
<label class="checkbox stppg">
<input type="checkbox" class="checkbox__input">
<span class="checkbox__pseudo-check"></span>
<span class="checkbox__txt">Select Option 2-2</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Select in header
Select in header
To implement select elements use select2
Add class "select2" to the "select" element.
To embed search in the "select" element, add class "filter" to it.
<div class="form-item-wrap form-item-wrap--header-select">
<select class="form-item select2 filter" data-dropdown-css-class="header-select-dropdown">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
<option value="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</option>
<option value="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</option>
<option value="">Option 7</option>
<option value="">Option 8</option>
<option value="">Option 9</option>
<option value="">Option 10</option>
</select>
</div>
DATEPICKER
Active Date Picker
Active Date Picker (Past Dates)
Disabled Date Picker
Error Date Picker
Week range
Jun 4 - Jun 14
Datepicker range
05/12/2019 - 05/15/2019
Datepicker multiple
05/29/2019; 05/30/2019
Datepicker period
Select Period
<div class="form-item-wrap date">
<input type="text" class="form-item datepicker" value="" readonly="" autocomplete="off">
<span class='icon-svg-wrap'>
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-calendar"/>
</svg>
</span>
</div>
<div class="form-item-wrap date">
<input type="text" class="form-item datepicker" value="" readonly="" autocomplete="off" data-period="30">
<span class='icon-svg-wrap'>
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-calendar"/>
</svg>
</span>
</div>
<div class="form-item-wrap date disabled">
<input type="text" class="form-item datepicker" disabled="" readonly="" autocomplete="off" value="">
<span class='icon-svg-wrap'>
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-calendar"/>
</svg>
</span>
</div>
<div class="form-item-wrap date error">
<input type="text" class="form-item datepicker" readonly="" autocomplete="off" value="">
<span class='icon-svg-wrap'>
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-calendar"/>
</svg>
</span>
</div>
<div class="ui-kit-cell">
<div class="ui-kit-label">Week range</div>
<div class="form-item-wrap date week">
<input type="text" class="form-item datepicker week" readonly="" autocomplete="off" value="">
<span class="form-item">Jun 4 - Jun 14</span>
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-calendar"/>
</svg>
</span>
</div>
</div>
<div class="ui-kit-cell">
<div class="ui-kit-label">Datepicker range</div>
<div class="form-item-wrap date range">
<input type="text" class="form-item datepicker range" readonly="" autocomplete="off" value="">
<span class="form-item">05/12/2019 - 05/15/2019</span>
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-calendar" />
</svg>
</span>
</div>
</div>
<div class="form-item-wrap date multiple">
<input type="text" class="form-item datepicker multiple" readonly="" autocomplete="off" value="">
<span class="form-item">05/29/2019; 05/30/2019</span>
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-calendar" />
</svg>
</span>
</div>
<div class="form-item-wrap form-item-wrap--year-period">
<input type="text" class="form-item form-item--year-period" readonly="" autocomplete="off" value="Mar 26 - Apr 22" data-drop="datepicker-period" data-popover-position="">
</div>
<div id="datepicker-period" class="w-dropdown popover popover--year-period">
<div class="popover__cross" data-close="datepicker-period"></div>
<div class="popover__head">Select Period</div>
<div class="popover__body">
<div class="form-row form-row--start">
<div class="form-item-wrap form-item-wrap--period form-item-wrap--period-year">
<select class="form-item select2">
<option value="">2019</option>
<option value="">2018</option>
<option value="">2017</option>
<option value="" disabled>2016</option>
</select>
</div>
<div class="form-item-wrap form-item-wrap--period form-item-wrap--period-period">
<select class="form-item select2">
<option value="">Period 4, 2019</option>
<option value="">Period 3, 2019</option>
<option value="">Period 2, 2019</option>
</select>
</div>
</div>
</div>
</div>
TIMEPICKER
Active Time Picker (Big)
:
Disabled Time Picker
Error Time Picker
Expanded - time period
Time Period
:
-
:
<div class="form-item-wrap time big">
<input id="time-1" type="text" class="form-item" value="09:00 PM" readonly="" autocomplete="off" autocapitalize="off" spellcheck="false" data-drop="timepicker-1" data-drop-position>
<span class='icon-svg-wrap'>
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-clock"/>
</svg>
</span>
<div id="timepicker-1" class="w-dropdown dropdown timepicker big">
<div class="form-item-wrap form-item-wrap--timepicker">
<input id="timepicker-hours-pickup" type="text" class="form-item form-item--timepicker hours w-num" readonly="" maxlength="2" data-time="time-1" autocomplete="off" autocapitalize="off" spellcheck="false">
<div class="timepicker__arrows-wrap">
<button type="button" class="timepicker__arrow timepicker__arrow--plus hours plus" data-time="timepicker-hours-pickup" data-period="pickup-period"></button>
<button type="button" class="timepicker__arrow timepicker__arrow--minus hours minus" data-time="timepicker-hours-pickup" data-period="pickup-period"></button>
</div>
</div>
<div class="timepicker__colon">:</div>
<div class="form-item-wrap form-item-wrap--timepicker">
<input id="timepicker-minutes-pickup" type="text" class="form-item form-item--timepicker minutes w-num" readonly="" maxlength="2" data-time="time-1" autocomplete="off" autocapitalize="off" spellcheck="false">
<div class="timepicker__arrows-wrap">
<button type="button" class="timepicker__arrow timepicker__arrow--plus minutes plus" data-time="timepicker-minutes-pickup" data-hours="timepicker-hours-pickup" data-period="pickup-period"></button>
<button type="button" class="timepicker__arrow timepicker__arrow--minus minutes minus" data-time="timepicker-minutes-pickup" data-hours="timepicker-hours-pickup" data-period="pickup-period"></button>
</div>
</div>
<div id="pickup-period" class="timepicker__ampm-wrap w-tab-parent">
<button type="button" class="w-tab timepicker__ampm am current" data-time="time-1">AM</button>
<button type="button" class="w-tab timepicker__ampm pm" data-time="time-1">PM</button>
</div>
</div>
</div>
<div class="form-item-wrap time period big">
<input id="time-2" type="text" class="form-item" value="09:00 pm - 10:00 pm" readonly="" autocomplete="off" autocapitalize="off" spellcheck="false" data-drop="timepicker-2" data-popover-position="">
<span class='icon-svg-wrap'>
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-clock"/>
</svg>
</span>
</div>
<div id="timepicker-2" class="w-dropdown popover timepicker timepicker-mini big">
<div class="popover__cross" data-close="timepicker-2"></div>
<div class="popover__head">Time Period</div>
<div class="popover__body">
<div class="timepicker-period__wrap">
<div class="form-item-wrap form-item-wrap--timepicker-mini">
<button type="button" class="timepicker-mini__arrow timepicker-mini__arrow--plus hours plus" data-time="timepicker-mini-hours-pickup-start" data-period="timepicker-mini-ampm-pickup-start"></button>
<input id="timepicker-mini-hours-pickup-start" type="text" class="form-item form-item--timepicker-mini hours start w-num" readonly="" maxlength="2" data-time="time-2" autocomplete="off" autocapitalize="off" spellcheck="false">
<button type="button" class="timepicker-mini__arrow timepicker-mini__arrow--minus hours minus" data-time="timepicker-mini-hours-pickup-start" data-period="timepicker-mini-ampm-pickup-start"></button>
<div class="timepicker-mini__colon">:</div>
<button type="button" class="timepicker-mini__arrow timepicker-mini__arrow--plus minutes plus" data-time="timepicker-mini-minutes-pickup-start" data-hours="timepicker-mini-hours-pickup-start" data-period="timepicker-mini-ampm-pickup-start"></button>
<input id="timepicker-mini-minutes-pickup-start" type="text" class="form-item form-item--timepicker-mini minutes start w-num" readonly="" maxlength="2" data-time="time-2" autocomplete="off" autocapitalize="off" spellcheck="false">
<button type="button" class="timepicker-mini__arrow timepicker-mini__arrow--minus minutes minus" data-time="timepicker-mini-minutes-pickup-start" data-hours="timepicker-mini-hours-pickup-start" data-period="timepicker-mini-ampm-pickup-start"></button>
<button type="button" class="timepicker-mini__arrow timepicker-mini__arrow--plus ampm" data-time="timepicker-mini-ampm-pickup-start"></button>
<input id="timepicker-mini-ampm-pickup-start" type="text" class="form-item form-item--timepicker-mini ampm start" readonly="" maxlength="2" data-time="time-2" autocomplete="off" autocapitalize="off" spellcheck="false">
<button type="button" class="timepicker-mini__arrow timepicker-mini__arrow--minus ampm" data-time="timepicker-mini-ampm-pickup-start"></button>
</div>
<div class="timepicker-mini__period-divider">-</div>
<div class="form-item-wrap form-item-wrap--timepicker-mini">
<button type="button" class="timepicker-mini__arrow timepicker-mini__arrow--plus hours plus" data-time="timepicker-mini-hours-pickup-end" data-period="timepicker-mini-ampm-pickup-end"></button>
<input id="timepicker-mini-hours-pickup-end" type="text" class="form-item form-item--timepicker-mini hours end w-num" readonly="" maxlength="2" data-time="time-2" autocomplete="off" autocapitalize="off" spellcheck="false">
<button type="button" class="timepicker-mini__arrow timepicker-mini__arrow--minus hours minus" data-time="timepicker-mini-hours-pickup-end" data-period="timepicker-mini-ampm-pickup-end"></button>
<div class="timepicker-mini__colon">:</div>
<button type="button" class="timepicker-mini__arrow timepicker-mini__arrow--plus minutes plus" data-time="timepicker-mini-minutes-pickup-end" data-hours="timepicker-mini-hours-pickup-end" data-period="timepicker-mini-ampm-pickup-end"></button>
<input id="timepicker-mini-minutes-pickup-end" type="text" class="form-item form-item--timepicker-mini minutes end w-num" readonly="" maxlength="2" data-time="time-2" autocomplete="off" autocapitalize="off" spellcheck="false">
<button type="button" class="timepicker-mini__arrow timepicker-mini__arrow--minus minutes minus" data-time="timepicker-mini-minutes-pickup-end" data-hours="timepicker-mini-hours-pickup-end" data-period="timepicker-mini-ampm-pickup-end"></button>
<button type="button" class="timepicker-mini__arrow timepicker-mini__arrow--plus ampm" data-time="timepicker-mini-ampm-pickup-end"></button>
<input id="timepicker-mini-ampm-pickup-end" type="text" class="form-item form-item--timepicker-mini ampm end" readonly="" maxlength="2" data-time="time-2" autocomplete="off" autocapitalize="off" spellcheck="false">
<button type="button" class="timepicker-mini__arrow timepicker-mini__arrow--minus ampm" data-time="timepicker-mini-ampm-pickup-end"></button>
</div>
</div>
<button type="button" class="btn btn--primary timepicker-period-apply">Apply</button>
</div>
</div>
FILEUPLOADER
somefilename.jpg
somefilename.jpg
To upload files use jQuery-File-Upload plugin.
<div id="fileupload" class="fileupload">
<input id='fileupload-input' type="file" class="fileupload__input" multiple="" />
<label for='fileupload-input' class='fileupload__label'>
<span class='icon-svg-wrap'>
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-upload"/>
</svg>
</span>
<span>Upload Here</span>
</label>
<div class="fileupload__progress">
<div id='bar-outer' class="fileupload__bar-outer">
<div id='bar-inner' class="fileupload__bar-inner"></div>
</div>
<button type="button" class="fileupload__btn-remove"></button>
</div>
<div class="fileupload__files-wrap">
</div>
</div>
var progressGlobal = 0;
$('.fileupload__input').fileupload({
url: 'path/',
singleFileUploads: false,
progressall: function(e, data) {
if(data.loaded > 0){
$('.fileupload').addClass('fileupload--in-progress');
}
var progress = parseInt(data.loaded / data.total * 100, 10);
progressGlobal = progress;
$('.fileupload__bar-inner').css('width', progress + '%');
},
done: function (e, data) {
if(progressGlobal == 100){
$('#fileupload')
.removeClass('fileupload--in-progress')
.addClass('fileupload--complete');
}
$.each(data.files, function (index, file) {
var newFile = $('<div class="fileupload__file"></div>');
$('.fileupload__files-wrap').append(newFile);
newFile.append(
'<span></span>',
'<button type="button" class="fileupload__btn-remove"></button>'
);
newFile.find('span').text(file.name);
});
}
});
FILEUPLOADER SINGLE
When file uploading is in progress add class "fileupload--in-progress" to <div class="fileupload single">
When file uploading is complete add class "ileupload--complete" to <div class="fileupload single"> and remove class "fileupload--in-progress".
To delete an uploaded file remove class "fileupload - complete" from <div class = "fileupload single fileupload - complete">.
File upload complete
There are two variants of the layout structure:
1. When the uploaded file is not an image;
2. When the uploaded file is an image.
When the uploaded file is not an image, the following layout structure is used.
Name for the element with class "fileupload__file-name-name" is specified without the extension.
Name for the element with class "fileupload__file-name-exp" is specified with the extension.
<div class="fileupload single">
<input id='fileupload-notimg' type="file" class="fileupload__input-single" />
<label for='fileupload-notimg' class='fileupload__label'>
<span class='icon-svg-wrap'>
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-upload"/>
</svg>
</span>
<span>Upload</span>
</label>
<div class="fileupload__file">
<a href="path/to/file" class='icon-svg-wrap'>
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-download"/>
</svg>
</a>
<span class="fileupload__file-name">
<span class="fileupload__file-name-name">somefilename</span>
<span class="fileupload__file-name-ext">jpg</span>
</span>
<button class="fileupload__btn-remove"></button>
</div>
<div class="fileupload__progress">
<div class="fileupload__bar-outer">
<div class="fileupload__bar-inner"></div>
</div>
<button type="button" class="fileupload__btn-remove"></button>
</div>
</div>
If the uploaded file is an image, the following layout structure is used.
<div class="fileupload single">
<input id='fileupload-img' type="file" class="fileupload__input-single" />
<label for='fileupload-img' class='fileupload__label'>
<span class='icon-svg-wrap'>
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-upload"/>
</svg>
</span>
<span>Upload</span>
</label>
<div class="fileupload__file">
<div class="fileupload__file-img" style="background-image:url(path/to/img)"></div>
<button class="fileupload__btn-remove"></button>
</div>
<div class="fileupload__progress">
<div class="fileupload__bar-outer">
<div class="fileupload__bar-inner"></div>
</div>
<button type="button" class="fileupload__btn-remove"></button>
</div>
</div>
Main menu
Summary Dashboard
<header class="main-menu">
<img class="main-menu__logo" src="site/images/insight360-logo.svg" alt="" />
<a href="#" class="main-menu__btn main-menu__btn--next-to-logo" title="Summary Dashboard">
Summary Dashboard
<span class="icon-svg-wrap icon-svg-wrap--size-24">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_summary_dashboard_24x24" />
</svg>
</span>
</a>
<div class="form-item-wrap form-item-wrap--header-select">
<select class="form-item select2 filter" data-dropdown-css-class="header-select-dropdown">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
<option value="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</option>
<option value="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</option>
<option value="">Option 7</option>
<option value="">Option 8</option>
<option value="">Option 9</option>
<option value="">Option 10</option>
</select>
</div>
<a href="#" class="main-menu__btn main-menu__btn--outline main-menu__btn--next-to-select">Go</a>
<div class="main-menu__right-part">
<a href="#" class="main-menu__btn main-menu__btn--text main-menu__btn--hidden-under-1280">Back to Portal</a>
<a href="#" class="main-menu__btn main-menu__btn--icon main-menu__btn--hidden-under-960 main-menu__btn--badge">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_messaging_32x32" />
</svg>
</span>
<span class="indicator indicator--sm alert">7</span>
</a>
<a href="#" class="main-menu__btn main-menu__btn--icon main-menu__btn--hidden-under-960 main-menu__btn--badge">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_notification_32x32" />
</svg>
</span>
<span class="indicator indicator--sm alert">2</span>
</a>
<div class="main-menu__profile main-menu__profile--badge">
<button
id="profile-btn"
class="main-menu__profile-btn main-menu__profile-btn--badge"
data-drop="main-menu-profile-menu"
data-drop-position
>
<span class="indicator indicator--sm alert">99+</span>
</button>
<div id="main-menu-profile-menu" class="main-menu__profile-menu dropdown w-dropdown">
<span class="main-menu__profile-name">Welcome, <span id="user-name">User Name</span></span>
<a class="dropdown__item dropdown__item--icon dropdown__item--link current">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-account" />
</svg>
</span>
<span>My Account</span>
</a>
<a
href="#"
class="dropdown__item dropdown__item--icon dropdown__item--link dropdown__item--visible-under-960"
>
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_messaging_20x20" />
</svg>
</span>
<span>Chat</span>
<span class="indicator indicator--sm alert">7</span>
</a>
<a
href="#"
class="dropdown__item dropdown__item--icon dropdown__item--link dropdown__item--visible-under-960"
>
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_notification_20x20" />
</svg>
</span>
<span>Notifications</span>
<span class="indicator indicator--sm alert">2</span>
</a>
<a href="#" class="dropdown__item dropdown__item--icon dropdown__item--link">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_info_20x20" />
</svg>
</span>
<span>Support</span>
</a>
<a
href="#"
class="dropdown__item dropdown__item--icon dropdown__item--link dropdown__item--visible-under-1280"
>
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_return_20x20" />
</svg>
</span>
<span>Back to Portal</span>
</a>
<a href="#" class="dropdown__item dropdown__item--icon dropdown__item--link alert">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-logout" />
</svg>
</span>
<span>Log Out</span>
</a>
</div>
</div>
</div>
</header>
Sub menu
<nav class="sub-menu">
<ul class="sub-menu-left">
<li class="sub-menu-left__item">
<a href="#" class="sub-menu-left__item-btn">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-speedometer"/>
</svg>
</span>
<span>Point 1</span>
</a>
</li>
<li class="sub-menu-left__item">
<a href="#" class="sub-menu-left__item-btn">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-chart"/>
</svg>
</span>
<span>Point 2</span>
</a>
</li>
<li class="sub-menu-left__item">
<a href="#" class="sub-menu-left__item-btn">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-notes"/>
</svg>
</span>
<span>Point 3</span>
</a>
</li>
<li class="sub-menu-left__item">
<a href="#" class="sub-menu-left__item-btn">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-settings"/>
</svg>
</span>
<span>Point 4</span>
</a>
</li>
</ul>
<ul class="sub-menu-right">
<li class="sub-menu-right__item">
<button type="button" class="sub-menu-btn sub-menu-btn--icon" data-drop="sub-menu-dropdown" data-drop-position>
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-link"/>
</svg>
</span>
<span>Quick Links</span>
</button>
<ul id="sub-menu-dropdown" class="sub-menu__dropdown-menu w-dropdown">
<li>
<a href="">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a>
</li>
<li>
<a href="">Lorem ipsum dolor sit.</a>
</li>
</ul>
</li>
<li class="sub-menu-right__item">
<a href="#" class="sub-menu-btn sub-menu-btn--icon">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-wrench"/>
</svg>
</span>
<span>Setup</span>
</a>
</li>
</ul>
</nav>
Footer
<footer class="footer">
<div class="footer__top">
<img class="footer__logo" src="site/images/insight360-logo.svg" alt="">
<div class="footer__copyright">Analytix © <span>2005</span>-<span>2017</span></div>
<ul class="footer__nav">
<li class="footer__nav-item">
<a href="terms-of-use.html" class="footer__nav-link">Terms of Use</a>
</li>
<li class="footer__nav-item">
<a href="privacy-policy.html" class="footer__nav-link">Privacy Policy</a>
</li>
</ul>
</div>
</footer>
Left menu with accordion and search
<div id="main-field" class="main-field active">
<div id="split-left" class="main-field__left">
<button type="button" class="main-field__btn active" data-toggle="main-field"></button>
<div class="left-menu-wrap">
<div class="left-menu">
<div class="left-menu__header left-menu__header--filter">
<div class="left-menu__title">Menu name</div>
<div class="form-item-wrap form-item-wrap--icon-right form-item-wrap--search">
<input type="text" class="form-item" placeholder="Search...">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-search"/>
</svg>
</span>
</div>
</div>
<div class="left-menu__content">
<div class="accordion type-3 w-accord">
<div class="accordion__head w-accord-head">Section Name 1</div>
<ul class="accordion__body w-accord-body">
<li>
<a href="#" class="">Option 1</a>
</li>
<li>
<a href="#" class="">Option 2</a>
</li>
<li>
<a class="current">Option 3 Current</a>
</li>
<li>
<a href="#" class="">Option 4</a>
</li>
<li>
<a href="#" class="disabled">Option 5</a>
</li>
</ul>
</div>
<div class="accordion type-3 w-accord">
<div class="accordion__head w-accord-head">Section Name 1</div>
<ul class="accordion__body w-accord-body">
<li>
<a href="#" class="">Option 1</a>
</li>
<li>
<a href="#" class="">Option 2</a>
</li>
<li>
<a href="#" class="">Option 3</a>
</li>
<li>
<a href="#" class="">Option 4</a>
</li>
<li>
<a href="#" class="">Option 5</a>
</li>
</ul>
</div>
</div>
<div class="left-menu__footer no-border">
<button class="btn btn--primary btn--icon-txt btn--icon-right">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-save"/>
</svg>
</span>
<span>Button</span>
</button>
</div>
</div>
</div>
</div>
<div class="main-field__right">
<div class="main-field__content">
</div>
</div>
</div>
Left menu
<div class="left-menu">
<div class="left-menu__header">
<div class="left-menu__title">Menu name</div>
</div>
<div class="left-menu__content">
<ul>
<li>
<a href="#" class="left-menu__link">Option 1</a>
</li>
<li>
<a href="#" class="left-menu__link">Option 2</a>
</li>
<li>
<a class="left-menu__link current">Option 3 Current</a>
</li>
<li>
<a href="#" class="left-menu__link">Option 4</a>
</li>
<li>
<a href="#" class="left-menu__link disabled">Option 5</a>
</li>
</ul>
</div>
</div>
<div class="left-menu">
<div class="left-menu__header">
<div class="left-menu__title">Menu name</div>
</div>
<div class="left-menu__content">
<ul>
<li>
<a href="#" class="left-menu__link">Option 1</a>
</li>
<li>
<a href="#" class="left-menu__link">Option 2</a>
</li>
<li>
<a class="left-menu__link current">Option 3 Current</a>
</li>
<li>
<a href="#" class="left-menu__link">Option 4</a>
</li>
<li>
<a href="#" class="left-menu__link disabled">Option 5</a>
</li>
</ul>
</div>
<div class="left-menu__footer">
<div class="txt">Sed do eiusmod tempor</div>
</div>
</div>
Vertical TABS type 1
<div class="side-menu">
<div class="side-menu__header">
<button type="button" class="btn-alt btn-alt--icon">
<span class="btn-alt__icon">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-forward"/>
</svg>
</span>
</span>
<span>Button</span>
</button>
</div>
<div class="side-menu__tab-group w-tab-parent">
<div class="side-menu__tab w-tab current">First page</div>
<div class="side-menu__tab w-tab">Second page Second page Second page</div>
<div class="side-menu__tab w-tab">Fird page</div>
<div class="side-menu__tab w-tab">Fourth page</div>
</div>
</div>
<div id="main-field-2" class="main-field active">
<div id="split-left" class="main-field__left">
<button type="button" class="main-field__btn active" data-toggle="main-field-2"></button>
<div class="left-menu-wrap">
<div class="side-menu">
<div class="side-menu__header">
<button type="button" class="btn-alt btn-alt--icon">
<span class="btn-alt__icon">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-forward"/>
</svg>
</span>
</span>
<span>Button</span>
</button>
</div>
<div class="side-menu__tab-group w-tab-parent">
<div class="side-menu__tab w-tab current">First page</div>
<div class="side-menu__tab w-tab">Second page Second page Second page</div>
<div class="side-menu__tab w-tab">Fird page</div>
<div class="side-menu__tab w-tab">Fourth page</div>
</div>
</div>
</div>
</div>
<div class="main-field__right">
<div class="main-field__content">
</div>
</div>
</div>
Vertical TABS type 2
Header 1
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, fugiat?
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed id alias et ex corrupti sint perspiciatis. A adipisci, deserunt animi numquam similique, aut beatae dolorem vel, quaerat dicta assumenda natus.
- Lorem ipsum dolor sit amet
Header 2
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, incidunt minima iure delectus laborum porro minus perspiciatis nihil, numquam quos facilis magnam facere ut mollitia tempora eaque debitis quidem aperiam. Repellendus explicabo architecto repudiandae hic maxime veritatis labore dignissimos incidunt aut temporibus ullam, iusto perspiciatis obcaecati maiores iure distinctio ducimus.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed id alias et ex corrupti sint perspiciatis. A adipisci, deserunt animi numquam similique, aut beatae dolorem vel, quaerat dicta assumenda natus.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint odio porro in ipsam consectetur quia, dignissimos voluptate nisi voluptatum. Voluptate earum quas suscipit vel ipsam ad, possimus dolorum nam accusantium quidem recusandae debitis delectus, eos nobis fuga aliquid officiis, ratione modi eaque fugit incidunt labore. Quos ex repellendus consequatur, excepturi.
Header 3
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
<div class="tabs-to-accord">
<div class="tabs-to-accord__tabs-wrap w-tab-parent">
<button type="button" class="tabs-to-accord__tab w-tab current" data-tab="tab-acc-1">Header 1</button>
<button type="button" class="tabs-to-accord__tab w-tab" data-tab="tab-acc-2">Header 2</button>
<button type="button" class="tabs-to-accord__tab w-tab" data-tab="tab-acc-3">Header 3</button>
</div>
<div class="tabs-to-accord__content-wrap">
<div id="tab-acc-1" class="tabs-to-accord__content w-accord w-tab-section active">
<div class="tabs-to-accord__head w-accord-head active">Header 1</div>
<ul class="tabs-to-accord__body w-accord-body">
<li class="tabs-to-accord__item">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-check-in-circle"/>
</svg>
</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, fugiat?</span>
</li>
<li class="tabs-to-accord__item">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-check-in-circle"/>
</svg>
</span>
<span>Lorem ipsum dolor sit amet</span>
</li>
<li class="tabs-to-accord__item">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-check-in-circle"/>
</svg>
</span>
<span>Lorem ipsum dolor sit amet</span>
</li>
</ul>
</div>
<div id="tab-acc-2" class="tabs-to-accord__content w-accord w-tab-section">
<div class="tabs-to-accord__head w-accord-head">Header 2</div>
<ul class="tabs-to-accord__body w-accord-body">
<li class="tabs-to-accord__item">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-check-in-circle"/>
</svg>
</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</li>
<li class="tabs-to-accord__item">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-check-in-circle"/>
</svg>
</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</li>
<li class="tabs-to-accord__item">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-check-in-circle"/>
</svg>
</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint odio porro in ipsam</span>
</li>
</ul>
</div>
<div id="tab-acc-3" class="tabs-to-accord__content w-accord w-tab-section">
<div class="tabs-to-accord__head w-accord-head">Header 3</div>
<ul class="tabs-to-accord__body w-accord-body">
<li class="tabs-to-accord__item">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-check-in-circle"/>
</svg>
</span>
<span>Lorem ipsum dolor sit amet</span>
</li>
<li class="tabs-to-accord__item">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-check-in-circle"/>
</svg>
</span>
<span>Lorem ipsum dolor sit amet</span>
</li>
<li class="tabs-to-accord__item">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-check-in-circle"/>
</svg>
</span>
<span>Lorem ipsum dolor sit amet</span>
</li>
</ul>
</div>
</div>
</div>
Breadcrumbs
<ul class="breadcrumbs">
<li>
<a href="#" title=""></a>
</li>
<li>
<a href="#" title=""></a>
</li>
<li>
<a class="current"></a>
</li>
</ul>
Pagination
<div class="pagination">
<div>
<a class="current">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>
</div>
<div class="pagination pagination--arrows">
<a href="#" class="prev disabled"></a>
<div>
<a class="current">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>
<a href="#" class="next"></a>
</div>
Modals
Mdl title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit alias amet expedita
unde ad, facere minima esse, et nobis quidem.
Mdl title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit alias amet expedita
unde ad, facere minima esse, et nobis quidem.
<button class="btn btn--primary" data-open="mdl-pattern-1">Show Modal 1</button>
<div id="mdl-pattern-1" class="mdl-wrap w-mdl-close">
<div class="mdl">
<div class="mdl__cross w-mdl-close"></div>
<div class="mdl__head">Mdl title</div>
<div class="mdl__body">
<div class="mdl__txt">text</div>
<div class="mdl__block ta-r">
<button class="btn btn--secondary">Button</button>
<button class="btn btn--primary">Button</button>
</div>
</div>
</div>
</div>
<button class="btn btn--primary" data-open="mdl-pattern-2">Show Modal 2</button>
<div id="mdl-pattern-2" class="mdl-wrap w-mdl-close">
<div class="mdl">
<div class="mdl__cross w-mdl-close"></div>
<div class="mdl__head">Mdl title</div>
<div class="mdl__body">
<div class="mdl__txt">text</div>
<div class="mdl__txt ta-r">
<button type="button" class="link-txt">Button</button>
</div>
</div>
</div>
</div>
Spinner
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit corporis distinctio
necessitatibus doloremque, explicabo sint nam beatae fugit esse laboriosam, ea, numquam accusamus impedit
rem laudantium magni! Repellendus mollitia laudantium nulla odio, cumque est, a voluptas. Assumenda
blanditiis dolore adipisci laudantium veniam animi praesentium modi cum, alias incidunt voluptates, corrupti
repudiandae corporis quibusdam nesciunt ab totam ut magni. Suscipit, ratione?
Display spinner by adding class "active"
Use class "spinner-wrap" to display full screen spinner, or "spinner-wrap local" to display local spinner.
<div class="spinner-wrap local active">
<div class="spinner"></div>
</div>
Signature Part
To display signature block without border add class "no-border" to <div class="signature">
<div class="signature">
<div class="form-cell form-cell--signature">
<label for="signature" class="form-label">Signature:</label>
<div class="form-item-wrap form-item-wrap--signature">
<input id="signature" type="text" class="form-item">
</div>
</div>
<div class="form-cell form-cell--signature-date">
<label for="signature-date" class="form-label">Date:</label>
<div class="form-item-wrap form-item-wrap--signature-date">
<input id="signature-date" type="text" class="form-item" value="01/03/2018" readonly="">
</div>
</div>
<button type="button" class="btn btn--primary">Done Signing</button>
</div>Pills
Text
Text
Text
Text
Text
1
433
27
5
19
<div class="pill">Text</div>
<div class="pill active">Text</div>
<div class="pill alert">Text</div>
<div class="pill warning">Text</div>
<div class="pill success">Text</div>
<div class="pill pill--sm">Text</div>
<div class="pill pill--sm active">Text</div>
<div class="pill pill--sm alert">Text</div>
<div class="pill pill--sm warning">Text</div>
<div class="pill pill--sm success">Text</div>
Badges
Default indicator 123 123
Warning indicator 123
123
Alert indicator 123
123
Success indicator 123
123
<span class="indicator"></span>
<span class="indicator warning"></span>
<span class="indicator alert"></span>
<span class="indicator success"></span>
<span class="indicator indicator--sm"></span>
<span class="indicator indicator--sm warning"></span>
<span class="indicator indicator--sm alert"></span>
<span class="indicator indicator--sm success"></span>
Empty state element
This is your Entities page.
If you have over 10 entities we recommend you select the “I have too many entities to list here”
on the top right to this page.
Transactions section is empty
<div class="empty-state">
<div class="empty-state__center">
<span class="icon-svg-wrap empty-state__icon">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_connection_72x72" />
</svg>
</span>
<div class="empty-state__desc">
<div class="empty-state__title">This is your Entities page.</div>
<div class="empty-state__text">
If you have over 10 entities we recommend you select the “I have too many entities to list here”
on the top right to this page.
</div>
</div>
</div>
</div>
<div class="empty-state">
<div class="empty-state__center">
<span class="icon-svg-wrap empty-state__icon">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_cycle_72x72" />
</svg>
</span>
<div class="empty-state__desc">
<div class="empty-state__text">
Transactions section is empty
</div>
<button href="#" class="link-txt link-txt--icon-left" type="button">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-upload"></use>
</svg>
</span>
<span>Bulk Upload</span>
</button>
</div>
</div>
</div>
Reply sections/comments
<div class="ui-kit-block ui-kit-block--to-reply">
<div class="txt">Lorem ipsum dolor sit amet.</div>
<button
id="reply1"
type="button"
class="btn btn--icon btn--transparent w-reply-btn btn--badge"
data-reply="reply-section1"
>
<span class="icon-svg-wrap icon-svg-wrap--size-24">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_messaging_24x24" />
</svg>
</span>
<span class="indicator indicator--sm alert">25</span>
</button>
</div>
<div id="reply-section1" class="replies-section">
<div class="replies-section-header">
<div class="replies-section__title">Item Communication</div>
<div class="cross cross--size-16" data-reply="reply-section1"></div>
</div>
<div class="replies-section-body">
<div class="replies-area" style="height: 300px;">
<div class="replies-area__item replies-area__item--received replies-area__item--first">
<div class="replies-area__item-inner">
<div class="reply reply--received">
<div class="reply__header">
<div class="reply__header-item">
Diya posted a comment on Sep, 2018
</div>
</div>
<div class="reply__body">Lorem</div>
</div>
</div>
</div>
<div class="replies-area__item replies-area__item--received">
<div class="replies-area__item-inner">
<div class="reply reply--received">
<div class="reply__header">
<div class="reply__header-item">
Diya posted a comment on Sep, 2018
</div>
</div>
<div class="reply__body">
Seems like we’re missing some information for Aug 2018, please provide all of
your transactions for that month. Thanks.
</div>
</div>
</div>
</div>
<div class="replies-area__item replies-area__item--sent">
<div class="replies-area__item-inner">
<div class="reply reply--sent">
<div class="reply__header">
<div class="reply__header-item">
Diya posted a comment on Sep, 2018
</div>
</div>
<div class="reply__body">
Seems like we’re missing some information for Aug 2018, please provide all of
your transactions for that month. Thanks.
</div>
<div class="reply__files-wrap active">
<div class="fileupload__file">
<button class="fileupload__btn-remove"></button>
<span class="fileupload__file-name">uploaded_document.pdf</span>
</div>
<div class="fileupload__file">
<button class="fileupload__btn-remove"></button>
<span class="fileupload__file-name">uploaded_document.pdf</span>
</div>
<div class="fileupload__file">
<button class="fileupload__btn-remove"></button>
<span class="fileupload__file-name">uploaded_document.pdf</span>
</div>
</div>
</div>
</div>
</div>
<div class="replies-area__item replies-area__item--received replies-area__item--last">
<div class="replies-area__item-inner">
<div class="reply reply--received">
<div class="reply__header">
<div class="reply__header-item">
Diya posted a comment on Sep, 2018
</div>
</div>
<div class="reply__body">
Seems like we’re missing some information for Aug 2018, please provide all of
your transactions for that month. Thanks.
</div>
</div>
</div>
</div>
</div>
<div class="replies-attached-files">
<div id="fileupload-wrap-replices" class="fileupload fileupload--replies">
<input id='fileupload-input-replies' type="file" class="fileupload__input" multiple="" />
<div class="fileupload__progress fileupload__progress--replies">
<div id='bar-outer' class="fileupload__bar-outer">
<div id='bar-inner' class="fileupload__bar-inner"></div>
</div>
<button type="button" class="fileupload__btn-remove"></button>
</div>
<div class="fileupload__files-wrap fileupload__files-wrap--replies">
</div>
</div>
</div>
<div class="replies-input-field replies-input-field--attached">
<label for="fileupload-input-replies" class="icon-svg-wrap icon-svg-wrap--btn icon-svg-wrap--size-24 icon-svg-wrap--replies-input-attached">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_attach_file_24x24" />
</svg>
</label>
<div id="replies-text-1" class="form-item-wrap form-item-wrap--dynamic-height">
<textarea class="form-item form-item--no-border form-item--dynamic-height" name="" id="" cols="30" rows="1" data-wrapper-height="replies-text-1"></textarea>
<div class="form-item-append form-item-append--buttons form-item-append--transparent">
<button type="button" class="icon-svg-wrap icon-svg-wrap--btn icon-svg-wrap--size-24 icon-svg-wrap--replies-input-send form-item-append__btn">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-send" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
Popovers
Lorem ipsum dolor sit amet, To show popover 2 click here. Distinctio, cupiditate.
<button class="btn btn--primary" data-drop="popover-1" data-popover-position>Show popover 1</button>
<div id="popover-1" class="popover w-dropdown">
<div class="popover__cross" data-close="popover-1"></div>
<div class="popover__head"></div>
<div class="popover__body">
<div class="popover__txt"></div>
</div>
</div>
<div class="txt"><span class="link-txt" data-drop="popover-2" data-popover-position>To show popover 2 click here</span></div>
<div id="popover-2" class="popover w-dropdown">
<div class="popover__cross" data-close="popover-2"></div>
<div class="popover__head"></div>
<div class="popover__body">
<div class="popover__txt"></div>
</div>
</div>
Popover title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit alias amet expedita unde ad, facere minima esse, et nobis quidem.
Popover title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut fugiat, molestias voluptas autem sint tenetur ratione numquam blanditiis, rerum enim provident nulla quas dolorem ea suscipit similique quis minima placeat, molestiae perferendis doloribus! Doloribus, doloremque nisi, aspernatur voluptatum quisquam quia quibusdam quis, voluptatem quam provident atque laudantium ad id deserunt.
Regular switch
<label class="switch-label">
<input type="checkbox" name="switch" placeholder="" checked="">
<span class="switch__btn"></span>
</label>
<label class="switch-label" style="margin-left: 50px">
<input type="checkbox" name="switch" placeholder="" disabled>
<span class="switch__btn disabled"></span>
</label>
Regular switch - 2 options
Actual
Forecast
Actual
Forecast
Actual
Forecast
Actual
Forecast
<div class="switch switch--multiple w-switch-parent">
<div class="switch__status switch__status--left current">
<label class="switch-label">
<input type="radio" name="switch" value="actual" placeholder="" checked="">
<span class="switch__btn w-switch"></span>
</label>
<span>Actual</span>
</div>
<div class="switch__status switch__status--right">
<label class="switch-label">
<input type="radio" name="switch" value="forecast" placeholder="">
<span class="switch__btn w-switch"></span>
</label>
<span>Forecast</span>
</div>
</div>
<div class="switch switch--multiple w-switch-parent" style="margin-left: 50px;">
<div class="switch__status switch__status--left current">
<label class="switch-label">
<input type="radio" name="switch" value="actual" placeholder="" disabled="">
<span class="switch__btn w-switch disabled"></span>
</label>
<span>Actual</span>
</div>
<div class="switch__status switch__status--right disabled">
<label class="switch-label">
<input type="radio" name="switch" value="forecast" placeholder="" disabled="">
<span class="switch__btn w-switch disabled"></span>
</label>
<span>Forecast</span>
</div>
</div>
Icon swith
<div class="w-tab-parent">
<button type="button" class="tab-icon w-tab current">
<label>
<input type="radio" name="icon-switch" value="bank" placeholder="" checked="">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-bank"/>
</svg>
</span>
</label>
</button>
<button type="button" class="tab-icon w-tab">
<label>
<input type="radio" name="icon-switch" value="credit-card" placeholder="">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-credit-card"/>
</svg>
</span>
</label>
</button>
</div>
<div class="w-tab-parent" style="margin-left: 50px">
<button type="button" class="tab-icon w-tab current">
<label>
<input type="radio" name="icon-switch" value="bank" placeholder="" disabled="">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-bank"/>
</svg>
</span>
</label>
</button>
<button type="button" class="tab-icon w-tab disabled">
<label>
<input type="radio" name="icon-switch" value="credit-cart" placeholder="" disabled="">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-credit-card"/>
</svg>
</span>
</label>
</button>
</div>
Regular table
| thead 1 | thead 2 | thead 3 | thead 4 | thead 5 |
|---|---|---|---|---|
| Doe, John | BOH-Dishwasher | +4.96 | 0.00 | |
| Doe, John | BOH-Dishwasher | -3.15 | 0.00 | |
| Doe, John | BOH-Dishwasher | 4.96 | 0.00 |
<div class="table-wrap">
<table class="table">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
Editable table
|
|
|
|
thead 4 |
|
thead 7 | thead 8 | |
|---|---|---|---|---|---|---|---|
| Doe, John | BOH - Dishwasher |
|
|
Mark as Resolved | |||
| Doe, John | BOH - Dishwasher |
|
|
Mark as Resolved | |||
| Doe, John | BOH - Dishwasher |
|
|
Mark as Resolved |
<div class="table-wrap">
<table class="table table--editable">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="t-cell-editable">
<div class="form-item-wrap">
<input type="text" class="form-item">
</div>
</td>
</tr>
</tbody>
</table>
</div>
Regular table - responsive
| thead 1 | thead 2 | thead 3 | thead 4 | thead 5 |
|---|---|---|---|---|
| Doe, John | BOH-Dishwasher | +4.96 | 0.00 | |
| Doe, John | BOH-Dishwasher | -3.15 | 0.00 | |
| Doe, John | BOH-Dishwasher | 4.96 | 0.00 |
<table class="table table--responsive w-table-responsive">
<thead>
<tr>
<th data-th="thead 1">thead 1</th>
<th data-th="thead 2">thead 2</th>
<th data-th="thead 3">thead 3</th>
<th data-th="thead 4">thead 4</th>
<th data-th="thead 5">thead 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Doe, John</td>
<td>BOH-Dishwasher</td>
<td><span class="c-success">+4.96</span></td>
<td>0.00</td>
<td class="ta-c ta-l-less-960 t-cell-icon-24">
<span class="icon-svg-wrap icon-svg-wrap--btn">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-bin"/>
</svg>
</span>
</td>
</tr>
<tr>
<td>Doe, John</td>
<td>BOH-Dishwasher</td>
<td><span class="c-alert">-3.15</span></td>
<td>0.00</td>
<td class="ta-c ta-l-less-960 t-cell-icon-24">
<span class="icon-svg-wrap icon-svg-wrap--btn">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-bin"/>
</svg>
</span>
</td>
</tr>
<tr>
<td>Doe, John</td>
<td>BOH-Dishwasher</td>
<td>4.96</td>
<td>0.00</td>
<td class="ta-c ta-l-less-960 t-cell-icon-24">
<span class="icon-svg-wrap icon-svg-wrap--btn">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-bin"/>
</svg>
</span>
</td>
</tr>
</tbody>
</table>
Busy table (no inner borders)
| Date | Description | Account | Amount | Expense for | GL Accounts | |
|---|---|---|---|---|---|---|
| 8/28/19 | COMM OF RI TREVENDOR RA1298570 COMM OF RI TREVENDOR RA129857023 |
ELT Checking BSW - 3765 | ($128.23) |
|
|
|
| 8/28/19 | COMM OF RI TREVENDOR RA1298570 COMM OF RI TREVENDOR RA129857023 |
ELT Checking BSW - 3765 | ($128.23) |
|
|
|
<table class="table table--responsive table--busy table--editable w-table-responsive">
<thead>
<tr>
<th data-th="Date">Date</th>
<th data-th="Description">Description</th>
<th data-th="Account">Account</th>
<th data-th="Amount">Amount</th>
<th data-th="Expense for" style="width: 272px;">Expense for</th>
<th data-th="GL Accounts" style="width: 224px;">GL Accounts</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>8/28/19</td>
<td>COMM OF RI TREVENDOR RA1298570<br>COMM OF RI TREVENDOR RA129857023</td>
<td>ELT Checking BSW - 3765</td>
<td><span class="c-alert">($128.23)</span></td>
<td class="t-cell-editable">
<div class="form-item-wrap" style="width: 272px;">
<input type="text" class="form-item">
</div>
</td>
<td class="t-cell-editable">
<div class="form-item-wrap" style="width: 224px;">
<select class="form-item select2">
<option value="">option 0</option>
<option value="">option 1</option>
<option value="">option 2</option>
<option value="" disabled>option 3</option>
</select>
</div>
</td>
<td class="ta-c ta-l-less-960" style="font-size: 0;">
<div class="btn-group">
<span class="icon-svg-wrap icon-svg-wrap--btn">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_messaging_24x24"/>
</svg>
</span>
<span class="icon-svg-wrap icon-svg-wrap--btn" style="margin-left: 20px;">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-bin"/>
</svg>
</span>
</div>
</td>
</tr>
<tr>
<td>8/28/19</td>
<td>COMM OF RI TREVENDOR RA1298570<br>COMM OF RI TREVENDOR RA129857023</td>
<td>ELT Checking BSW - 3765</td>
<td><span class="c-alert">($128.23)</span></td>
<td class="t-cell-editable">
<div class="form-item-wrap" style="width: 272px;">
<input type="text" class="form-item">
</div>
</td>
<td class="t-cell-editable">
<div class="form-item-wrap" style="width: 224px;">
<select class="form-item select2">
<option value="">option 0</option>
<option value="">option 1</option>
<option value="">option 2</option>
<option value="" disabled>option 3</option>
</select>
</div>
</td>
<td class="ta-c ta-l-less-960" style="font-size: 0;">
<div class="btn-group">
<span class="icon-svg-wrap icon-svg-wrap--btn">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon_messaging_24x24"/>
</svg>
</span>
<span class="icon-svg-wrap icon-svg-wrap--btn" style="margin-left: 20px;">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-bin"/>
</svg>
</span>
</div>
</td>
</tr>
</tbody>
</table>
Sortable table
| thead 1 | thead 2 | thead 3 | thead 4 | thead 5 |
|---|---|---|---|---|
| Doe, John | BOH-Dishwasher | +4.96 | 0.00 | |
| Doe, John | BOH-Dishwasher | -3.15 | 0.00 | |
| Doe, John | BOH-Dishwasher | 4.96 | 0.00 |
Layout remains the same. Use DataTables (see the manual) to add advanced interaction controls to HTML tables.
$('#sortable-table').DataTable({
paging: false,
searching: false,
info: false
});
Table with fixed header/column(s)
| thead 1 | thead 2 | thead 3 | thead 4 | thead 5 | thead 6 | thead 7 | thead 8 | thead 9 | thead 10 |
|---|---|---|---|---|---|---|---|---|---|
| Doe, John | Doe, John | BOH-Dishwasher | +4.96 | 0.00 | Doe, John | BOH-Dishwasher | +4.96 | 0.00 | |
| Doe, John | Doe, John | BOH-Dishwasher | -3.15 | 0.00 | Doe, John | BOH-Dishwasher | -3.15 | 0.00 | |
| Doe, John | Doe, John | BOH-Dishwasher | 4.96 | 0.00 | Doe, John | BOH-Dishwasher | 4.96 | 0.00 | |
| Doe, John | Doe, John | BOH-Dishwasher | +4.96 | 0.00 | Doe, John | BOH-Dishwasher | +4.96 | 0.00 | |
| Doe, John | Doe, John | BOH-Dishwasher | -3.15 | 0.00 | Doe, John | BOH-Dishwasher | -3.15 | 0.00 | |
| Doe, John | Doe, John | BOH-Dishwasher | 4.96 | 0.00 | Doe, John | BOH-Dishwasher | 4.96 | 0.00 | |
| Doe, John | Doe, John | BOH-Dishwasher | +4.96 | 0.00 | Doe, John | BOH-Dishwasher | +4.96 | 0.00 | |
| Doe, John | Doe, John | BOH-Dishwasher | -3.15 | 0.00 | Doe, John | BOH-Dishwasher | -3.15 | 0.00 | |
| Doe, John | Doe, John | BOH-Dishwasher | 4.96 | 0.00 | Doe, John | BOH-Dishwasher | 4.96 | 0.00 |
Layout remains the same. Use DataTables (see the manual) to add advanced interaction controls to HTML tables.
$('#data-table-1').DataTable({
scrollY: '350px',
scrollX: true,
scrollCollapse: true,
paging: false,
searching: false,
info: false,
fixedColumns: {
leftColumns: 1
}
});
Editable table WITH FIXED HEADER/COLUMN(S)
|
|
|
|
thead 4 |
|
thead 7 | thead 8 | |
|---|---|---|---|---|---|---|---|
| Doe, John | BOH - Dishwasher |
|
|
Mark as Resolved | |||
| Doe, John | BOH - Dishwasher |
|
|
Mark as Resolved | |||
| Doe, John | BOH - Dishwasher |
|
|
Mark as Resolved |
Layout remains the same. Use DataTables (see the manual) to add advanced interaction controls to HTML tables.
$('#editable-table').DataTable({
scrollY: '350px',
scrollX: true,
scrollCollapse: true,
paging: false,
searching: false,
info: false,
fixedColumns: {
leftColumns: 1
}
});
Collapsed/expanded rows
| thead 1 | thead 2 | thead 3 | thead 4 | thead 5 |
|---|---|---|---|---|
| Doe, John | ||||
| Doe, John | BOH-Dishwasher | +4.96 | 0.00 | |
| Doe, John | BOH-Dishwasher | +4.96 | 0.00 | |
| Doe, John | BOH-Dishwasher | +4.96 | 0.00 | |
| Doe, John | BOH-Dishwasher | -3.15 | 0.00 | |
| Doe, John | BOH-Dishwasher | 4.96 | 0.00 | |
| Doe, John | BOH-Dishwasher | +4.96 | 0.00 |
<div class="table-wrap">
<table class="table w-table-collapse">
<thead>
<tr>
<th>thead 1</th>
<th>thead 2</th>
<th>thead 3</th>
<th>thead 4</th>
<th>thead 5</th>
</tr>
</thead>
<tbody>
<tr class="level-1-row">
<td>Doe, John</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="level-2-row">
<td>Doe, John</td>
<td>BOH-Dishwasher</td>
<td class="c-success">+4.96</td>
<td>0.00</td>
<td></td>
</tr>
<tr class="level-2-row">
<td>Doe, John</td>
<td>BOH-Dishwasher</td>
<td class="c-success">+4.96</td>
<td>0.00</td>
<td></td>
</tr>
<tr class="level-2-row">
<td>Doe, John</td>
<td>BOH-Dishwasher</td>
<td class="c-success">+4.96</td>
<td>0.00</td>
<td></td>
</tr>
<tr class="level-1-row">
<td>Doe, John</td>
<td>BOH-Dishwasher</td>
<td class="c-alert">-3.15</td>
<td>0.00</td>
<td></td>
</tr>
<tr class="level-1-row">
<td>Doe, John</td>
<td>BOH-Dishwasher</td>
<td class="c-disabled">4.96</td>
<td>0.00</td>
<td></td>
</tr>
<tr class="level-2-row">
<td>Doe, John</td>
<td>BOH-Dishwasher</td>
<td class="c-success">+4.96</td>
<td>0.00</td>
<td></td>
</tr>
</tbody>
</table>
</div>
Multi level table
Colors for different header levels
Level 1
".m-lvl-1-row"
#FFE4D6
Level 2
".m-lvl-2-row"
#FFF6DA
Level 3
".m-lvl-3-row"
#ECFFDA
Level 4
".m-lvl-4-row"
#DAF6FF
Level 5
".m-lvl-5-row"
#EBE5FE
| Employee | Department, Job | Hours | OT/DT |
|---|---|---|---|
| MA | |||
| John | |||
| PC345243 - Searport | BOH -Dishwasher | - 3.15 | 0.00 |
| PC345243 - Searport | BOH -Dishwasher | - 3.15 | 0.00 |
| Total John | BOH -Dishwasher | - 3.15 | 0.00 |
| Total MA | BOH -Dishwasher | - 3.15 | 0.00 |
| Christy | |||
| Searsport | |||
| PC345243 - Searport | BOH -Dishwasher | - 3.15 | 0.00 |
| Total Searsport | BOH -Dishwasher | - 3.15 | 0.00 |
| Total Christy | BOH -Dishwasher | - 3.15 | 0.00 |
| MA | |||
| Searsport | |||
| PC345243 - Searport | BOH -Dishwasher | - 3.15 | 0.00 |
| Total Searsport | BOH -Dishwasher | - 3.15 | 0.00 |
| Total MA | BOH -Dishwasher | - 3.15 | 0.00 |
<table class="table table--m-lvl">
<thead>
<tr>
<th>Employee</th>
<th>Department, Job</th>
<th>Hours</th>
<th>OT/DT</th>
</tr>
</thead>
<tbody>
<tr class="m-lvl-1-row">
<td>MA</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="m-lvl-2-row">
<td>John</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="m-lvl-data-row">
<td>PC345243 - Searport</td>
<td>BOH -Dishwasher</td>
<td class="c-alert">- 3.15</td>
<td>0.00</td>
</tr>
<tr class="m-lvl-data-row">
<td>PC345243 - Searport</td>
<td>BOH -Dishwasher</td>
<td class="c-alert">- 3.15</td>
<td>0.00</td>
</tr>
<tr class="m-lvl-total-row">
<td>Total John</td>
<td>BOH -Dishwasher</td>
<td class="c-alert">- 3.15</td>
<td>0.00</td>
</tr>
<tr class="m-lvl-total-row">
<td>Total MA</td>
<td>BOH -Dishwasher</td>
<td class="c-alert">- 3.15</td>
<td>0.00</td>
</tr>
<tr class="m-lvl-2-row">
<td>Christy</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="m-lvl-3-row">
<td>Searsport</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="m-lvl-data-row">
<td>PC345243 - Searport</td>
<td>BOH -Dishwasher</td>
<td class="c-alert">- 3.15</td>
<td>0.00</td>
</tr>
<tr class="m-lvl-total-row">
<td>Total Searsport</td>
<td>BOH -Dishwasher</td>
<td class="c-alert">- 3.15</td>
<td>0.00</td>
</tr>
<tr class="m-lvl-total-row">
<td>Total Christy</td>
<td>BOH -Dishwasher</td>
<td class="c-alert">- 3.15</td>
<td>0.00</td>
</tr>
<tr class="m-lvl-1-row">
<td>MA</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="m-lvl-3-row">
<td>Searsport</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="m-lvl-data-row">
<td>PC345243 - Searport</td>
<td>BOH -Dishwasher</td>
<td class="c-alert">- 3.15</td>
<td>0.00</td>
</tr>
<tr class="m-lvl-total-row">
<td>Total Searsport</td>
<td>BOH -Dishwasher</td>
<td class="c-alert">- 3.15</td>
<td>0.00</td>
</tr>
<tr class="m-lvl-total-row">
<td>Total Christy</td>
<td>BOH -Dishwasher</td>
<td class="c-alert">- 3.15</td>
<td>0.00</td>
</tr>
</tbody>
</table>
How it works
Tab 1 Content
Tab 2 Content
Tab 3 content
All elements with class 'w-tab' must be siblings and have a common parent with class 'w-tab-parent'.
All elements with class 'w-tab-section' must be siblings and have a common parent.
Every single 'w-tab-section' element is hidden by default. To display, add class 'active' to it.
<div class="w-tab-parent">
<button class="w-tab current" data-tab="tab-1">Tab 1</button>
<button class="w-tab" data-tab="tab-2">Tab 2</button>
<button class="w-tab" data-tab="tab-3">Tab 3</button>
</div>
<div>
<div id="tab-1" class="w-tab-section active">Tab 1 Content</div>
<div id="tab-2" class="w-tab-section">Tab 2 Content</div>
<div id="tab-3" class="w-tab-section">Tab 3 content</div>
</div>
Button tabs
<div class="w-tab-parent tab-group">
<button type="button" class="tab w-tab current">Button Tab</button>
<button type="button" class="tab w-tab">Button tab</button>
</div>
Left side menu tabs
<div class="w-tab-parent tab-group">
<button type="button" class="tab-top-icon w-tab current">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-task"/>
</svg>
</span>
<span>TAB 1</span>
</button>
<button type="button" class="tab-top-icon w-tab">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-compass"/>
</svg>
</span>
<span>TAB 2</span>
</button>
<button type="button" class="tab-top-icon w-tab" disabled=">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-chart"/>
</svg>
</span>
<span>TAB 3</span>
</button>
</div>
Top Menu Tabs
<nav class="tab-group tab-group--nav w-tab-parent w-draggable">
<a class="tab-nav w-tab">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-bullet-list"/>
</svg>
</span>
<span>Home</span>
</a>
<a class="tab-nav w-tab current">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-agreement"/>
</svg>
</span>
<span>Practice</span>
</a>
<a class="tab-nav w-tab">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-pricing"/>
</svg>
</span>
<span>People</span>
</a>
<a class="tab-nav w-tab">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-history"/>
</svg>
</span>
<span>History</span>
</a>
<a class="tab-nav w-tab">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-history"/>
</svg>
</span>
<span>Lorem</span>
</a>
<a class="tab-nav w-tab">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-history"/>
</svg>
</span>
<span>Lorem</span>
</a>
</nav>
<nav class="tab-group tab-group--nav w-tab-parent w-draggable">
<a class="tab-nav tab-nav--indicate w-tab">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-bullet-list"/>
</svg>
</span>
<span>Home</span>
<span class='indicator'>99+</span>
</a>
<a class="tab-nav tab-nav--indicate w-tab current">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-agreement"/>
</svg>
</span>
<span>Practice</span>
<span class='indicator-group'>
<span class='indicator dot alert'></span>
<span class='indicator dot warning'></span>
</span>
</a>
<a class="tab-nav tab-nav--indicate w-tab">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-pricing"/>
</svg>
</span>
<span>People</span>
<span class='indicator-group'>
<span class='indicator dot warning'></span>
</span>
</a>
<a class="tab-nav w-tab">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-history"/>
</svg>
</span>
<span>History</span>
</a>
<a class="tab-nav w-tab">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-history"/>
</svg>
</span>
<span>Lorem</span>
</a>
<a class="tab-nav w-tab">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-history"/>
</svg>
</span>
<span>Lorem</span>
</a>
</nav>
<nav class="tab-group tab-group--nav w-tab-parent w-draggable">
<a class="tab-nav tab-nav--text w-tab">
<span>Home</span>
<span class="tab-nav__hint-text">Hint text</span>
</a>
<a class="tab-nav tab-nav--text w-tab current">
<span>Practice</span>
<span class="tab-nav__hint-text">Hint text</span>
</a>
<a class="tab-nav tab-nav--text w-tab">
<span>People</span>
<span class="tab-nav__hint-text">Hint text</span>
</a>
<a class="tab-nav tab-nav--text w-tab">
<span>History</span>
<span class="tab-nav__hint-text">Hint text</span>
</a>
</nav>
<div class="tab-wrap">
<nav class="tab-group tab-group--nav w-tab-parent w-draggable">
<a class="tab-nav w-tab" data-tab="top-menu-tab-1">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-bullet-list"/>
</svg>
</span>
<span>Home</span>
</a>
<a class="tab-nav w-tab current" data-tab="top-menu-tab-2">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-agreement"/>
</svg>
</span>
<span>Practice</span>
</a>
<a class="tab-nav w-tab" data-tab="top-menu-tab-3">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-pricing"/>
</svg>
</span>
<span>People</span>
</a>
<a class="tab-nav w-tab" data-tab="top-menu-tab-4">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-history"/>
</svg>
</span>
<span>History</span>
</a>
<a class="tab-nav w-tab" data-tab="top-menu-tab-4">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-history"/>
</svg>
</span>
<span>Lorem</span>
</a>
<a class="tab-nav w-tab" data-tab="top-menu-tab-4">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-history"/>
</svg>
</span>
<span>Lorem</span>
</a>
</nav>
<div class="tab__content">
<div id="top-menu-tab-1" class="w-tab-section">
<div id="main-field-1" class="main-field active" style="height: 300px;">
<div class="main-field__content">
<h2 class="title-1">Title 1</h2>
<div class="txt">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
</div>
<div id="top-menu-tab-2" class="w-tab-section active">
<div id="main-field-1" class="main-field active" style="height: 300px;">
<div class="main-field__content">
<h2 class="title-1">Title 2</h2>
<div class="txt">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</div>
</div>
</div>
</div>
<div id="top-menu-tab-3" class="w-tab-section">
<div id="main-field-1" class="main-field active" style="height: 300px;">
<div class="main-field__content">
<h2 class="title-1">Title 3</h2>
<div class="txt">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</div>
</div>
</div>
</div>
<div id="top-menu-tab-4" class="w-tab-section">
<div id="main-field-1" class="main-field active" style="height: 300px;">
<div class="main-field__content">
<h2 class="title-1">Title 4</h2>
<div class="txt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
<div class="txt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</div>
</div>
</div>
</div>
</div>
</div>
Tooltips
Lorem ipsum dolor sit amet, Show vertical tooltip adipisicing elit. Tempore, nostrum!
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error
reprehenderit laborum vel dicta, cum enim! Show horizontal tooltip
adipisicing elit. Tempore, nostrum!
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error
reprehenderit laborum vel dicta, cum enim! Error
reprehenderit laborum vel dicta, cum enim! Show horizontal tooltip
adipisicing elit. Tempore, nostrum!
Text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, sequi, amet! Ad magnam accusantium, quae pariatur soluta quas iusto voluptatum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat deserunt repellat dolorum tempora assumenda voluptatibus unde reiciendis consectetur ea quas impedit delectus quaerat quam, culpa ducimus fugit sapiente doloremque eius.
<button class="btn btn--primary" data-hover="tooltip-1" data-direction="vertical"></button>
<button class="btn btn--primary" data-hover="tooltip-1" data-direction="horizontal"></button>
<div id="tooltip-1" class="popover popover--tooltip">
<div>Text</div>
</div>
HEADERS and text
Title 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, inventore.
<h2 class="title-1">Title 1</h2>
Title 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, inventore.
<h2 class="title-2">Title 2</h2>
Title 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, inventore.
<h2 class="title-3">Title 3</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus sed nisi dicta. Tempore cupiditate, dolorem nostrum eos illo rerum. Illum modi facere aliquam veniam, commodi fuga, vel itaque consectetur atque cupiditate, ex ullam odit enim ducimus, hic error deleniti dolor necessitatibus quidem tempore! Quo quae eos voluptas consectetur nisi aliquid!
<div class="txt">Lorem ipsum dolor sit amet</div>
Links
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, dignissimos. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet illum recusandae id quasi aperiam tempore maxime eos dolore ipsa tempora earum vel eveniet, quibusdam dolorem aliquid provident.
Lorem ipsum.
Perferendis, aspernatur ducimus itaque praesentium, odio iste inventore quae aperiam explicabo dicta eveniet. aperiam tempore maxime eos dolore ipsa tempora earum vel eveniet, quibusdam dolorem aliquid provident.
Lorem ipsum.
Perferendis, aspernatur ducimus itaque praesentium, odio iste inventore quae aperiam explicabo dicta eveniet.
<a href="" class="link-txt">link text</a>
<a href="#" class="link-txt link-txt--icon-left">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-save"/>
</svg>
</span>
<span>link text.</span>
</a>
<a href="" class="link-txt link-txt--icon-right">
<span class="icon-svg-wrap">
<svg class="icon-svg">
<use xlink:href="site/images/svg-sprite.svg#icon-save"/>
</svg>
</span>
<span>link text.</span>
</a>
LISTS
- Lorem ipsum dolor sit amet, consectetur adipisicing.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, earum!
<ul class="list-un">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
- Lorem ipsum dolor sit amet, consectetur adipisicing.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, earum!
<ol class="list-or">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
- Lorem ipsum dolor sit amet, consectetur adipisicing.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, earum!
- Lorem ipsum dolor sit amet, consectetur adipisicing.
- Lorem ipsum dolor sit amet.
-
Lorem ipsum dolor sit.
- Lorem ipsum dolor sit amet, consectetur adipisicing.
- Lorem ipsum dolor sit amet.
- Lorem ipsum dolor sit.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, earum!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, earum!
- Lorem ipsum dolor sit amet, consectetur adipisicing.
- Lorem ipsum dolor sit amet.