Stats Card
Use .name and .count classnames for this card.
145
Feedbacks
<div class="card-panel stats-card blue blue-text text-lighten-5"> <i class="fa fa-comments-o"></i> <span class="count">145</span> <div class="name">Feedbacks</div> </div>
Use .large classname to increase height of card and text sizes.
58
Uploads
<div class="card-panel stats-card large amber lighten-2 amber-text text-lighten-5"> <i class="fa fa-cloud-upload"></i> <span class="count">58</span> <div class="name">Uploads</div> </div>
Use progress-bars to set progress in bottom, top ( .top) or background ( .background).
139
Firebals
Resore
<div class="card-panel stats-card white red-text text-lighten-2"> <i class="ion-fireball"></i> <span class="count">139</span> <div class="name">Firebals</div> <!-- Bottom Progress --> <div class="progress tiny"> <div class="red" style="width: 81%"></div> </div> <!-- Top Progress --> <div class="progress tiny top"> <div class="red" style="width: 31%"></div> </div> </div> <div class="card-panel stats-card white-text"> <!-- Background Progress --> <div class="progress teal lighten-4 background"> <div class="teal lighten-2" style="width: 64%"></div> </div> <i class="mdi-action-restore"></i> <span class="count">64%</span> <div class="name">Resore</div> </div>
Use .graph classname to insert Sparkline charts.
37%
Server Load
<div class="card-panel stats-card grey-text lighten-1-text"> <i class="fa fa-spinner"></i> <span class="count">37%</span> <div class="name">Server Load</div> <div class="graph"> <div id="sparkcard"></div> </div> </div> <script> $("#sparkcard").conSparkline([76,78,87,65,43,35,23,25,12,14,27,35,32,37,31,46,43,32,36,57,78,87,82,75,58,54,70 ], { type: 'line', width: '100%', height: 73, lineColor: '#9E9E9E', fillColor: false, highlightSpotColor: '#009688', spotColor: false, minSpotColor: false, maxSpotColor: false, highlightLineColor: '#9E9E9E', spotRadius: 0}); </script>
Weather Card
Weather
<div class="card-panel weather-card blue-grey lighten-1 white-text"> <p class="center"><i class="fa fa-spinner fa-pulse"></i> Weather</p> </div>
Weather Card (Static)
-3°C 27°F
City
Cloudy
<div class="card-panel weather-card-static blue-grey lighten-1 white-text"> <div class="row"> <div class="temp col s7">-3°C <span class="alt">27°F</span></div> <div class="city col s5"><i class="fa fa-map-marker"></i> City</div> </div> <div class="icon"><i class="wi wi-cloud"></i></div> <div class="currently">Cloudy</div> </div>
Image Card
Orders Card
3,729
Total Orders
77%
$7,180
Total Income
43%
27
Total Refunds
7%
<div class="card-panel orders-card"> <h4>3,729</h4> <div class="row"> <div class="col s6"> <small>Total Orders</small> </div> <div class="col s6 right-align"> 77% <i class="fa fa-level-down red-text"></i> </div> </div> <div class="progress small"> <div class="determinate" style="width: 77%"></div> </div> ... </div>
TODO
<div class="card-panel todo-card"> <div class="todo-task"> <input type="checkbox" id="checkbox1" checked="checked"> <label for="checkbox1">Change passwords on accounts <span class="todo-remove mdi-action-delete"></span></label> </div> <div class="todo-task"> <input type="checkbox" id="checkbox2"> <label for="checkbox2">Make video for Youtube <span class="todo-remove mdi-action-delete"></span></label> </div> <div class="todo-task"> <input type="checkbox" id="checkbox3"> <label for="checkbox3">Gain popularity on Envato <span class="todo-remove mdi-action-delete"></span></label> </div> <div class="input-field"> <input id="todo-add" type="text"> <label for="todo-add">Add New</label> </div> </div>
<div class="card-panel mail-card"> <div class="row"> <div class="col s8"> <a href="mail-view.html"> <strong>Dianne Chambers</strong> </a> </div> <div class="col s4 right-align"> <small>9:02 AM</small> </div> </div> <div class="row"> <div class="col"> <a href="mail-view.html"> Ut feugiat tempus felis, sit amet mattis dolor accumsan quis. Aenean pharetra tempus justo, vitae euismod ipsum congue a. </a> </div> </div> <hr> ... </div>
