Widgets

Use .name and .count classnames for this card.

<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.

<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).

<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.

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

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

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

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

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