swiss krono- - -Robex Radomsko
ROBEX
WORKPLACE

WORKPLACE

Progress Bars

Color

Can have different colors

95%
65%
55%
75%
82%
35%
28%
<div class="wojo info progress" data-percent="95">
  <div class="bar">95%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo black progress" data-percent="65">
  <div class="bar">65%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo success progress" data-percent="55">
  <div class="bar">55%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo negative progress" data-percent="75">
  <div class="bar">75%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo warning progress" data-percent="82">
  <div class="bar">82%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo purple progress" data-percent="35">
  <div class="bar">35%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo teal progress" data-percent="28">
  <div class="bar">28%</div>
</div>
Striped

A progress bar can be striped

95%
65%
55%
75%
82%
35%
28%
<div class="wojo info striped progress" data-percent="95">
  <div class="bar">95%</div>
</div>

<div class="wojo basic divider"></div>
<div class="wojo black striped progress" data-percent="65">
  <div class="bar">65%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo success striped progress" data-percent="55">
  <div class="bar">55%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo negative striped progress" data-percent="75">
  <div class="bar">75%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo warning striped progress" data-percent="82">
  <div class="bar">82%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo purple striped progress" data-percent="35">
  <div class="bar">35%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo teal striped progress" data-percent="28">
  <div class="bar">28%</div>
</div>
Active

A progress bar can show activity

95%
65%
<div class="wojo info striped active progress" data-percent="95">
  <div class="bar">95%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo black striped active progress" data-percent="65">
  <div class="bar">65%</div>
</div>
Size

A progress bar can be thinner

<div class="wojo thin striped info progress" data-percent="80">
  <div class="bar"> </div>
</div>
<div class="wojo thin striped success progress" data-percent="60">
  <div class="bar"> </div>
</div>
Headers

A progress bar can have headers

Web Design 92%

Marketing & PR 63%

<h3 class="wojo info header">Web Design
  <span class="push-right">92%</span></h3>
<div class="wojo striped info active progress" data-percent="92">
  <div class="bar"> </div>
</div>
<h3 class="wojo negative header">Marketing &amp; PR 
  <span class="push-right">63%</span></h3>
<div class="wojo striped negative active progress" data-percent="63">
  <div class="bar"> </div>
</div>

Icons

An icon sets contains an arbitrary number of glyphs

Content

Icons can represent types of web content

Archive
Attachment
Browser
Bug
Calendar
Cart
Certificate
Chat
Cloud
Code
Comment
Dashboard
Desktop
Empty Calendar
External URL
External URL Sign
File
File Outline
Folder
Open Folder
Open Folder Outline
Folder Outline
Help
Home
Inbox
Info
Info Letter
Legal
Location
Mail
Mail Outline
Map
Map Marker
Mobile
Music
Chat Outline
Comment Outline
Payment
Photo
QR Code
Question
RSS
RSS Sign
Setting
Settings
Signal
Sitemap
Table
Tablet
Tag
Tags
Tasks
Terminal
Text File
Text File Outline
Time
Trash
URL
User
Users
Video 
<i class="archive icon"></i>
<i class="attachment icon"></i>
<i class="browser icon"></i>
<i class="bug icon"></i>
<i class="calendar icon"></i>
<i class="cart icon"></i>
<i class="certificate icon"></i>
<i class="chat icon"></i>
<i class="cloud icon"></i>
<i class="code icon"></i>
<i class="comment icon"></i>
<i class="dashboard icon"></i>
<i class="desktop icon"></i>
<i class="empty calendar icon"></i>
<i class="external url icon"></i>
<i class="external url sign icon"></i>
<i class="file icon"></i>
<i class="file outline icon"></i>
<i class="folder icon"></i>
<i class="open folder icon"></i>
<i class="open folder outline icon"></i>
<i class="folder outline icon"></i>
<i class="help icon"></i>
<i class="home icon"></i>
<i class="inbox icon"></i>
<i class="information icon"></i>
<i class="information letter icon"></i>
<i class="legal icon"></i>
<i class="location arrow icon"></i>
<i class="mail icon"></i>
<i class="mail outline icon"></i>
<i class="map icon"></i>
<i class="map marker icon"></i>
<i class="mobile icon"></i>
<i class="music icon"></i>
<i class="chat outline icon"></i>
<i class="comment outline icon"></i>
<i class="payment icon"></i>
<i class="photo icon"></i>
<i class="qr code icon"></i>
<i class="question icon"></i>
<i class="rss icon"></i>
<i class="rss sign icon"></i>
<i class="setting icon"></i>
<i class="settings icon"></i>
<i class="signal icon"></i>
<i class="sitemap icon"></i>
<i class="table icon"></i>
<i class="tablet icon"></i>
<i class="tag icon"></i>
<i class="tags icon"></i>
<i class="tasks icon"></i>
<i class="terminal icon"></i>
<i class="text file icon"></i>
<i class="text file outline icon"></i>
<i class="time icon"></i>
<i class="trash icon"></i>
<i class="url icon"></i>
<i class="user icon"></i>
<i class="users icon"></i>
<i class="video icon"></i>
User Actions

