Create Flat Medals With Ribbons Using Pure CSS / SCSS – Badgerly

Preview:

Description:

A pure CSS/SCSS library used to create flat style badges/medals with ribbons on the webpage. Without any JavaScript.

How to use it:

Load the core style sheet file badgerly.css in the document’s head section.

<link rel="stylesheet" href="badgerly.css">

Load the Font Awesome 4 if you want to display custom icons in the middle of the medals.

<link rel="stylesheet" href="font-awesome.min.css">

The basic html structure to create a medal.

<div class="badge large">
  <div class="ribbon red">
  </div>
  <div class="circle silver border">
    <i class="fa fa-star"></i>
  </div>
</div>

Colors:

• gold
• silver
• bronze

Sizes:

• tiny
• small
• medium
• large
• huge

Ribbon Patterns:

• red
• orange
• yellow
• green
• blue
• purple
• pink
• black
• rainbow

Country flags:

• usa
• netherlands
• mexico
• hungary
• france
• canada
• italy
• russia
• germany