KzZqrb

index.haml

.box
  .green.started
    %i.fa.fa-edit.main-icon
    %span.modifier-icons
      %i.fa.fa-check
      %i.fa.fa-minus-circle
      %i.fa.fa-unlock
      

KzZqrb.markdown

KzZqrb

A Pen by Paul Scarrone on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.css

.green{
  background-color: olive;
}

.unstarted{
  height: 7em;
  width: 7em;
}
.started{
  height: 7em;
  width: 7em;
  margin-top: 0em;
}

.overlap{
  position: absolute;
}

.main-icon{
  padding: 0.54em 0 0 0.6em;;
  font-size: 3.25em;
  color: #FFFFF0;
}

.modifier-icons{
  /*border: 2px solid olive;*/
  background-color: lightgrey;
  text-align: right;
  display: block;
  margin-top: 0.5em;
  padding: 0 0.4em;
  font-size: 1.1em;
  color: olive;
}

.started .relative{
  color: #FFFFF0;
}

.no-overflow{
  overflow:hidden;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />