diff --git a/assets/sass/_theme/design-system/hero.sass b/assets/sass/_theme/design-system/hero.sass
index 06237592583eb41e489bf1b23b8c0bc754482dca..d99df476e090910aad37ad1b740b61139f79343d 100644
--- a/assets/sass/_theme/design-system/hero.sass
+++ b/assets/sass/_theme/design-system/hero.sass
@@ -57,14 +57,14 @@
     @include media-breakpoint-up(desktop)
         $negative-margin-bottom: px2rem(150)
         .content
-            h1
+            > h1, > hgroup
                 width: col(9)
         &--with-image
             margin-bottom: $negative-margin-bottom
             .content
                 display: flex
                 justify-content: space-between
-                h1
+                > h1, > hgroup
                     width: col(7)
                 figure
                     width: col(5)
@@ -80,7 +80,7 @@
                 .breadcrumb
                     padding-right: 50px
             .content
-                h1
+                > h1, > hgroup
                     width: col(8)
                 figure
                     margin-top: calc(-#{$spacing3} - #{$spacing2})
diff --git a/layouts/partials/header/hero.html b/layouts/partials/header/hero.html
index bd845e2d7a9275abdee6b8c11d060d6e4ea0b6a5..cccb00714495fc1077bfee364e75fb014303b7ee 100644
--- a/layouts/partials/header/hero.html
+++ b/layouts/partials/header/hero.html
@@ -9,7 +9,15 @@
       {{ partial "header/breadcrumbs.html" .context }}
     {{- end -}}
     <div class="content">
-      <h1>{{ partial "PrepareHTML" .title }}</h1>
+      {{- if .subtitle -}}
+        <hgroup>
+          <h1>{{ partial "PrepareHTML" .title }}</h1>
+          <p>{{ partial "PrepareHTML" .subtitle }}</p>
+        </hgroup>
+      {{- else -}}
+        <h1>{{ partial "PrepareHTML" .title }}</h1>
+      {{- end -}}
+      </hgroup>
       {{- if .image }}
         <figure>
           {{ partial "commons/image.html"