Add special class to content block

client/src/components/ContentBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content-block">
+  <div class="content-block" :class="specialClass">
     <h4>{{contentBlock.title}}</h4>
 
     <component v-for="component in contentBlock.contents" :key="component.id" :is="component.type"
@@ -25,14 +25,32 @@
       'student_entry': StudentEntry,
       'image_block': ImageBlock,
       Task
+    },
+
+    computed: {
+      specialClass() {
+        return `content-block--${this.contentBlock.type.toLowerCase()}`
+      }
     }
   }
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
   .content-block {
     margin-bottom: 2.5em;
 
+    &--yellow {
+      background-color: rgba($color-accent-1, 0.15);
+      border: 1px solid $color-accent-1;
+      padding: 15px;
+
+      /deep/ .button {
+        border-color: $color-accent-1;
+      }
+    }
+
     /deep/ p {
       line-height: 1.5;
       margin-bottom: 1em;