diff --git a/modules/wri_node/components/wri_page_hero.sfc b/modules/wri_node/components/wri_page_hero.sfc
deleted file mode 100644
index 09dd9f1b8..000000000
--- a/modules/wri_node/components/wri_page_hero.sfc
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <div {{ attributes.addClass('ds-1col', 'clearfix') }}>
-
-  {{ title_suffix.contextual_links }}
-  <div class="landing-page__hero {{ ((content.hero_image|render) ? 'has-image' : '') }}">
-    {% if content.hero_image %}
-    <div class="hero__image">
-      {{ content.hero_image }}
-    </div>
-    {% endif %}
-
-    <div class="hero__text">
-      <div class="grid">
-        <div class="hero__text--inner padding-vertical">
-          <div class="margin-top-xl"></div>
-          <h1 class="h1 {{ ((content.hero_image|render) ? 'xl white' : '') }}">{{ content.title }}</h1>
-          <div class="intro">{{ content.intro }}</div>
-          {% if content.content|render|striptags|trim is not empty %}
-          <div class="landing-page__hero__content">
-          {{ content.content }}
-          </div>
-          {% endif %}
-        </div>
-      </div>
-    </div>
-
-    {% if content.hero_image|render %}
-    <div class="dark-overlay"></div>
-    {% endif %}
-  </div>
-  </div>
-  {% if content.content|render|striptags|trim is not empty %}
-  <div class="landing-page__hero__field-listing__mobile container content-side-padding padding-vertical white">
-    {{ content.content }}
-  </div>
-  {% endif %}
-</template>
-
-<?php
-$definition['layout'] = [
-  'label' => 'Page hero',
-  'regions' => [
-    'content' => ['label' => 'Content'],
-  ],
-  'icon_map' => [
-    ['content']
-  ],
-  'default_section' => 'content'
-];
-
-$prepareContext = function (&$context) {
-  $node = \Drupal::routeMatch()->getParameter('node');
-  if (!$node) {
-    $node_route = \Drupal::routeMatch()->getRawParameter('section_storage');
-    $node_id = str_replace('node.', '', $node_route);
-    $node = \Drupal\node\Entity\Node::load($node_id);
-  }
-  if ($node instanceof \Drupal\node\NodeInterface) {
-    if (isset($node->field_main_image->entity->field_media_image->entity->uri->value)) {
-      $uri = $node->field_main_image->entity->field_media_image->entity->uri->value;
-      $settings = [
-        'uri' => $uri,
-        'lazy' => 'blazy',
-        'responsive_image_style_id' => 'landing_page_hero',
-      ];
-
-      $build = [
-        '#theme' => 'blazy',
-        '#settings' => $settings,
-        '#attached' => ['library' => ['blazy/load']],
-      ];
-      $context['content']['hero_image'] = $build;
-      \Drupal\wri_node\General::$htmlClasses[] = 'transparent-header white';
-    }
-    else {
-      $context['content']['hero_image'] = [];
-    }
-    $context['content']['title']['#markup'] = isset($node->field_long_title->value) ? check_markup($node->field_long_title->value, 'basic_html') : $node->getTitle();
-    $context['content']['intro']['#markup'] = isset($node->field_intro->value) ? check_markup($node->field_intro->value, 'basic_html') : '';
-  }
-};
-
diff --git a/modules/wri_node/templates/wri-page-hero.html.twig b/modules/wri_node/templates/wri-page-hero.html.twig
new file mode 100644
index 000000000..c1579f1cf
--- /dev/null
+++ b/modules/wri_node/templates/wri-page-hero.html.twig
@@ -0,0 +1,35 @@
+<div {{ attributes.addClass('ds-1col', 'clearfix') }}>
+
+  {{ title_suffix.contextual_links }}
+  <div class="landing-page__hero {{ ((content.hero_image|render) ? 'has-image' : '') }}">
+    {% if content.hero_image %}
+      <div class="hero__image">
+        {{ content.hero_image }}
+      </div>
+    {% endif %}
+
+    <div class="hero__text">
+      <div class="grid">
+        <div class="hero__text--inner padding-vertical">
+          <div class="margin-top-xl"></div>
+          <h1 class="h1 {{ ((content.hero_image|render) ? 'xl white' : '') }}">{{ content.title }}</h1>
+          <div class="intro">{{ content.intro }}</div>
+          {% if content.content|render|striptags|trim is not empty %}
+            <div class="landing-page__hero__content">
+              {{ content.content }}
+            </div>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+    {% if content.hero_image|render %}
+      <div class="dark-overlay"></div>
+    {% endif %}
+  </div>
+</div>
+{% if content.content|render|striptags|trim is not empty %}
+  <div class="landing-page__hero__field-listing__mobile container content-side-padding padding-vertical white">
+    {{ content.content }}
+  </div>
+{% endif %}
diff --git a/modules/wri_node/wri_node.layouts.yml b/modules/wri_node/wri_node.layouts.yml
index 54b11b50d..6963b880c 100644
--- a/modules/wri_node/wri_node.layouts.yml
+++ b/modules/wri_node/wri_node.layouts.yml
@@ -264,3 +264,13 @@ layout_impact-block:
       label: Title
     content:
       label: Content
+
+single_file_component_layout:wri_page_hero:
+  label: "Page hero"
+  template: templates/wri-page-hero
+  regions:
+    content:
+      label: Content
+  icon_map:
+    - [content]
+  default_section: content
diff --git a/modules/wri_node/wri_node.module b/modules/wri_node/wri_node.module
new file mode 100644
index 000000000..b194a2ffc
--- /dev/null
+++ b/modules/wri_node/wri_node.module
@@ -0,0 +1,40 @@
+<?php
+
+/**
+ * @file Wri Node module code.
+ */
+
+/**
+ * Implements hook_preprocess_hook().
+ */
+function wri_node_preprocess_wri_page_hero(&$context) {
+  $node = \Drupal::routeMatch()->getParameter('node');
+  if (!$node) {
+    $node_route = \Drupal::routeMatch()->getRawParameter('section_storage');
+    $node_id = str_replace('node.', '', $node_route);
+    $node = \Drupal\node\Entity\Node::load($node_id);
+  }
+  if ($node instanceof \Drupal\node\NodeInterface) {
+    if (isset($node->field_main_image->entity->field_media_image->entity->uri->value)) {
+      $uri = $node->field_main_image->entity->field_media_image->entity->uri->value;
+      $settings = [
+        'uri' => $uri,
+        'lazy' => 'blazy',
+        'responsive_image_style_id' => 'landing_page_hero',
+      ];
+
+      $build = [
+        '#theme' => 'blazy',
+        '#settings' => $settings,
+        '#attached' => ['library' => ['blazy/load']],
+      ];
+      $context['content']['hero_image'] = $build;
+      \Drupal\wri_node\General::$htmlClasses[] = 'transparent-header white';
+    }
+    else {
+      $context['content']['hero_image'] = [];
+    }
+    $context['content']['title']['#markup'] = isset($node->field_long_title->value) ? check_markup($node->field_long_title->value, 'basic_html') : $node->getTitle();
+    $context['content']['intro']['#markup'] = isset($node->field_intro->value) ? check_markup($node->field_intro->value, 'basic_html') : '';
+  }
+}