diff --git a/app/assets/javascripts/discourse/components/badge-card.js.es6 b/app/assets/javascripts/discourse/components/badge-card.js.es6
index 72037d969f9..90013f17135 100644
--- a/app/assets/javascripts/discourse/components/badge-card.js.es6
+++ b/app/assets/javascripts/discourse/components/badge-card.js.es6
@@ -3,7 +3,7 @@ import DiscourseURL from 'discourse/lib/url';
 
 export default Ember.Component.extend({
   size: 'medium',
-  classNameBindings: [':badge-card', 'size', 'navigateOnClick:hyperlink'],
+  classNameBindings: [':badge-card', 'size', 'badge.slug', 'navigateOnClick:hyperlink'],
 
   click(e){
     if (e.target && e.target.nodeName === "A") {