Icons can represent a possible user action

Add
Add Sign
Add Sign Box
Adjust
Empty Bookmark
Bookmark
Cloud Download
Cloud Upload
Collapse
Crop
Download Disk
Download
Edit
Edit sign
Empty Flag
Exchange
Expand
Filter
Flag
Fork Code
Forward Mail
Fullscreen
Hide
Level Down
Level Up
Off
Refresh
Remove Circle
Remove
Remove Sign
Reorder
Reply All Mail
Reply Mail
Retweet
Save
Screenshot
Search
Share
Share Sign
Sign in
Sign out
Tint
Unhide
Upload Disk
Upload 
<i class="add icon"></i>
<i class="add sign icon"></i>
<i class="add sign box icon"></i>
<i class="adjust icon"></i>
<i class="bookmark empty icon"></i>
<i class="bookmark icon"></i>
<i class="cloud download icon"></i>
<i class="cloud upload icon"></i>
<i class="collapse icon"></i>
<i class="crop icon"></i>
<i class="download disk icon"></i>
<i class="download icon"></i>
<i class="edit icon"></i>
<i class="edit sign icon"></i>
<i class="empty flag icon"></i>
<i class="exchange icon"></i>
<i class="expand icon"></i>
<i class="filter icon"></i>
<i class="flag icon"></i>
<i class="fork code icon"></i>
<i class="forward mail icon"></i>
<i class="fullscreen icon"></i>
<i class="hide icon"></i>
<i class="level down icon"></i>
<i class="level up icon"></i>
<i class="off icon"></i>
<i class="refresh icon"></i>
<i class="remove circle icon"></i>
<i class="remove icon"></i>
<i class="remove sign icon"></i>
<i class="reorder icon"></i>
<i class="reply all mail icon"></i>
<i class="reply mail icon"></i>
<i class="retweet icon"></i>
<i class="save icon"></i>
<i class="screenshot icon"></i>
<i class="search icon"></i>
<i class="share icon"></i>
<i class="share sign icon"></i>
<i class="sign in icon"></i>
<i class="sign out icon"></i>
<i class="tint icon"></i>
<i class="unhide icon"></i>
<i class="upload disk icon"></i>
<i class="upload icon"></i>
View Actions

Icons can represent actions that modify a page view

