diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_0_desktop.png
new file mode 100644
index 0000000000..1b38a7058d
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_0_desktop.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:60956f6f225eb3c3edd3fa500899eda9849aac73972f4331a934fe5357d16a97
+size 79765
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_1_tablet.png
new file mode 100644
index 0000000000..3ecf203a6a
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_1_tablet.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e4d9a61727a915b0c6b643bca6a1e58e3a7537f9f89f2a81c48eda6a277a1bec
+size 77297
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_2_mobile.png
new file mode 100644
index 0000000000..e47c193a97
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-grey_0_document_2_mobile.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ba60ff94ef195381ba4984c31a314dcc5ef188928dc66163047480c465703dd
+size 72399
diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss
index f2735f17c6..251668b5d9 100644
--- a/src/components/hero/_hero.scss
+++ b/src/components/hero/_hero.scss
@@ -329,7 +329,6 @@
             display: grid;
             align-items: start;
             justify-content: space-between;
-            gap: 1rem;
 
             &.ons-hero__title-badge {
                 grid-template-columns: 1fr auto;
diff --git a/src/components/hero/_macro.njk b/src/components/hero/_macro.njk
index 930165e956..b14d270fb0 100644
--- a/src/components/hero/_macro.njk
+++ b/src/components/hero/_macro.njk
@@ -25,10 +25,9 @@
                             "classes": 'ons-u-pt-no ' ~ params.breadcrumbs.classes
                         })
                     }}
-
-                    {% if params.topic %}
-                        <h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
-                    {% endif %}
+                {% endif %}
+                {% if params.topic %}
+                    <h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
                 {% endif %}
                 <div class="ons-hero__title-container {% if params.badge %}ons-hero__title-badge{% endif %}">
                     <header>
diff --git a/src/components/hero/_macro.spec.js b/src/components/hero/_macro.spec.js
index 506b6a3625..b013b8983b 100644
--- a/src/components/hero/_macro.spec.js
+++ b/src/components/hero/_macro.spec.js
@@ -103,8 +103,8 @@ describe('macro: hero', () => {
     it('outputs the official statistics badge when badge is set to true', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, badge: true }));
 
-        expect($('svg').hasClass('ons-hero__badge')).toBe(true);
-        expect($('title').text().trim()).toBe('ons-official-statistics-badge');
+        expect($('.ons-hero__badge').length).toBe(1);
+        expect($('.ons-hero__badge svg title').text().trim()).toBe('Offical Statistics Badge');
     });
 
     it('renders curved gradient when variant is `grey`', () => {