Parametrize the objective group component

client/src/components/ObjectiveGroup.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="objective-group">
-    <h4>Gesellschaft</h4>
+    <h4>{{group.title}}</h4>
 
-    <ul>
+    <ul class="objective-group__objective-list">
-      <li class="objective-group__objective" v-for="objective in objectives" :key="objective.id">
+      <li class="objective-group__objective" v-for="objective in group.objectives" :key="objective.id">
         {{objective.text}}
       </li>
     </ul>
@@ -13,22 +13,7 @@
 
 <script>
   export default {
-    data: () => {
+    props: ['group']
-      return {
-        objectives: [
-          {
-            id: 1,
-            text: 'Ich kann wichtige personelle und organisatorische Strukturen der Berufsfachschule beschreiben.'
-          },
-          {id: 2, text: 'Ich kenne die Angebote und Regeln meiner Schule.'},
-          {
-            id: 3,
-            text: 'Ich kenne den Aufbau des Schullehrplans ABU und können das Qualifikationsverfahren des allgemeinbildenden Unterrichts ABU beschreiben.'
-          },
-          {id: 4, text: 'Ich kann die drei Lernorte unterscheiden.'}
-        ]
-      }
-    }
   }
 </script>
 
@@ -36,11 +21,18 @@
   @import "@/styles/_variables.scss";
 
   .objective-group {
-    background-color: $grey-3;
+    background-color: $color-lightgrey;
     padding: 17px;
+    margin-bottom: 35px;
+
+    &__objective-list {
+      padding-left: 20px;
+      list-style: disc;
+    }
 
     &__objective {
       font-size: 1.2857142857142858rem;
+      margin-bottom: 28px;
     }
   }
 </style>

client/src/pages/module.vue

@@ -3,14 +3,17 @@
     <h2 class="module__meta-title">Modul 1</h2>
     <h1 class="module__title">Mein neues Umfeld</h1>
     <img src="https://picsum.photos/640/320" alt="" class="module__hero">
-    <p class="module__intro">
+    <div class="module__intro">
-      Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung übernommen.
+      <p>
-
+        Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung übernommen.
-      Wie erging es Ihnen am ersten Arbeits- und Schultag?
+      </p>
-    </p>
+      <p>
+        Wie erging es Ihnen am ersten Arbeits- und Schultag?
+      </p>
+    </div>
 
     <h3>Lernziele</h3>
-    <objective-group></objective-group>
+    <objective-group v-for="group in objectiveGroups" :key="group.id" :group="group"></objective-group>
 
     <h3>1.1 Lehrbeginn</h3>
     <h4>Auftrag 1</h4>
@@ -29,6 +32,46 @@
   export default {
     components: {
       ObjectiveGroup
+    },
+
+    data: () => {
+      return {
+        objectiveGroups: [
+          {
+            id: 1,
+            title: 'Gesellschaft',
+            objectives: [
+              {
+                id: 1,
+                text: 'Ich kann wichtige personelle und organisatorische Strukturen der Berufsfachschule beschreiben.'
+              },
+              {id: 2, text: 'Ich kenne die Angebote und Regeln meiner Schule.'},
+              {
+                id: 3,
+                text: 'Ich kenne den Aufbau des Schullehrplans ABU und können das Qualifikationsverfahren des ' +
+                'allgemeinbildenden Unterrichts ABU beschreiben.'
+              },
+              {id: 4, text: 'Ich kann die drei Lernorte unterscheiden.'}
+            ]
+          }, {
+            id: 2,
+            title: 'Sprache und Kommunikation',
+            objectives: [
+              {
+                id: 1,
+                text: 'Ich kenne verschiedene Arten von Fragen.'
+              },
+              {id: 2, text: 'Ich kann ein Interview mit geeigneten Fragen vorbereiten.'},
+              {
+                id: 3,
+                text: 'Ich kann ein Interview führen und auf interessante oder ausweichende Antworten näher eingehen.'
+              },
+              {id: 4, text: 'Ich kann ein mündlich geführtes Interview schriftlich in Standardsprache festhalten.'},
+              {id: 5, text: 'Ich kann mein Arbeitsplatz genau beschreiben.'}
+            ]
+          }
+        ]
+      }
     }
   }
 </script>
@@ -42,6 +85,11 @@
     width: 640px;
     flex-direction: column;
 
+    &__hero {
+      margin-bottom: 35px;
+      border-radius: 12px;
+    }
+
     &__meta-title {
       font-size: 2.6rem;
       font-weight: 300;
@@ -50,6 +98,12 @@
 
     &__intro {
       font-size: 1.5625rem;
+      line-height: 1.5;
+      margin-bottom: 1em;
+
+      &> p {
+       margin-bottom: 1.5em;
+      }
     }
   }
 

client/src/styles/_typography.scss

@@ -18,17 +18,20 @@ h1 {
   font-size: 4rem; // 64px
   font-weight: 800;
   color: $header-color;
-  margin-bottom: 18px;
+  margin-bottom: 35px;
 }
 
 h2 {
   font-size: 2.625rem; // 42px
+  margin-bottom: 24px;
 }
 
 h3 {
   font-size: 2.1875rem; // 35px
+  margin-bottom: 24px;
 }
 
 h4 {
   font-size: 1.3125rem; // 21px
+  margin-bottom: 24px;
 }

client/src/styles/main.scss

@@ -15,7 +15,7 @@
   max-width: 1440px;
   display: grid;
   grid-template-rows: 72px auto 50px;
-  grid-row-gap: 20px;
+  grid-row-gap: 32px;
   min-height: 100vh;
   grid-template-areas: "h" "c" "f";