Use list-asset() mixin component for project index

src/styles/_config.sass

@@ -139,6 +139,7 @@ $link-color: $primary
 
 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
 $font-size-base: .9rem
+$font-size-xs: .75rem
 
 $dropdown-border-width: 0
 $dropdown-box-shadow: 0 10px 25px rgba($black, .1)

src/styles/_project.sass

@@ -995,9 +995,6 @@ a.learn-more
 							font-size: 1.6em
 							left: 7px
 
-					.ribbon
-						+ribbon
-
 				.info
 					width: 100%
 					height: 100%
@@ -2087,3 +2084,6 @@ section.node-children
 				margin: 25px 0 0 0
 				padding: 5px 35px
 				text-align: center
+
+.ribbon
+	+ribbon

src/styles/_utils.sass

@@ -507,28 +507,22 @@
 
 =ribbon
 	background-color: $color-success
-	cursor: default
+	border: thin dashed rgba(white, .5)
+	color: white
+	pointer-events: none
+	font-size: 70%
 	overflow: hidden
-	white-space: nowrap
 	position: absolute
 	right: -40px
 	top: 10px
-	-webkit-transform: rotate(45deg)
-	-moz-transform: rotate(45deg)
-	-ms-transform: rotate(45deg)
-	-o-transform: rotate(45deg)
 	transform: rotate(45deg)
+	white-space: nowrap
 
 	span
-		border: thin dashed rgba(white, .5)
-		color: white
 		display: block
-		font-size: 70%
 		margin: 1px 0
 		padding: 3px 50px
-		text:
-			align: center
-			transform: uppercase
+
 
 @mixin text-background($text-color, $background-color, $roundness, $padding)
 	border-radius: $roundness
@@ -672,3 +666,6 @@
 	img
 		// Just re-use Bootstrap's mixin here.
 		+img-fluid
+
+.overflow-hidden
+	overflow: hidden

src/styles/components/_card.sass

@@ -5,6 +5,9 @@
 			min-width: 30%
 			max-width: 30%
 
+	.card.asset
+		margin-left: 10px
+		margin-right: 10px
 
 .card-padless
 	.card
@@ -21,3 +24,22 @@
 	&:hover
 		img
 			opacity: 1
+
+
+.card.asset
+	color: $color-text
+
+	&.free
+		overflow: hidden
+
+		&:after
+			+ribbon
+			content: 'FREE'
+			padding: 2px 50px
+
+	.card-body
+		font-size: $font-size-xs
+
+	.card-img-top
+		background-size: cover
+		background-position: center