A Pen by Coty Beasley.

Dashboard.markdown

Dashboard

A Pen by Coty Beasley on CodePen.

License.

index.html

<div class="card_wrapper">
  <div class="card card_savedSearches card_red clearfix">
    <script class="template-savedSearches" type="text/x-handlebars-template">
      <h1 class="card_title">{{searchesInfo.title}}</h1>
      <div class="card_data">
      {{#searches}}
      <div class="entry clearfix">
        <div class="entry_title">
          {{title}}
        </div><!-- /.entry_title -->
        <div class="entry_type">
          {{type}}
        </div><!-- /.entry_type -->
      </div><!-- /.entry -->
      {{/searches}}
      </div><!-- /.card_data -->
      <div class="card_footer">
        <a href="{{savedSearchesInfo.url}}" class="btn btn-default">See All</a>
      </div><!-- /.card_footer -->
    </script>
  </div><!-- /.card -->

  <div class="card card_toDos clearfix">
      <script class="template-toDos" type="text/x-handlebars-template">
        <h1 class="card_title">{{toDosInfo.title}}</h1>
        <div class="card_data">
        {{#toDos}}
        <div class="entry clearfix">
          <div class="entry_title">
            {{task}}
          </div><!-- /.entry_title -->
          <div class="entry_date">
            {{assigned}}
          </div><!-- /.entry_type -->
        </div><!-- /.entry -->
        {{/toDos}}
        </div><!-- /.card_data -->
        <div class="card_footer">
          <a href="{{toDosInfo.url}}" class="btn btn-default">See All</a>
        </div><!-- /.card_footer -->
      </script>
  </div><!-- /.card -->
  
  <div class="card card_savedSearches clearfix">
    <script class="template-savedSearches" type="text/x-handlebars-template">
      <h1 class="card_title">{{searchesInfo.title}}</h1>
      <div class="card_data">
      {{#searches}}
      <div class="entry clearfix">
        <div class="entry_title">
          {{title}}
        </div><!-- /.entry_title -->
        <div class="entry_type">
          {{type}}
        </div><!-- /.entry_type -->
      </div><!-- /.entry -->
      {{/searches}}
      </div><!-- /.card_data -->
      <div class="card_footer">
        <a href="{{savedSearchesInfo.url}}" class="btn btn-default">See All</a>
      </div><!-- /.card_footer -->
    </script>
  </div><!-- /.card -->
  
</div><!-- /.card_wrapper -->

script.js

// Store Data to be Outputted
var data = { 
  searchesInfo: { title: 'Saved Searches', url: '#' },
  searches: [
      {title: "Saved Search 982349", type: "case"},
      {title: "Saved Search 823732", type: "company"},
      {title: "Saved Search 000217", type: "case"}
    ],
  toDosInfo: { title: 'Tasks To Do', url: '#' },
  toDos: [
    { task:'This is a cool task', assigned: '8/12/2014' },
    { task:'Another cool task', assigned: '8/16/2014' },
    { task:'Again, cool task', assigned: '8/20/2014' },
    { task:'Again, cool task', assigned: '8/20/2014' },
    { task:'Again, cool task', assigned: '8/20/2014' }
  ]
};

// Compile (package) HTML & Javascript
var template_savedSearches = Handlebars.compile($('.template-savedSearches').html())(data);
var template_toDos = Handlebars.compile($('.template-toDos').html())(data);

// Output (get) compiled template & data
$(".card_savedSearches").html(template_savedSearches);
$(".card_toDos").html(template_toDos);

style.scss

@import "compass/css3";
// Page Styles for Demo
body { 
  background: #eee;
  font-size: 16px;
}

// Vars
$gutter_sides: 1em;
$borderRadius: 0.25em;
$color-dark: #000;
$color-light: #fff;

.card_wrapper {
  padding: 2.5%;
  max-width: 800px;
  margin: 0 auto;
}

// Card Styles
.card {
  min-width: 300px;
  float: left;
  width: 45%;
  margin: 1em 2.5%;
  background: darken($color-light, 20%);
  border-radius: $borderRadius;
  box-shadow: 0 0 0.25em rgba(0,0,0, 0.5);
  .entry { 
    border-bottom: solid 0.1em darken($color-light, 20%); 
    padding: 0.25em;
    clear: both;
    &:last-child { border: 0; }
    &:hover { 
      background: darken($color-light, 10%);
      cursor: pointer;
    }
  }
  .card_title { 
    border-radius: $borderRadius $borderRadius 0 0;
    font-size: 1.5em;
    padding: 0.25em $gutter_sides/1.5;
    margin: 0;
    color: darken($color-light, 60%);
  }
  .card_data { 
    padding: 1em;
    background: $color-light;
  }
  .card_footer {
    padding: 0.5em 1em;
    text-align: right;
  }
}

@media (min-width: 769px) {
  .card:nth-child(even) { float: right; }
}

@media (max-width: 768px) {
  .card {
    float: none;
    width: 95%;
    margin-bottom: 2em;
  }
}

// Specific Cards
.card_savedSearches {
  .entry_title { float: left; max-width: 67%; }
  .entry_type { float: right; }
}
.card_toDos {
  .entry_title { float: left; } 
  .entry_date { float: right; }
}

// Color Themes
.card_red {
  background: darken(red, 10%);
  .card_title { color: #fff; }
}