package.json

 {
   "name": "@coscine/projectview",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -9,15 +9,16 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@coscine/api-connection": "^1.15.0",
-    "@coscine/app-util": "^1.4.0",
+    "@coscine/api-connection": "^1.18.0",
+    "@coscine/app-util": "^1.5.0",
+    "@coscine/component-library": "1.0.0",
     "@itcenter-layout/bootstrap": "^1.5.5",
     "@itcenter-layout/masterpage": "^1.2.9",
-    "@types/jquery": "^3.3.38",
-    "bootstrap-vue": "^2.15.0",
+    "@types/jquery": "^3.5.1",
+    "bootstrap-vue": "^2.16.0",
     "jquery": "^3.5.1",
     "vue": "^2.6.11",
-    "vue-i18n": "^8.18.2",
+    "vue-i18n": "^8.21.0",
     "vue-runtime-helpers": "^1.1.2"
   },
   "devDependencies": {
@@ -26,17 +27,17 @@
     "@semantic-release/gitlab": "^6.0.4",
     "@semantic-release/npm": "^7.0.5",
     "@semantic-release/release-notes-generator": "^9.0.1",
-    "@types/chai": "^4.2.11",
-    "@types/mocha": "^7.0.2",
-    "@vue/cli-plugin-babel": "^4.4.4",
-    "@vue/cli-plugin-typescript": "^4.4.4",
-    "@vue/cli-plugin-unit-mocha": "^4.4.4",
-    "@vue/cli-service": "^4.4.4",
+    "@types/chai": "^4.2.12",
+    "@types/mocha": "^8.0.2",
+    "@vue/cli-plugin-babel": "^4.5.3",
+    "@vue/cli-plugin-typescript": "^4.5.3",
+    "@vue/cli-plugin-unit-mocha": "^4.5.3",
+    "@vue/cli-service": "^4.5.3",
     "@vue/test-utils": "1.0.3",
     "chai": "^4.2.0",
-    "typescript": "^3.9.5",
+    "typescript": "^3.9.7",
     "vue-template-compiler": "^2.6.11",
-    "semantic-release": "^17.0.8",
+    "semantic-release": "^17.1.1",
     "@hutson/semantic-delivery-gitlab": "^9.1.0"
   },
   "directories": {

src/ProjectViewApp.vue

 <template>
   <div id="project" class="container">
-    <h4 style="text-align: left;">{{ $t('subprojects') }}:</h4>
-    <div class="SubProjectList">
+    <coscine-headline :headline="$t('subprojects')" />
+    <div class="list">
       <b-card-group deck class="dashboard">
-        <b-card v-for="(project, index) in subProjects" :key="index" class="project_card" @click.prevent="redirect(project)">  
-          <b-row>
-            <div class="col">
-              <img class="card_icon" :src="projectImage" alt />
-            </div>
-          </b-row>
-          <b-row>
-            <div class="col">
-              <h6 v-b-tooltip.hover.bottom="project.displayName">{{ project.displayName }}</h6>
-            </div>
-          </b-row>
-        </b-card>
-        <b-card class="project_card" @click.prevent="openCreate">
-          <b-row>
-            <div class="col">
-              <img class="card_icon" :src="zusatzImage" alt="">
-            </div>
-          </b-row>
-          <b-row>
-            <div class="col">
-              <h6 v-b-tooltip.hover.bottom="$t('addProject')">{{ $t('addProject') }}</h6>
-            </div>
-          </b-row>
-        </b-card>
+        <coscine-card
+          v-for="(project, index) in subProjects"
+          :key="index"
+          :displayName="project.displayName"
+          :imagePath="projectImage"
+          :cardLink="redirect(project)"
+        />
+        <coscine-card :displayName="$t('addProject')" :imagePath="zusatzImage" :cardLink="openCreate()" />
       </b-card-group>
     </div>
   </div>
@@ -35,8 +19,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import { LanguageUtil, GuidUtil, LinkUtil } from '@coscine/app-util';
-
 import { SubProjectApi } from '@coscine/api-connection';
+import { CoscineCard, CoscineHeadline } from '@coscine/component-library';
 
 import projectImagePath from './assets/RWTH_Piktogramm_Projekte.png';
 import zusatzImagePath from './assets/RWTH_Piktogramm_Zusatzangebot.png';
@@ -48,6 +32,10 @@ if (document.currentScript !== undefined) {
 
 export default Vue.extend({
   name: 'project',
+  components: {
+    CoscineCard,
+    CoscineHeadline,
+  },
   data() {
     return {
       subProjects: [] as object[],
@@ -57,10 +45,10 @@ export default Vue.extend({
   },
   methods: {
     openCreate() {
-      LinkUtil.redirectToProject('CreateProject');
+      return LinkUtil.getProjectLink('CreateProject');
     },
     redirect(project: any) {
-      LinkUtil.redirectToExternalProject(project.slug.toLowerCase());
+      return LinkUtil.getExternalProjectLink(project.slug.toLowerCase());
     },
   },
   created() {
@@ -72,49 +60,3 @@ export default Vue.extend({
   },
 });
 </script>
-
-<style scoped>
-#project {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
-#project h4 {
-  color: #000;
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-}
-.dashboard h6 {
-  margin: 0.3em;
-  color: #00549f;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: pre-wrap;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-.dashboard div.card-body {
-  padding: 0 0 0 0;
-  margin-right: -15px;
-  margin-left: -15px;
-}
-.card_icon {
-  padding-top: 2em;
-  width: 3em;
-}
-.card-deck .card.project_card {
-  cursor: pointer;
-  min-width: 9em;
-  min-height: 9em;
-  max-width: 9em;
-  max-height: 9em;
-  width: 9em;
-  height: 9em;
-  margin: 0.5em;
-  text-align: center;
-}
-.project_card:hover {
-  background-color: #cccccc;
-}
-</style>

src/shims-vue.d.ts

@@ -5,6 +5,7 @@ declare module '*.vue' {
 
 declare module '@coscine/api-connection';
 declare module '@coscine/app-util';
+declare module '@coscine/component-library';
 
 declare module "*.png" {
   const value: any;