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
64%
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

Darren Cunningham
<div class="card image-card">
  <div class="image">
    <img src="assets/_con/images/user11.jpg" alt="">
    <a href="page-profile.html" class="link"></a>
  </div>
  <div class="content">
    <h5>Darren Cunningham</h5>
  </div>
</div>

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>

Mail

<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>
Online
Felecia Castro
Felecia Castro
Lorem status
Max Brooks
Max Brooks
Lorem status
Patsy Griffin
Patsy Griffin
Lorem status
Chloe Morgan
Chloe Morgan
Lorem status
Vernon Garrett
Vernon Garrett
Lorem status
Greg Mcdonalid
Greg Mcdonalid
Lorem status
Christian Jackson
Christian Jackson
Lorem status
Offline
Willie Kelly
Willie Kelly
Lorem status
Jenny Phillips
Jenny Phillips
Lorem status
Darren Cunningham
Darren Cunningham
Lorem status
Sandra Cole
Sandra Cole
Lorem status
Monday, Feb 23, 8:23 pm
Hi, Felicia.
How are you?
John Doe Hi! I am good!
Glad to see you :)
This long text is intended to show how the chat will display it.
John Doe Also, we will send the longest word to show how it will fit in the chat window: Pneumonoultramicroscopicsilicovolcanoconiosis
Friday, Mar 10, 5:07 pm
Hi again!
John Doe Hi! Glad to see you.
I want to add you in my Facebook.
Can you give me your page?
John Doe I do not use Facebook. But you can follow me in Twitter.
It's good idea!
John Doe You can find me here - https://twitter.com/nkdevv