To get you started.....
In a Visual Perspective created Nested Responsive Panels for each of your boxes.
Set each to type od Static html.
From you demo.... inspect..grab this bit... (I have changed the Gear Icon to FontAwesome)
<div class="info-box">
<span class="info-box-icon bg-aqua"><i class="fa fa-gear fa-2x"></i></span>
<div class="info-box-content">
<span class="info-box-text">CPU Traffic</span>
<span class="info-box-number">90<small>%</small></span>
</div>
<!-- /.info-box-content -->
</div>
Now create a css file called, say, style.css with the following in it.... (which I grabbed from an inspect from your sample site.
.info-box {
display: block;
min-height: 90px;
background: #fff;
width: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
border-radius: 2px;
margin-bottom: 15px;
}
.info-box-icon {
border-top-left-radius: 2px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 2px;
display: block;
float: left;
height: 90px;
width: 90px;
text-align: center;
font-size: 45px;
line-height: 90px;
background: rgba(0,0,0,0.2);
}
.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
background-color: #00c0ef !important;
}
.info-box-content {
padding: 5px 10px;
margin-left: 90px;
}
.info-box-text {
text-transform: uppercase;
}
.info-box-number {
display: block;
font-weight: bold;
font-size: 18px;
}
In the folder C:\AwareIM\Tomcat\AwareIM\Custom\CSS create a folder EXACTLY the same name as your Business Space and put your style.css file in there.
Put under test and try out.
If you know html and css you can style this any way you want.
Additionally, If you want any data from the application to be displayed then wrap the data in << >> and so long as the instance of the BO is in context then it will show... ie... in your example
assuming you have a Value in, for example SystemSettings.MyValue or LoggedInRegularUser.MyValue...
<<SystemSettings.MyValue>> would go where your static 90 is.
