div.wrapper
  div#img1.avatar
    div.badge 3
    
  div#img2.avatar
    div.badge 12
  
  div#img3.avatar
    div.badge 4
  

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600')
  
// Badges ========================================================
badge-offset = -10px
badge-size = 18px
  
.badge
  // Position
  height badge-size
  min-width badge-size
  top badge-offset
  right badge-offset
  
  // Layout
  padding 3px
  border 2px solid white
  border-radius 12px
  display flex
  align-items center
  justify-content center
  
  // Color & Font
  background #F44336
  position absolute
  color white
  font-family 'Open Sans', sans-serif
  font-weight 600
  
  
// Example-related stuff =======================================
html
body
.wrapper
  background linear-gradient(#CCC7FF, #00BDA9)
  height 100%

.wrapper
  display flex
  align-items center
  justify-content center

.avatar
  background-position center
  background-repeat no-repeat
  background-size cover
  height 70px
  position relative
  width 70px
  border-radius 6px
  margin 20px
  
#img1
  background-image url('https://s3.amazonaws.com/uifaces/faces/twitter/enda/128.jpg')
  
#img2
  background-image url('https://s3.amazonaws.com/uifaces/faces/twitter/jina/128.jpg')
  
#img3
  background-image url('https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg')