Medals

index.html

<section>
  <ul>
    <li class="medal"><span>medal</span></li>
    <li class="medal purple heart"><span>medal</span></li>
    <li class="medal green clover"><span>medal</span></li>
    <li class="medal blue diamond"><span>medal</span></li>
    <li class="medal orange spade"><span>medal</span></li>
  </ul>
</section>

Medals.markdown

Medals

Using CSS and character entities to create graphics for achievement medals.

Reference:

• http://dev.w3.org/html5/html-author/charref

A Pen by Jeff S. on CodePen.

License.

style.less

.medal {
  background:lightgrey;
  border:green 1px solid;
  border-radius:4px;
  color:grey;
  width:auto;
  display:inline-block;
  list-style:none;
  text-align:center;
  &:before {background:transparent;border:red 1px solid; content:"\0284"; float:left;}
  &:after {background:transparent;border:blue 1px solid; content:"\0285"; float:right;}
  & span:before {font-size:1.5em; display:block;}
  &.purple {color:purple;
    & span:before {content:"purple";}
  }
  &.orange {color:orange;
    & span:before {content:"orange";}
  }
  &.blue {color:blue;
    & span:before {content:"blue";}
  }
  &.green {color:green;
    span:before {content:"green";}
  }
  & span:after {font-size:2em; display:block;}
  &.heart:before, &.heart:after, &.heart span:after {content:"\02665";}
  &.diamond span:after {content:"\02666";}
  &.spade span:after {content:"\02660";}
  &.club span:after, &.clover span:after {content:"\02663";}
}