diff --git a/_sass/custom/announcement.scss b/_sass/custom/announcement.scss
index 4c3aeeca45a67e9433f9159aba159c91525f8132..a1f6804746b46c52911c906a43619fd5c16e24cb 100644
--- a/_sass/custom/announcement.scss
+++ b/_sass/custom/announcement.scss
@@ -1,9 +1,9 @@
 .announcement {
-  @extend .card;
+  @extend %card;
 }
 
 .announcement-body {
-  @extend .card-body;
+  @extend %card-body;
 
   h1, h2, h3, h4, h5, h6 {
     display: flex;
@@ -12,5 +12,5 @@
 }
 
 .announcement-meta {
-  @extend .card-meta, .text-grey-dk-100, .bg-grey-lt-200;
+  @extend %card-meta, .text-grey-dk-100, .bg-grey-lt-200;
 }
diff --git a/_sass/custom/card.scss b/_sass/custom/card.scss
index 35e7c290930bedd783b90ee6aebca9c28e400bff..423b4ac60cdd33e0129688e31c4406959691f887 100644
--- a/_sass/custom/card.scss
+++ b/_sass/custom/card.scss
@@ -1,4 +1,4 @@
-.card {
+%card {
   @include abstract-card();
   display: flex;
   flex-direction: column;
@@ -11,8 +11,7 @@
   }
 }
 
-.card-header,
-.card-body {
+%card-header {
   padding: $sp-2 $sp-4;
 
   p {
@@ -20,11 +19,13 @@
   }
 }
 
-.card-body {
+%card-body {
+  @extend %card-header;
+
   flex: 1 1 auto;
 }
 
-.card-meta {
+%card-meta {
   @extend .label;
   border-radius: $border-radius;
   padding-bottom: 0;
diff --git a/_sass/custom/module.scss b/_sass/custom/module.scss
index 1f57c4a3e3dfb1c548aadf22029cdbc1073423b0..581c540434c29d5ec7ba94d04d5f1f7eaab380be 100644
--- a/_sass/custom/module.scss
+++ b/_sass/custom/module.scss
@@ -1,5 +1,5 @@
 .module {
-  @extend .card;
+  @extend %card;
 
   .module-days {
     display: grid;
@@ -60,7 +60,7 @@
     }
 
     .label {
-      @extend .card-meta;
+      @extend %card-meta;
       margin-left: 0;
 
       &.label-hw-out {
@@ -79,13 +79,13 @@
 }
 
 .module-meta {
-  @extend .card-meta, .text-grey-dk-100, .bg-grey-lt-200;
+  @extend %card-meta, .text-grey-dk-100, .bg-grey-lt-200;
 }
 
 .module-header {
-  @extend .card-header;
+  @extend %card-header;
 }
 
 .module-body {
-  @extend .card-body;
+  @extend %card-body;
 }