@tower1229/flow-ui
Version:
Highly customizable UI framework based Seajs/jQuery
301 lines (300 loc) • 13.7 kB
HTML
<div class="p">
<div class="row">
<div class="span-3 m-b">
<div class="card card-bordered">
<div class="card-body">
<h3>89.9%</h3>
<p>Lorem ipsum...</p>
<div class="m-tb-sm">
<div class="progress progress-success">
<div class="progress-inner">
<div class="progress-bg" style="width: 39.9%;height: 6px"></div>
</div>
</div>
</div>
<p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-bordered">
<div class="card-body">
<h3>12.124</h3>
<p>Lorem ipsum...</p>
<div class="m-tb-sm">
<div class="progress progress-info">
<div class="progress-inner">
<div class="progress-bg" style="width: 39.9%;height: 6px"></div>
</div>
</div>
</div>
<p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-bordered">
<div class="card-body">
<h3>$98.111,00</h3>
<p>Lorem ipsum...</p>
<div class="m-tb-sm">
<div class="progress progress-warning">
<div class="progress-inner">
<div class="progress-bg" style="width: 39.9%;height: 6px"></div>
</div>
</div>
</div>
<p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-bordered">
<div class="card-body">
<h3>2 TB</h3>
<p>Lorem ipsum...</p>
<div class="m-tb-sm">
<div class="progress progress-danger">
<div class="progress-inner">
<div class="progress-bg" style="width: 39.9%;height: 6px"></div>
</div>
</div>
</div>
<p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-primary card-inverse">
<div class="card-body">
<h3>89.9%</h3>
<p>Lorem ipsum...</p>
<div class="m-tb-sm">
<div class="progress">
<div class="progress-inner">
<div class="progress-bg" style="width: 39.9%;height: 6px"></div>
</div>
</div>
</div>
<p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-warning card-inverse">
<div class="card-body">
<h3>12.124</h3>
<p>Lorem ipsum...</p>
<div class="m-tb-sm">
<div class="progress">
<div class="progress-inner">
<div class="progress-bg" style="width: 39.9%;height: 6px"></div>
</div>
</div>
</div>
<p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-danger card-inverse">
<div class="card-body">
<h3>$98.111,00</h3>
<p>Lorem ipsum...</p>
<div class="m-tb-sm">
<div class="progress">
<div class="progress-inner">
<div class="progress-bg" style="width: 39.9%;height: 6px"></div>
</div>
</div>
</div>
<p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-info card-inverse">
<div class="card-body">
<h3>2 TB</h3>
<p>Lorem ipsum...</p>
<div class="m-tb-sm">
<div class="progress">
<div class="progress-inner">
<div class="progress-bg" style="width: 39.9%;height: 6px"></div>
</div>
</div>
</div>
<p class="text-muted">Lorem ipsum dolor sit amet enim.</p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-bordered">
<div class="card-body">
<div class="l bg-primary m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
<i class="ion"></i>
</div>
<h4 class="text-primary m-0 m-t-sm">$1.999,50</h4>
<p class="text-muted m-t-sm"><strong>INCOME</strong></p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-bordered">
<div class="card-body">
<div class="l bg-info m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
<i class="ion"></i>
</div>
<h4 class="text-info m-0 m-t-sm">$1.999,50</h4>
<p class="text-muted m-t-sm"><strong>INCOME</strong></p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-bordered">
<div class="card-body">
<div class="l bg-warning m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
<i class="ion"></i>
</div>
<h4 class="text-warning m-0 m-t-sm">$1.999,50</h4>
<p class="text-muted m-t-sm"><strong>INCOME</strong></p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-bordered">
<div class="card-body">
<div class="l bg-danger m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
<i class="ion"></i>
</div>
<h4 class="text-danger m-0 m-t-sm">$1.999,50</h4>
<p class="text-muted m-t-sm"><strong>INCOME</strong></p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-inverse card-primary">
<div class="card-body" style="color:#fff">
<div class="l m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
<i class="ion"></i>
</div>
<h4 class="m-0 m-t-sm">$1.999,50</h4>
<p class="text-muted m-t-sm"><strong>INCOME</strong></p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-inverse card-info">
<div class="card-body" style="color:#fff">
<div class="l m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
<i class="ion"></i>
</div>
<h4 class="m-0 m-t-sm">$1.999,50</h4>
<p class="text-muted m-t-sm"><strong>INCOME</strong></p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-inverse card-warning">
<div class="card-body" style="color:#fff">
<div class="l m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
<i class="ion"></i>
</div>
<h4 class="m-0 m-t-sm">$1.999,50</h4>
<p class="text-muted m-t-sm"><strong>INCOME</strong></p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-inverse card-danger">
<div class="card-body" style="color:#fff">
<div class="l m-r-sm" style="width:2em;height: 2em;text-align: center;line-height: 2em;font-size:2.5em;">
<i class="ion"></i>
</div>
<h4 class="m-0 m-t-sm">$1.999,50</h4>
<p class="text-muted m-t-sm"><strong>INCOME</strong></p>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-inverse card-primary">
<div class="card-head">
<div class="card-title">Pageviews</div>
</div>
<div class="card-body">
<ul class="items items-inverse">
<li class="item">
<a href="###">Analytics Redesign <span class="item-extra"><strong>24234</strong></span> </a>
</li>
<li class="item">
<a href="###">Analytics Redesign <span class="item-extra"><strong>344</strong></span> </a>
</li>
<li class="item">
<a href="###">Analytics Redesign <span class="item-extra"><strong>13</strong></span> </a>
</li>
</ul>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-inverse card-info">
<div class="card-head">
<div class="card-title">Pageviews</div>
</div>
<div class="card-body">
<ul class="items items-inverse">
<li class="item">
<a href="###">Analytics Redesign <span class="item-extra"><strong>24234</strong></span> </a>
</li>
<li class="item">
<a href="###">Analytics Redesign <span class="item-extra"><strong>344</strong></span> </a>
</li>
<li class="item">
<a href="###">Analytics Redesign <span class="item-extra"><strong>13</strong></span> </a>
</li>
</ul>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-inverse card-warning">
<div class="card-head">
<div class="card-title">Pageviews</div>
</div>
<div class="card-body">
<ul class="items items-inverse">
<li class="item">
<a href="###">Analytics Redesign <span class="item-extra"><strong>24234</strong></span> </a>
</li>
<li class="item">
<a href="###">Analytics Redesign <span class="item-extra"><strong>344</strong></span> </a>
</li>
<li class="item">
<a href="###">Analytics Redesign <span class="item-extra"><strong>13</strong></span> </a>
</li>
</ul>
</div>
</div>
</div>
<div class="span-3 m-b">
<div class="card card-inverse card-danger">
<div class="card-head">
<div class="card-title">Pageviews</div>
</div>
<div class="card-body">
<ul class="items items-inverse">
<li class="item">
<a href="###">Analytics Redesign <span class="item-extra"><strong>24234</strong></span> </a>
</li>
<li class="item">
<a href="###">Analytics Redesign <span class="item-extra"><strong>344</strong></span> </a>
</li>
<li class="item">
<a href="###">Analytics Redesign <span class="item-extra"><strong>13</strong></span> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>