Block Layout
Column Layout
Grid Layout
List Layout
Resize Full
Resize Horizontal
Resize Small
Resize Vertical
Sort Alphabet Descending
Sort Alphabet Ascending
Sort Ascending
Sort Attributes Descending
Sort Attributes Ascending
Sort Descending
Sort
Sort Order Descending
Sort Order Ascending
Zoom In
Zoom Out 
<i class="block layout icon"></i>
<i class="column layout icon"></i>
<i class="grid layout icon"></i>
<i class="list layout icon"></i>
<i class="resize full icon"></i>
<i class="resize horizontal icon"></i>
<i class="resize small icon"></i>
<i class="resize vertical icon"></i>
<i class="sort alphabet descending icon"></i>
<i class="sort alphabet icon"></i>
<i class="sort ascending icon"></i>
<i class="sort attributes descending icon"></i>
<i class="sort attributes icon"></i>
<i class="sort descending icon"></i>
<i class="sort icon"></i>
<i class="sort order descending icon"></i>
<i class="sort order icon"></i>
<i class="zoom in icon"></i>
<i class="zoom out icon"></i>
Text Actions

Icons can represent actions that modify text

Align Center
Align Justify
Align Left
Align Right
Bold
Copy
Cut
Ellipsis Horizontal
Ellipsis Vertical
Font
Indent Left
Indent Right
Italic
List
Move
Ordered List
Paste
Print
Quote left
Quote right
Strikethrough
Subscript
Superscript
Text Height
Text Width
Underline
Undo
Unlink
Unordered List 
<i class="align center icon"></i>
<i class="align justify icon"></i>
<i class="align left icon"></i>
<i class="align right icon"></i>
<i class="bold icon"></i>
<i class="copy icon"></i>
<i class="cut icon"></i>
<i class="ellipsis horizontal icon"></i>
<i class="ellipsis vertical icon"></i>
<i class="font icon"></i>
<i class="indent left icon"></i>
<i class="indent right icon"></i>
<i class="italic icon"></i>
<i class="list icon"></i>
<i class="move icon"></i>
<i class="ordered list icon"></i>
<i class="paste icon"></i>
<i class="print icon"></i>
<i class="quote left icon"></i>
<i class="quote right icon"></i>
<i class="strikethrough icon"></i>
<i class="subscript icon"></i>
<i class="superscript icon"></i>
<i class="text height icon"></i>
<i class="text width icon"></i>
<i class="underline icon"></i>
<i class="undo icon"></i>
<i class="unlink icon"></i>
<i class="unordered list icon"></i>
Media Actions

Icons can represent actions that occur on media

Backward
Forward
Eject
Fast Backward
Fast Forward
Mute
Pause
Play Circle
Play
Play Sign
Shuffle
Repeat
Step Backward
Step Forward
Stop
Unmute
Volume Down
Volume Off
Volume Up 
<i class="backward icon"></i>
<i class="forward icon"></i>
<i class="eject icon"></i>
<i class="fast backward icon"></i>
<i class="fast forward icon"></i>
<i class="mute icon"></i>
<i class="pause icon"></i>
<i class="play circle icon"></i>
<i class="play icon"></i>
<i class="play sign icon"></i>
<i class="shuffle icon"></i>
<i class="repeat icon"></i>
<i class="step backward icon"></i>
<i class="step forward icon"></i>
<i class="stop icon"></i>
<i class="unmute icon"></i>
<i class="volume down icon"></i>
<i class="volume off icon"></i>
<i class="volume up icon"></i>
Objects

Icons can represent literal objects

