_sass: .card -> %card placeholder selector

_sass/custom/announcement.scss

 .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;
 }

_sass/custom/card.scss

-.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;

_sass/custom/module.scss

 .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;
 }