1 files changed, 30 insertions, 0 deletions
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
new file mode 100644
index 00000000000..c254dd05aa4
--- /dev/null
+++ b/app/assets/javascripts/registry/explorer/components/details_page/details_header.vue
@@ -0,0 +1,30 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import { DETAILS_PAGE_TITLE } from '../../constants/index';
+
+export default {
+  components: { GlSprintf },
+  props: {
+    imageName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  i18n: {
+    DETAILS_PAGE_TITLE,
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-my-2 gl-align-items-center">
+    <h4>
+      <gl-sprintf :message="$options.i18n.DETAILS_PAGE_TITLE">
+        <template #imageName>
+          {{ imageName }}
+        </template>
+      </gl-sprintf>
+    </h4>
+  </div>
+</template>