Generated by SassMeister.com.

SassMeister-input-HTML.haml

/ Star them to stick them to the top under popular projects
/ Sort alphabetically or by recent activity
/ Image for the project can be uploaded, or one of our many
/ random stock photos can be used.

.container
  .card
    .card__header
      %p.card__subhead Git
      %h3.card__heading Android Application
    %img.card__image{:src => 'http://lorempixel.com/300/150/transport'}
    %p.card__meta 3623 commits
  .card
    .card__header
      %p.card__subhead Git
      %h3.card__heading Application
    %img.card__image{:src => 'http://lorempixel.com/300/150/cats'}
    %p.card__meta 3623 commits
  .card.card--last
    .card__header
      %p.card__subhead Git
      %h3.card__heading Blog
    %img.card__image{:src => 'http://lorempixel.com/300/150/people'}
    %p.card__meta 3623 commits

SassMeister-input.sass

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700)

*
  box-sizing: border-box

body
  background: #f9f9f9
  font-family: "Montserrat"

h1, h2, h3,
h4, h5, h6,
p
  font-weight: 400
  margin: 0 0 1rem 0

.container
  margin: 0 auto
  max-width: 60em

.card
  background: #ffffff
  border: 1px solid #eaeaea
  border-radius: 6px
  cursor: pointer
  float: left
  margin-right: 2%
  width: 32%
  &:hover
    border-color: #ddd

.card--last
  margin-right: 0

.card__header
  border-bottom: 1px solid #eaeaea
  overflow: hidden
  padding: 1rem 1.5rem 0
  text-align: center

.card__subhead
  color: #87DA6B
  font-size: 0.75rem
  font-weight: 400
  margin: 0 0 .25rem 0
  text-align: right
  text-transform: uppercase

.card__image
  display: block
  height: auto
  width: 100%

.card__meta
  font-size: .75rem
  text-align: right
  padding: 1rem 1.5rem 0

SassMeister-output.css

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
* {
  box-sizing: border-box;
}

body {
  background: #f9f9f9;
  font-family: "Montserrat";
}

h1, h2, h3,
h4, h5, h6,
p {
  font-weight: 400;
  margin: 0 0 1rem 0;
}

.container {
  margin: 0 auto;
  max-width: 60em;
}

.card {
  background: white;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  cursor: pointer;
  float: left;
  margin-right: 2%;
  width: 32%;
}
.card:hover {
  border-color: #dddddd;
}

.card--last {
  margin-right: 0;
}

.card__header {
  border-bottom: 1px solid #eaeaea;
  overflow: hidden;
  padding: 1rem 1.5rem 0;
  text-align: center;
}

.card__subhead {
  color: #87da6b;
  font-size: 0.75rem;
  font-weight: 400;
  margin: 0 0 0.25rem 0;
  text-align: right;
  text-transform: uppercase;
}

.card__image {
  display: block;
  height: auto;
  width: 100%;
}

.card__meta {
  font-size: 0.75rem;
  text-align: right;
  padding: 1rem 1.5rem 0;
}

SassMeister-rendered.html

<!-- Star them to stick them to the top under popular projects -->
<!-- Sort alphabetically or by recent activity -->
<!-- Image for the project can be uploaded, or one of our many -->
<!-- random stock photos can be used. -->
<div class='container'>
  <div class='card'>
    <div class='card__header'>
      <p class='card__subhead'>Git</p>
      <h3 class='card__heading'>Android Application</h3>
    </div>
    <img class='card__image' src='http://lorempixel.com/300/150/transport'>
    <p class='card__meta'>3623 commits</p>
  </div>
  <div class='card'>
    <div class='card__header'>
      <p class='card__subhead'>Git</p>
      <h3 class='card__heading'>Application</h3>
    </div>
    <img class='card__image' src='http://lorempixel.com/300/150/cats'>
    <p class='card__meta'>3623 commits</p>
  </div>
  <div class='card card--last'>
    <div class='card__header'>
      <p class='card__subhead'>Git</p>
      <h3 class='card__heading'>Blog</h3>
    </div>
    <img class='card__image' src='http://lorempixel.com/300/150/people'>
    <p class='card__meta'>3623 commits</p>
  </div>
</div>