added new variant

src/components/hero/_hero.scss

@@ -28,6 +28,26 @@
         }
     }
 
+    &--topic-grey {
+        background-color: var(--ons-color-grey-20);
+        margin-bottom: 2.5rem;
+        &::before {
+            background-color: var(--ons-color-pale-blue);
+            border-radius: 0 0 50% 50%;
+            content: '';
+            height: 100%;
+            inset: 0;
+            left: -40%;
+            position: absolute;
+            width: 150%;
+            @include mq(l) {
+                border-radius: 0 0 80% 50%;
+                left: -25%;
+                width: 130%;
+            }
+        }
+    }
+
     &--grey {
         background-color: var(--ons-color-grey-10);
         &::before {
@@ -329,6 +349,77 @@
         }
     }
 
+    &--topic-grey & {
+        &__details {
+            padding-bottom: 6rem;
+            @include mq(l) {
+                padding-bottom: 4rem;
+            }
+        }
+
+        &__circle-1 {
+            @include mq(l) {
+                background-color: var(--ons-color-grey-20);
+                border-radius: 50%;
+                height: 440px;
+                position: absolute;
+                right: 59px;
+                top: -339px;
+                width: 440px;
+            }
+        }
+
+        &__circle-2 {
+            background-color: var(--ons-color-light-orange);
+            border-radius: 50%;
+            bottom: 4%;
+            height: 40px;
+            position: absolute;
+            right: 15%;
+            width: 40px;
+            @include mq(xl) {
+                bottom: 30%;
+                height: 72px;
+                right: 346px;
+                width: 72px;
+            }
+            @include mq(l, 1299px) {
+                bottom: 30%;
+                height: 72px;
+                right: 25%;
+                width: 72px;
+            }
+            @include mq(m, 979px) {
+                bottom: 8%;
+                right: 10%;
+            }
+        }
+
+        &__circle-3 {
+            background-color: var(--ons-color-ocean-blue);
+            border-radius: 50%;
+            bottom: 7%;
+            height: 80px;
+            position: absolute;
+            right: -26px;
+            width: 80px;
+
+            @include mq(xl) {
+                right: 43px;
+            }
+
+            @include mq(l) {
+                height: 156px;
+                right: 2%;
+                width: 156px;
+            }
+
+            @include mq(m) {
+                bottom: 9%;
+            }
+        }
+    }
+
     &__title-container {
         @include mq(l) {
             display: grid;

src/components/hero/_macro.njk

@@ -13,8 +13,17 @@
                 {% endfor %}
             </div>
         {% endif %}
+        {% if params.variants == 'topic-grey' %}
+            <div class="ons-hero__circles" aria-hidden="true">
+                {% for i in range(1, 4) %}
+                    <div class="ons-hero__circle-{{ i }}"></div>
+                {% endfor %}
+            </div>
+        {% endif %}
         <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
-            <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m ons-col-10@s@m">
+            <div
+                class="ons-hero__details ons-grid__col {% if params.variants != 'topic-grey' %}ons-col-{{ detailsColumns }}@m{% else %}ons-col-8@l{% endif %} col-10@s@m"
+            >
                 {% if params.breadcrumbs %}
                     {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
                     {{

src/components/hero/_macro.spec.js

@@ -93,6 +93,11 @@ describe('macro: hero', () => {
         expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
     });
 
+    it('renders circles when variant is `topic grey`', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'topic-grey' }));
+        expect($('.ons-hero--topic-grey .ons-hero__circles').length).toBe(1);
+    });
+
     it('outputs the correct topic when set', () => {
         const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, topic: 'Topic Text' }));
 

src/components/hero/example-hero-topic-grey.njk

@@ -0,0 +1,24 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "topic": 'Topic',
+        "title": 'Retail Industry',
+        "text": 'Sales by retailers in Great Britain directly to end consumers, including spending on goods (in store and online)
+                (Retail Sales Index) and spending on services (Index of Services). The industry as a whole is used as an indicator
+                of how the wider economy is performing and the strength of consumer spending.',
+        "breadcrumbs": {
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                }
+            ]
+        },
+        "variants": 'topic-grey'
+    })
+}}

src/scss/vars/_colors.scss

@@ -10,6 +10,7 @@
     --ons-color-grey-75: #707071;
     --ons-color-grey-35: #bcbcbd;
     --ons-color-grey-25: #d5d5d6;
+    --ons-color-grey-20: #dee7ee;
     --ons-color-grey-15: #e2e2e3;
     --ons-color-grey-10: #efeff0;
     --ons-color-grey-5: #f5f5f6;
@@ -22,13 +23,15 @@
     --ons-color-sky-blue: #27a0cc;
     --ons-color-aqua-teal: #00a3a6;
     --ons-color-navy-blue: #194766;
+    --ons-color-pale-blue: #e7eff4;
 
     // Supporting palette
     --ons-color-leaf-green: #0f8243;
     --ons-color-ruby-red: #d0021b;
     --ons-color-jaffa-orange: #fa6401;
     --ons-color-sun-yellow: #fbc900;
     --ons-color-neon-yellow: #f0f762;
+    --ons-color-light-orange: #e8bb9b;
 
     // Core colour adjustments - tints
     --ons-color-ocean-blue-tint: #e9eff4;