UHF-10771

src/scss/06_components/paragraphs/_hero.scss

@@ -121,6 +121,10 @@ $koro-height: 50px;
   .hero .hds-button {
     @include hds-button-colors-on-dark-bg;
   }
+
+  .hero .hds-text-input__label {
+    color: $color-white;
+  }
 }
 
 /**
@@ -395,3 +399,29 @@ $koro-height: 50px;
 .hero--with-search .helfi-search__form .hds-text-input__label {
   color: inherit;
 }
+
+.hero--with-helsinki-near-you {
+  .hero__container {
+    @include breakpoint($breakpoint-l) {
+      padding-top: $spacing-triple;
+    }
+  }
+
+  .hero__text-content {
+    max-width: $content-width-max;
+  }
+
+  .helfi-helsinki-near-you__form {
+    margin-top: $spacing-double;
+
+    .form-item {
+      margin-bottom: 0;
+    }
+  }
+
+  .helfi-search__submit-button {
+    margin-top: $spacing-and-half;
+    max-width: 280px;
+    width: 100%;
+  }
+}

templates/component/hero.twig

@@ -24,6 +24,8 @@
   {% set design_class = "hero--without-image-left" %}
 {% elseif design == "with-search" %}
   {% set design_class = "hero--with-search" %}
+{% elseif design == "with-helsinki-near-you" %}
+  {% set design_class = "hero--with-helsinki-near-you" %}
 {% endif %}
 
 
@@ -49,7 +51,7 @@
         <h1 class="hero__title hyphenate" aria-labelledby="page_title">{{ title }}</h1>
         <span class="is-hidden" id="page_title">{{ title }}</span>
 
-        {% if design == "with-search"%}
+        {% if design == "with-search" %}
           {% include "@hdbt/component/helfi-search-form.twig" with {
             label: 'What are you looking for?'|t({}, {'context': 'Header and hero search label'}),
             search_id: 'hero',
@@ -71,6 +73,10 @@
           {% endif %}
         {% endif %}
 
+        {% if form %}
+          {{ form }}
+        {% endif %}
+
         {% if published_time|render|striptags|trim is not empty and html_published_time|render|striptags|trim is not empty %}
           <div class="hero__publish-information">
             <span class="visually-hidden">{{ 'Published'|t({}, {'context': 'The helper text before the news article published timestamp'}) }}</span>