diff --git a/templates/component/hero.twig b/templates/component/hero.twig
new file mode 100644
index 000000000..c58d76cb1
--- /dev/null
+++ b/templates/component/hero.twig
@@ -0,0 +1,86 @@
+{#
+{% embed '@hdbt/component/hero.twig' with {
+    design: content.field_hero_design[0]['#markup'],
+    title: content.field_hero_title,
+    description: content.field_hero_desc,
+    image: content.field_hero_image,
+  } %}
+{% endembed %}
+#}
+
+{% if design == "background-image" %}
+  {% set design_class = "hero--with-image-bottom" %}
+{% elseif design == "diagonal" %}
+  {% set design_class = "hero--diagonal" %}
+{% elseif design == "with-image-bottom" %}
+  {% set design_class = "hero--with-image-bottom" %}
+{% elseif design == "with-image-left" %}
+  {% set design_class = "hero--with-image-left" %}
+{% elseif design == "with-image-right" %}
+  {% set design_class = "hero--with-image-right" %}
+{% elseif design == "without-image-center" %}
+  {% set design_class = "hero--without-image-left" %}
+{% elseif design == "without-image-left" %}
+  {% set design_class = "hero--without-image-left" %}
+{% elseif design == "with-search" %}
+  {% set design_class = "hero--with-search" %}
+{% endif %}
+
+
+{% set hero_wrapper_attributes = {
+  'class': [
+    'hero',
+    design_class ? design_class,
+  ]
+} %}
+
+<div{{ create_attribute(hero_wrapper_attributes) }}>
+  {% embed "@hdbt/misc/container.twig" with {container_element: 'hero'} %}
+    {% block container_content %}
+      <div class="hero__text-content">
+        {# Hyphenate the visible title, but share to screen readers unhyphenated version as for example NVDA reads hyphenated text poorly #}
+        <h1 class="hero__title hyphenate" aria-labelledby="page_title">{{ title }}</h1>
+        <span class="is-hidden" id="page_title">{{ title }}</span>
+
+        {% 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',
+          } %}
+        {% endif %}
+
+        {% if description|render|striptags|trim is not empty %}
+          {% if
+            design == "without-image-left" or
+            design == "without-image-center" or
+            design == "with-image-right" or
+            design == "with-image-left" or
+            design == "with-image-bottom" or
+            design == "diagonal"
+          %}
+            <div class="hero__description user-edited-content">
+              {{ description }}
+            </div>
+          {% endif %}
+        {% endif %}
+      </div>
+      <span class="hero__arrow" aria-hidden="true"></span>
+    {% endblock %}
+  {% endembed %}
+
+  {% if
+    design == "with-image-right" or
+    design == "with-image-left" or
+    design == "with-image-bottom" or
+    design == "diagonal" or
+    design == "with-search"
+  %}
+    {% if image|render %}
+      <div class="hero__image-container">
+        {% include '@hdbt/misc/koro.twig' with {koro: koro, flip: true } %}
+        {{ image }}
+      </div>
+    {% endif %}
+  {% endif %}
+  {% include '@hdbt/misc/koro.twig' with {koro: koro, flip: false } %}
+</div>
diff --git a/templates/misc/news-footer.twig b/templates/misc/news-footer.twig
new file mode 100644
index 000000000..c1f2bb103
--- /dev/null
+++ b/templates/misc/news-footer.twig
@@ -0,0 +1,36 @@
+{# Links and links title #}
+{% if content.field_news_item_links_link|render %}
+  <div class="content-links">
+
+    {% if content.field_news_item_links_title|render %}
+      <div class="content-links__title">
+        {{ content.field_news_item_links_title }}
+      </div>
+    {% endif %}
+
+    <ul class="content-links__links">
+      {% for key in content.field_news_item_links_link['#items']|keys %}
+        <li class="content-links__links__link">{{ content.field_news_item_links_link[key] }}</li>
+      {% endfor %}
+    </ul>
+  </div>
+{% endif %}
+
+{# Social media share links #}
+{{ drupal_block('helfi_platform_config_social_sharing_block') }}
+
+{# Tags #}
+{% include "@hdbt/misc/news-tags.twig" with
+  {
+    tags: content.field_news_item_tags,
+    neighbourhoods: content.field_news_neighbourhoods,
+    groups: content.field_news_groups,
+  }
+%}
+
+{# Radioactivity #}
+{% if content.field_radioactivity|render %}
+  <section class="content-radioactive">
+    {{ content.field_radioactivity }}
+  </section>
+{% endif %}
diff --git a/templates/module/helfi-news-item/node--news-item.html.twig b/templates/module/helfi-news-item/node--news-item.html.twig
index 6faed5508..3be2cffcd 100644
--- a/templates/module/helfi-news-item/node--news-item.html.twig
+++ b/templates/module/helfi-news-item/node--news-item.html.twig
@@ -58,42 +58,7 @@
       {{ content.field_content }}
     {% endif %}
 
-    {# Links and links title #}
-    {% if content.field_news_item_links_link|render %}
-      <div class="content-links">
-
-        {% if content.field_news_item_links_title|render %}
-          <div class="content-links__title">
-            {{ content.field_news_item_links_title }}
-          </div>
-        {% endif %}
-
-        <ul class="content-links__links">
-          {% for key in content.field_news_item_links_link['#items']|keys %}
-            <li class="content-links__links__link">{{ content.field_news_item_links_link[key] }}</li>
-          {% endfor %}
-        </ul>
-      </div>
-    {% endif %}
-
-    {# Social media share links #}
-    {{ drupal_block('helfi_platform_config_social_sharing_block') }}
-
-    {# Tags #}
-    {% include "@hdbt/misc/news-tags.twig" with
-      {
-        tags: content.field_news_item_tags,
-        neighbourhoods: content.field_news_neighbourhoods,
-        groups: content.field_news_groups,
-      }
-    %}
-
-    {# Radioactivity #}
-    {% if content.field_radioactivity|render %}
-      <section class="content-radioactive">
-        {{ content.field_radioactivity }}
-      </section>
-    {% endif %}
+    {% include '@hdbt/misc/news-footer.twig' %}
 
   {% endblock main_content %}
 
diff --git a/templates/paragraphs/paragraph--hero.html.twig b/templates/paragraphs/paragraph--hero.html.twig
index d8641733a..e90fc14a1 100644
--- a/templates/paragraphs/paragraph--hero.html.twig
+++ b/templates/paragraphs/paragraph--hero.html.twig
@@ -1,80 +1,12 @@
 {% set design = content.field_hero_design[0]['#markup'] %}
 {% set description = content.field_hero_desc %}
 
-{% if design == "background-image" %}
-  {% set design_class = "hero--with-image-bottom" %}
-{% elseif design == "diagonal" %}
-  {% set design_class = "hero--diagonal" %}
-{% elseif design == "with-image-bottom" %}
-  {% set design_class = "hero--with-image-bottom" %}
-{% elseif design == "with-image-left" %}
-  {% set design_class = "hero--with-image-left" %}
-{% elseif design == "with-image-right" %}
-  {% set design_class = "hero--with-image-right" %}
-{% elseif design == "without-image-center" %}
-  {% set design_class = "hero--without-image-left" %}
-{% elseif design == "without-image-left" %}
-  {% set design_class = "hero--without-image-left" %}
-{% elseif design == "with-search" %}
-  {% set design_class = "hero--with-search" %}
-{% endif %}
-
-{%
-  set classes = [
-    'hero',
-    design_class ? design_class,
-  ]
-%}
-
 {% block paragraph %}
-  <div{{ attributes.addClass(classes) }}>
-    {% embed "@hdbt/misc/container.twig" with {container_element: 'hero'} %}
-      {% block container_content %}
-        <div class="hero__text-content">
-          {# Hyphenate the visible title, but share to screen readers unhyphenated version as for example NVDA reads hyphenated text poorly #}
-          <h1 class="hero__title hyphenate" aria-labelledby="page_title">{{ content.field_hero_title }}</h1>
-          <span class="is-hidden" id="page_title">{{ content.field_hero_title }}</span>
-
-          {% 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',
-            } %}
-          {% endif %}
-
-          {% if description[0]['#text'] is not empty %}
-            {% if
-              design == "without-image-left" or
-              design == "without-image-center" or
-              design == "with-image-right" or
-              design == "with-image-left" or
-              design == "with-image-bottom" or
-              design == "diagonal"
-            %}
-              <div class="hero__description user-edited-content">
-                {{ description }}
-              </div>
-            {% endif %}
-          {% endif %}
-        </div>
-        <span class="hero__arrow" aria-hidden="true"></span>
-      {% endblock %}
-    {% endembed %}
-
-    {% if
-      design == "with-image-right" or
-      design == "with-image-left" or
-      design == "with-image-bottom" or
-      design == "diagonal" or
-      design == "with-search"
-    %}
-      {% if content.field_hero_image|render %}
-        <div class="hero__image-container">
-          {% include '@hdbt/misc/koro.twig' with {koro: koro, flip: true } %}
-          {{ content.field_hero_image }}
-        </div>
-      {% endif %}
-    {% endif %}
-    {% include '@hdbt/misc/koro.twig' with {koro: koro, flip: false } %}
-  </div>
+  {% embed '@hdbt/component/hero.twig' with {
+    design: content.field_hero_design[0]['#markup'],
+    title: content.field_hero_title,
+    description: content.field_hero_desc,
+    image: content.field_hero_image,
+  } %}
+  {% endembed %}
 {% endblock paragraph %}