diff --git a/composer.lock b/composer.lock
index 9033e5cd..e1e359f0 100644
--- a/composer.lock
+++ b/composer.lock
@@ -15600,11 +15600,11 @@
         },
         {
             "name": "drupal/coder",
-            "version": "8.3.14",
+            "version": "8.3.15",
             "source": {
                 "type": "git",
                 "url": "https://git.drupalcode.org/project/coder.git",
-                "reference": "adb06efa79ba8b91afed2f351014a6b94192622f"
+                "reference": "0cfad3a21f1168bdc3030ae73351c31f88abba74"
             },
             "require": {
                 "dealerdirect/phpcodesniffer-composer-installer": "^0.7.1",
@@ -15616,8 +15616,8 @@
                 "symfony/yaml": ">=2.0.5"
             },
             "require-dev": {
-                "phpstan/phpstan": "^1.2.0",
-                "phpunit/phpunit": "^6.0 || ^7.0 || ^8.0"
+                "phpstan/phpstan": "^1.4.9",
+                "phpunit/phpunit": "^7.0 || ^8.0"
             },
             "type": "phpcodesniffer-standard",
             "autoload": {
@@ -15641,7 +15641,7 @@
                 "issues": "https://www.drupal.org/project/issues/coder",
                 "source": "https://www.drupal.org/project/coder"
             },
-            "time": "2022-01-28T09:33:01+00:00"
+            "time": "2022-04-02T17:56:30+00:00"
         },
         {
             "name": "drupal/core-dev",
diff --git a/public/.gitignore b/public/.gitignore
index 8f7998bd..fbb621eb 100644
--- a/public/.gitignore
+++ b/public/.gitignore
@@ -10,4 +10,5 @@ example.gitignore
 index.php
 robots.txt
 update.php
-web.config
\ No newline at end of file
+web.config
+/autoload.php
\ No newline at end of file
diff --git a/public/themes/custom/hdbt_subtheme/dist/css/styles.min.css b/public/themes/custom/hdbt_subtheme/dist/css/styles.min.css
index 38b63227..b251c3ee 100644
--- a/public/themes/custom/hdbt_subtheme/dist/css/styles.min.css
+++ b/public/themes/custom/hdbt_subtheme/dist/css/styles.min.css
@@ -1 +1 @@
-.unit.unit--high-school-card,.unit.unit--vocational-school-card{margin-top:24px}@media(min-width: 576px){.unit.unit--high-school-card,.unit.unit--vocational-school-card{padding-left:24px;width:50%}}@media(min-width: 992px){.unit.unit--high-school-card,.unit.unit--vocational-school-card{width:33.3333%}}.unit.unit--high-school-card:first-child,.unit.unit--vocational-school-card:first-child{margin-top:0}@media(min-width: 576px){.unit.unit--high-school-card:nth-child(-n+2),.unit.unit--vocational-school-card:nth-child(-n+2){margin-top:0}}@media(min-width: 992px){.unit.unit--high-school-card:nth-child(-n+3),.unit.unit--vocational-school-card:nth-child(-n+3){margin-top:0}}.unit.unit--high-school-card .unit__link,.unit.unit--vocational-school-card .unit__link{background-color:#fff;height:100%;display:block;text-decoration:none}.unit.unit--high-school-card .unit__link:hover .unit__title,.unit.unit--vocational-school-card .unit__link:hover .unit__title{text-decoration:underline}.unit.unit--high-school-card .unit__link:hover .unit__arrow,.unit.unit--vocational-school-card .unit__link:hover .unit__arrow{padding-left:16px}.unit.unit--high-school-card .unit__title,.unit.unit--vocational-school-card .unit__title{margin-top:0}.unit.unit--high-school-card .unit__image,.unit.unit--vocational-school-card .unit__image{margin-left:0;margin-right:0}.unit.unit--high-school-card .unit__text,.unit.unit--vocational-school-card .unit__text{padding:24px}.unit.unit--high-school-card .unit__title,.unit.unit--vocational-school-card .unit__title{font-size:1.5rem;line-height:1.75rem;font-weight:500;margin-bottom:0}.unit.unit--high-school-card .unit__info-row,.unit.unit--vocational-school-card .unit__info-row{margin-top:8px}.unit.unit--high-school-card .unit__info-row p,.unit.unit--vocational-school-card .unit__info-row p{margin:0}.unit.unit--high-school-card .unit__info-row .address,.unit.unit--vocational-school-card .unit__info-row .address{display:inline;margin-top:0}.unit.unit--high-school-card .unit__info-row .address .address-line1::after,.unit.unit--high-school-card .unit__info-row .address .address-line2::after,.unit.unit--vocational-school-card .unit__info-row .address .address-line1::after,.unit.unit--vocational-school-card .unit__info-row .address .address-line2::after{content:","}.unit.unit--high-school-card .unit__short-desc,.unit.unit--vocational-school-card .unit__short-desc{font-size:1.125rem;line-height:1.75rem;margin-top:16px}.unit.unit--high-school-card .unit__arrow,.unit.unit--vocational-school-card .unit__arrow{display:block;line-height:0;margin-top:16px;margin-left:-4px;padding-left:0;transition:all .3s;width:48px}@media(min-width: 576px){.unit.unit--high-school-card .unit__arrow,.unit.unit--vocational-school-card .unit__arrow{margin-left:-7px}}.unit.unit--high-school-card .unit__arrow .hel-icon,.unit.unit--vocational-school-card .unit__arrow .hel-icon{--icon-size: 32px}@media(min-width: 576px){.unit.unit--high-school-card .unit__arrow .hel-icon,.unit.unit--vocational-school-card .unit__arrow .hel-icon{--icon-size: 48px}}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form,.unit-search--vocational-school .views--unit-search .views-exposed-form{margin-left:-24px}}.unit-search--high-school .views--unit-search .views-exposed-form .form-item,.unit-search--high-school .views--unit-search .views-exposed-form .form-actions,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-item,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:32px}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form .form-item,.unit-search--high-school .views--unit-search .views-exposed-form .form-actions,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-item,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:0;padding-left:24px;width:25%}}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form .form-actions .form-submit,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-actions .form-submit{margin-left:0}}.unit-search--high-school .views--unit-search .views-exposed-form label,.unit-search--vocational-school .views--unit-search .views-exposed-form label{display:block;font-weight:500;margin-bottom:4px}.unit-search--high-school .views--unit-search .unit-search__result--list,.unit-search--vocational-school .views--unit-search .unit-search__result--list{display:flex;flex-direction:column;margin-bottom:0}.unit-search--high-school .views--unit-search .unit-search__result--list img,.unit-search--vocational-school .views--unit-search .unit-search__result--list img{height:auto;width:100%}.unit-search--high-school .views--unit-search .unit-search__result--list .image-placeholder,.unit-search--vocational-school .views--unit-search .unit-search__result--list .image-placeholder{padding-bottom:66.6666666667%}@media(min-width: 576px){.unit-search--high-school .views--unit-search .unit-search__result--list,.unit-search--vocational-school .views--unit-search .unit-search__result--list{flex-direction:row;flex-wrap:wrap;margin-left:-24px;width:calc(100% + 24px)}}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form{position:relative}}.unit-search--daycare-search .bef-exposed-form>.form-item{margin-bottom:0;margin-top:24px}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form>.form-item{width:auto}}.unit-search--daycare-search .bef-exposed-form>.form-item:first-child{margin-top:0}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form>.form-item:first-child{margin-right:30%;width:70%}}.unit-search--daycare-search .fieldgroup{margin-bottom:0;margin-left:0;margin-right:0}.unit-search--daycare-search .bef-checkboxes{display:flex;flex-wrap:wrap;justify-content:flex-start}@media(min-width: 768px){.unit-search--daycare-search .bef-checkboxes{margin-bottom:16px}}.unit-search--daycare-search .bef-checkboxes .form-item{margin-bottom:0;margin-right:24px;margin-top:16px;width:auto}.unit-search--daycare-search .form-actions{margin-top:24px}@media(min-width: 768px){.unit-search--daycare-search .form-actions{position:absolute;right:0;top:4px}}.has-navigation .component--unit-search{margin-left:-32px;margin-right:-32px;padding-left:32px;padding-right:32px}@media(min-width: 992px){.has-navigation .component--unit-search{margin-left:0;margin-right:0}}@media(min-width: 992px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form{margin-left:0}}@media(min-width: 1248px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form{margin-left:-24px}}@media(min-width: 992px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-item,.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:32px;padding-left:0;width:100%}}@media(min-width: 1248px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-item,.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:0;padding-left:24px;width:25%}}.component--daycare-search{background-color:#f7f7f8;padding-top:48px}.component~.component--daycare-search{margin-top:0}.hero-wrapper.has-first-gray-bg-block--desktop{background-color:#f7f7f8;margin-bottom:-64px;padding-bottom:48px}@media(min-width: 992px){.hero-wrapper.has-first-gray-bg-block--desktop{background-color:transparent;margin-bottom:0;padding-bottom:0}}.group-news__links{display:flex;justify-content:flex-start}@media(min-width: 768px){.group-news__links{justify-content:flex-end}}.news-archive .hds-pagination-container{max-width:860px}
+.unit.unit--high-school-card,.unit.unit--vocational-school-card{margin-top:24px}@media(min-width: 576px){.unit.unit--high-school-card,.unit.unit--vocational-school-card{padding-left:24px;width:50%}}@media(min-width: 992px){.unit.unit--high-school-card,.unit.unit--vocational-school-card{width:33.3333%}}.unit.unit--high-school-card:first-child,.unit.unit--vocational-school-card:first-child{margin-top:0}@media(min-width: 576px){.unit.unit--high-school-card:nth-child(-n+2),.unit.unit--vocational-school-card:nth-child(-n+2){margin-top:0}}@media(min-width: 992px){.unit.unit--high-school-card:nth-child(-n+3),.unit.unit--vocational-school-card:nth-child(-n+3){margin-top:0}}.unit.unit--high-school-card .unit__link,.unit.unit--vocational-school-card .unit__link{background-color:#fff;height:100%;display:block;text-decoration:none}.unit.unit--high-school-card .unit__link:hover .unit__title,.unit.unit--vocational-school-card .unit__link:hover .unit__title{text-decoration:underline}.unit.unit--high-school-card .unit__link:hover .unit__arrow,.unit.unit--vocational-school-card .unit__link:hover .unit__arrow{padding-left:16px}.unit.unit--high-school-card .unit__title,.unit.unit--vocational-school-card .unit__title{margin-top:0}.unit.unit--high-school-card .unit__image,.unit.unit--vocational-school-card .unit__image{margin-left:0;margin-right:0}.unit.unit--high-school-card .unit__text,.unit.unit--vocational-school-card .unit__text{padding:24px}.unit.unit--high-school-card .unit__title,.unit.unit--vocational-school-card .unit__title{font-size:1.5rem;line-height:1.75rem;font-weight:500;margin-bottom:0}.unit.unit--high-school-card .unit__info-row,.unit.unit--vocational-school-card .unit__info-row{margin-top:8px}.unit.unit--high-school-card .unit__info-row p,.unit.unit--vocational-school-card .unit__info-row p{margin:0}.unit.unit--high-school-card .unit__info-row .address,.unit.unit--vocational-school-card .unit__info-row .address{display:inline;margin-top:0}.unit.unit--high-school-card .unit__info-row .address .address-line1::after,.unit.unit--high-school-card .unit__info-row .address .address-line2::after,.unit.unit--vocational-school-card .unit__info-row .address .address-line1::after,.unit.unit--vocational-school-card .unit__info-row .address .address-line2::after{content:","}.unit.unit--high-school-card .unit__short-desc,.unit.unit--vocational-school-card .unit__short-desc{font-size:1.125rem;line-height:1.75rem;margin-top:16px}.unit.unit--high-school-card .unit__arrow,.unit.unit--vocational-school-card .unit__arrow{display:block;line-height:0;margin-top:16px;margin-left:-4px;padding-left:0;transition:all .3s;width:48px}@media(min-width: 576px){.unit.unit--high-school-card .unit__arrow,.unit.unit--vocational-school-card .unit__arrow{margin-left:-7px}}.unit.unit--high-school-card .unit__arrow .hel-icon,.unit.unit--vocational-school-card .unit__arrow .hel-icon{--icon-size: 32px}@media(min-width: 576px){.unit.unit--high-school-card .unit__arrow .hel-icon,.unit.unit--vocational-school-card .unit__arrow .hel-icon{--icon-size: 48px}}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form,.unit-search--vocational-school .views--unit-search .views-exposed-form{margin-left:-24px}}.unit-search--high-school .views--unit-search .views-exposed-form .form-item,.unit-search--high-school .views--unit-search .views-exposed-form .form-actions,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-item,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:32px}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form .form-item,.unit-search--high-school .views--unit-search .views-exposed-form .form-actions,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-item,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:0;padding-left:24px;width:25%}}@media(min-width: 768px){.unit-search--high-school .views--unit-search .views-exposed-form .form-actions .form-submit,.unit-search--vocational-school .views--unit-search .views-exposed-form .form-actions .form-submit{margin-left:0}}.unit-search--high-school .views--unit-search .views-exposed-form label,.unit-search--vocational-school .views--unit-search .views-exposed-form label{display:block;font-weight:500;margin-bottom:4px}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form{position:relative}}.unit-search--daycare-search .bef-exposed-form>.form-item{margin-bottom:0;margin-top:24px}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form>.form-item{width:auto}}.unit-search--daycare-search .bef-exposed-form>.form-item:first-child{margin-top:0}@media(min-width: 768px){.unit-search--daycare-search .bef-exposed-form>.form-item:first-child{margin-right:30%;width:70%}}.unit-search--daycare-search .fieldgroup{margin-bottom:0;margin-left:0;margin-right:0}.unit-search--daycare-search .bef-checkboxes{display:flex;flex-wrap:wrap;justify-content:flex-start}@media(min-width: 768px){.unit-search--daycare-search .bef-checkboxes{margin-bottom:16px}}.unit-search--daycare-search .bef-checkboxes .form-item{margin-bottom:0;margin-right:24px;margin-top:16px;width:auto}.unit-search--daycare-search .form-actions{margin-top:24px}@media(min-width: 768px){.unit-search--daycare-search .form-actions{position:absolute;right:0;top:4px}}.has-navigation .component--unit-search{margin-left:-32px;margin-right:-32px;padding-left:32px;padding-right:32px}@media(min-width: 992px){.has-navigation .component--unit-search{margin-left:0;margin-right:0}}@media(min-width: 992px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form{margin-left:0}}@media(min-width: 1248px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form{margin-left:-24px}}@media(min-width: 992px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-item,.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:32px;padding-left:0;width:100%}}@media(min-width: 1248px){.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-item,.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form .form-actions{margin-bottom:0;padding-left:24px;width:25%}}.component--daycare-search{background-color:#f7f7f8;padding-top:48px}.component~.component--daycare-search{margin-top:0}.hero-wrapper.has-first-gray-bg-block--desktop{background-color:#f7f7f8;margin-bottom:-64px;padding-bottom:48px}@media(min-width: 992px){.hero-wrapper.has-first-gray-bg-block--desktop{background-color:transparent;margin-bottom:0;padding-bottom:0}}.group-news__links{display:flex;justify-content:flex-start}@media(min-width: 768px){.group-news__links{justify-content:flex-end}}.news-archive .hds-pagination-container{max-width:860px}
diff --git a/public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml b/public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml
index 70d08519..3b409163 100644
--- a/public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml
+++ b/public/themes/custom/hdbt_subtheme/hdbt_subtheme.libraries.yml
@@ -9,6 +9,7 @@ high-school-search:
   js:
     dist/js/high-school-search.min.js: { }
   dependencies:
+    - hdbt/tabs
     - core/drupal
 
 high-school-mobile-menu:
diff --git a/public/themes/custom/hdbt_subtheme/package-lock.json b/public/themes/custom/hdbt_subtheme/package-lock.json
index a814a52e..f0b9e8e3 100644
--- a/public/themes/custom/hdbt_subtheme/package-lock.json
+++ b/public/themes/custom/hdbt_subtheme/package-lock.json
@@ -4553,6 +4553,19 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -8552,7 +8565,8 @@
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility"
     },
     "node_modules/stack-trace": {
       "version": "0.0.10",
@@ -13029,6 +13043,12 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "optional": true
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
diff --git a/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss b/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss
index 5842dba2..0f9c3ed9 100644
--- a/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss
+++ b/public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss
@@ -30,30 +30,6 @@ $card_spacing: $spacing-and-half;
       margin-bottom: $spacing-quarter;
     }
   }
-
-  .unit-search__result--list {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 0;
-
-    // @TODO: Needs subtheme tpr-unit.html.twig updates from hdbt theme.
-    img {
-      height: auto;
-      width: 100%;
-    }
-
-    .image-placeholder {
-      $-placeholder-aspect-ratio: 3 / 2;
-      padding-bottom: aspect-ratio-padding($-placeholder-aspect-ratio);
-    }
-
-    @include breakpoint($breakpoint-s) {
-      flex-direction: row;
-      flex-wrap: wrap;
-      margin-left: -$card_spacing;
-      width: calc(100% + #{$card_spacing});
-    }
-  }
 }
 
 .unit-search--daycare-search {
diff --git a/public/themes/custom/hdbt_subtheme/templates/module/helfi_tpr/tpr-unit.html.twig b/public/themes/custom/hdbt_subtheme/templates/module/helfi_tpr/tpr-unit.html.twig
index 863cf1c0..fffaf111 100644
--- a/public/themes/custom/hdbt_subtheme/templates/module/helfi_tpr/tpr-unit.html.twig
+++ b/public/themes/custom/hdbt_subtheme/templates/module/helfi_tpr/tpr-unit.html.twig
@@ -1,99 +1,45 @@
 {% if view_mode == 'high_school_card' or view_mode == 'vocational_school_card' %}
 
-  {% if view_mode == 'high_school_card' %}
-    {% set view_mode_name = 'high-school' %}
-  {% else %}
-    {% set view_mode_name = 'vocational-school' %}
-  {% endif %}
-
-  {%
-    set classes = [
-    'unit',
-    'unit--' ~ view_mode_name ~ '-card'
-  ]
-  %}
-
-  {% set image_attributes = create_attribute() %}
+  {% set card_image %}
+    {% if content.picture_url_override|render %}
+      {{ content.picture_url_override }}
+    {% elseif content.picture_url|render %}
+      {{ content.picture_url }}
+    {% else %}
+      {% include "@hdbt/misc/image-placeholder.twig" ignore missing %}
+    {% endif %}
+  {% endset %}
+
+  {% set card_title %}
+    {% if high_school_front_page_title is not empty %}
+      {{ high_school_front_page_title }}
+    {% else %}
+      {{ entity.label }}
+    {% endif %}
+  {% endset %}
 
-  {% if content.picture_url_override|render or content.picture_url|render %}
-    {% set has_image = TRUE %}
-  {% endif %}
-
-  {%
-    set picture_classes = [
-    'unit__image',
-    has_image ? 'unit__image--image' : 'unit__image--placeholder'
-  ]
-  %}
-
-  <div{{ attributes.addClass(classes) }}>
-  {% if view_mode == 'high_school_card' and high_school_front_page_nid is not empty %}
-    <a href="{{ url('entity.node.canonical', { 'node': high_school_front_page_nid }) }}" class="unit__link">
-  {% elseif view_mode == 'high_school_card' and content.www.0 is not empty %}
-    <a href="{{ content.www.0 }}" class="unit__link">
+  {% if view_mode == 'high_school_card' %}
+    {% set view_mode_class = 'card--high-school-teaser' %}
   {% else %}
-    <a href="{{ url('entity.tpr_unit.canonical', { 'tpr_unit': entity.id() }) }}" class="unit__link">
+    {% set view_mode_class = 'card--vocational-school-teaser' %}
   {% endif %}
-      <div{{ image_attributes.addClass(picture_classes) }}>
-        {% if content.picture_url_override|render %}
-          {{ content.picture_url_override }}
-        {% elseif content.picture_url|render %}
-          {{ content.picture_url }}
-        {% else %}
-          {% include "@hdbt/misc/image-placeholder.twig" ignore missing %}
-        {% endif %}
-      </div>
-      <div class="unit__text">
-        <div class="unit__text__content">
-          <{{ unit_title_level|default('h3') }} class="unit__title">
-            {% if high_school_front_page_title is not empty %}
-              {{ high_school_front_page_title }}
-            {% else %}
-              {{ entity.label }}
-            {% endif %}
-          </{{ unit_title_level|default('h3') }}>
-          {% if content.address|render %}
-            <div class="unit__info-row unit__info-row--address">
-              {{ content.address }}
-            </div>
-          {% endif %}
-          {% if content.description_summary|render %}
-            <div class="unit__short-desc">
-              {{ content.description_summary }}
-            </div>
-          {% endif %}
-          <span class="unit__arrow">
-          {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %}
-        </span>
-        </div>
-      </div>
-    </a>
-  </div>
-
-{% elseif view_mode == 'minimal' %}
 
-  <div class="unit unit--minimal">
-    <a href="{{ url('entity.tpr_unit.canonical', { 'tpr_unit': entity.id() }) }}" class="unit__link">
-      <div class="unit__text">
-        <div class="unit__text__content">
-          <{{ unit_title_level|default('h3') }} class="unit__title">
-            {{ entity.label }}
-          </{{ unit_title_level|default('h3') }}>
-          <div class="unit__info">
-            {% if content.address|render %}
-              <div class="unit__info-row unit__info-row--address">
-                {{ content.address }}
-              </div>
-            {% endif %}
-            {{ content.distance }}
-          </div>
-        </div>
-        <div class="unit__read-more">
-          {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %}
-        </div>
-      </div>
-    </a>
-  </div>
+  {% embed '@hdbt/component/card.twig' with {
+    card_modifier_class: view_mode_class,
+    card_image: card_image,
+    card_title: card_title,
+    card_url: unit_url,
+    card_description: content.description_summary,
+    card_tags: card_tags,
+    card_metas: [
+      {
+        icon: 'location',
+        label: 'Address'|t,
+        content: content.address,
+      },
+    ],
+    } %}
+  {% endembed %}
 
 {% else %}