/courses/teachers free ribbon

app/styles/courses/teacher-courses-view.sass

@@ -13,6 +13,35 @@
     font-size: 20px
     font-weight: bold
 
+  .corner-ribbon-container
+    overflow: hidden
+    position: relative
+
+  .corner-ribbon
+    width: 200px
+    background: #0BFF76
+    position: absolute
+    top: 15px
+    left: -65px
+    text-align: center
+    line-height: 24px
+    letter-spacing: 1px
+    color: white
+    transform: rotate(-30deg)
+    -webkit-transform: rotate(-30deg)
+
+    .sticky
+      position: fixed
+
+    .shadow
+      box-shadow: 0 0 3px rgba(0,0,0,.3)
+
+    .top-left
+      top: 25px
+      left: -50px
+      transform: rotate(-45deg)
+      -webkit-transform: rotate(-45deg)
+
   .course-concept
     display: inline-block
     white-space: nowrap

app/templates/courses/teacher-courses-view.jade

@@ -90,11 +90,12 @@ mixin course(courseInstance, classMemberCount)
 
 mixin course-info(course)
   .media
-    img.media-object(src=course.get('screenshot'))
+    .corner-ribbon-container
+      if course.get('free')
+        .corner-ribbon.top-left.sticky.shadow.uppercase free
+      img.media-object(src=course.get('screenshot'))
     .media-body
       span.spr.course-name= course.get('name')
-      if course.get('free')
-        em.course-name (free!)
       p= course.get('description')
       p
         strong.spr Concepts: