Widgets - convenient interface modules
Summary of features
COLOURcode widgets are small, convenient interface modules that can be used anywhere in your web interface. They are designed to be flexible and easily inserted with minimal markup. The Summary Box widget, for example, is a styling modification of the basic panel element so it can be coloured accordingly.
At a glance
- Pre-styled modules to save you development time.
- Easy to add with simple markup e.g. data-trigger="widget".
- More widgets coming in future template updates
Summary box widget
Add the .summary class to the markup and a panel of any size and colour can be added to any web-page (see below). Some examples are shown on the right (or below if you are using a mobile device).
<div class="panel panel-green summary">
<h3 data-trigger="countup" data-to="25" data-suffix="%">0%<h3>
<h4>capacity</h4>
<p>network</p><i class="fa fa-sitemap"></i>
</div>
0%
capacity
network
0%
loading
servers
0
connections
application
0%
capacity
databases
Clock widget with black face
Markup example:
<div class="clock-black">
<canvas data-trigger="clockface" width="180" height="180">
</canvas>
</div>
Clock widget with black face (70% tint)
Markup example:
<div class="clock-black-tint-70">
<canvas data-trigger="clockface" width="180" height="180">
</canvas>
</div>
Clock widget with black face (50% tint)
Markup example:
<div class="clock-black-tint-50">
<canvas data-trigger="clockface" width="180" height="180">
</canvas>
</div>
Clock widget with white face
Markup example:
<div class="clock-white">
<canvas data-trigger="clockface" width="180" height="180">
</canvas>
</div>
Clock widget with white face (70% tint)
Markup example:
<div class="clock-white-tint-70">
<canvas data-trigger="clockface" width="180" height="180">
</canvas>
</div>
Clock widget with white face (50% tint)
Markup example:
<div class="clock-white-tint-50">
<canvas data-trigger="clockface" width="180" height="180">
</canvas>
</div>
Digital clock widget
Default clock in a span:
Markup: <span data-trigger="clockdigital"></span>
HMS clock in a div:
Markup: <div class="bold text-green" data-trigger="clockdigital" data-format="LTS"></div>
DateTime clock in a label:
Markup: <span class="label label-primary" data-trigger="clockdigital" data-format="LLL"></span>
DateTime clock in a button, in Russian:
Markup: <button class="btn btn-warning" data-trigger="clockdigital" data-format="LLL" data-locale="ru"></button>
DateTime clock in a large button, in Simplified Chinese:
Markup: <button class="btn btn-success btn-lg" data-trigger="clockdigital" data-format="LLL" data-locale="zh-cn"></button>