Ambulance
Anchor
Barcode
Lab
Beer
Bell Outline
Bolt
Book
Briefcase
Building
Bullhorn
Bullseye
Camera
Camera retro
Coffee
Doctor
Eraser
Female
Fighter Jet
Fire Extinguisher
Fire
Checkered Flag
Food
Gamepad
Gift
Glass
Globe
HDD
Headphones
Hospital
Key
Keyboard
Laptop
Leaf
Lemon
Lightbulb
Magic
Magnet
Male
Medkit
Money
Moon
Pencil
Phone
Phone Sign
Pin
Plane
Puzzle Piece
Road
Rocket
Shield
Stethoscope
Suitcase
Sun
Ticket
Trophy
Truck
Umbrella
Wheel Chair
Wrench 
<i class="ambulance icon"></i>
<i class="anchor icon"></i>
<i class="barcode icon"></i>
<i class="lab icon"></i>
<i class="beer icon"></i>
<i class="bell outline icon"></i>
<i class="bolt icon"></i>
<i class="book icon"></i>
<i class="briefcase icon"></i>
<i class="building icon"></i>
<i class="bullhorn icon"></i>
<i class="bullseye icon"></i>
<i class="camera icon"></i>
<i class="camera retro icon"></i>
<i class="coffee icon"></i>
<i class="doctor icon"></i>
<i class="eraser icon"></i>
<i class="female icon"></i>
<i class="fighter jet icon"></i>
<i class="fire extinguisher icon"></i>
<i class="fire icon"></i>
<i class="checkered flag icon"></i>
<i class="food icon"></i>
<i class="gamepad icon"></i>
<i class="gift icon"></i>
<i class="glass icon"></i>
<i class="globe icon"></i>
<i class="hdd icon"></i>
<i class="headphones icon"></i>
<i class="hospital icon"></i>
<i class="key icon"></i>
<i class="keyboard icon"></i>
<i class="laptop icon"></i>
<i class="leaf icon"></i>
<i class="lemon icon"></i>
<i class="lightbulb icon"></i>
<i class="magic icon"></i>
<i class="magnet icon"></i>
<i class="male icon"></i>
<i class="medkit icon"></i>
<i class="money icon"></i>
<i class="moon icon"></i>
<i class="pencil icon"></i>
<i class="phone icon"></i>
<i class="phone sign icon"></i>
<i class="pin icon"></i>
<i class="plane icon"></i>
<i class="puzzle piece icon"></i>
<i class="road icon"></i>
<i class="rocket icon"></i>
<i class="shield icon"></i>
<i class="stethoscope icon"></i>
<i class="suitcase icon"></i>
<i class="sun icon"></i>
<i class="ticket icon"></i>
<i class="trophy icon"></i>
<i class="truck icon"></i>
<i class="umbrella icon"></i>
<i class="wrench icon"></i>
Status Indication

Icons can indicate the status of something

Ban Circle
Checkmark
Checkmark Sign
Minus Checkbox
Empty Checkbox
Checked Checkbox
Exclamation
Attention
Frown
Heart Empty
Heart
Loading
Lock
Meh
OK Circle
OK Sign
Smile
Empty Star
Half Empty Star
Half Star
Star
Thumbs Down
Thumbs Down Outline
Thumbs Up
Thumbs Up Outline
Unlock Alternate
Unlock
Warning 
<i class="ban circle icon"></i>
<i class="checkmark icon"></i>
<i class="checkmark sign icon"></i>
<i class="minus checkbox icon"></i>
<i class="empty checkbox icon"></i>
<i class="checked checkbox icon"></i>
<i class="exclamation icon"></i>
<i class="attention icon"></i>
<i class="frown icon"></i>
<i class="heart empty icon"></i>
<i class="heart icon"></i>
<i class="loading icon"></i>
<i class="lock icon"></i>
<i class="meh icon"></i>
<i class="ok circle icon"></i>
<i class="ok sign icon"></i>
<i class="smile icon"></i>
<i class="empty star icon"></i>
<i class="half empty star icon"></i>
<i class="half star icon"></i>
<i class="star icon"></i>
<i class="thumbs down icon"></i>
<i class="thumbs down outline icon"></i>
<i class="thumbs up icon"></i>
<i class="thumbs up outline icon"></i>
<i class="unlock alternate icon"></i>
<i class="unlock icon"></i>
<i class="warn icon"></i>
Symbols

Icons can represent common symbols

Angle Down
Angle Left
Angle Right
Angle up
Arrow Box Down
Arrow Box Right
Arrow Box Left
Arrow Box Up
Down
Left
Right
Up
Asterisk
Triangle Down
Triangle Left
Triangle Right
Triangle Up
Down Arrow
Left Arrow