diff --git a/app/views/examples/notification-banner-and-error-summary/index.njk b/app/views/examples/notification-banner-and-error-summary/index.njk
new file mode 100644
index 0000000000..3dea1727cb
--- /dev/null
+++ b/app/views/examples/notification-banner-and-error-summary/index.njk
@@ -0,0 +1,29 @@
+{% extends "_generic.njk" %}
+
+{% from "error-summary/macro.njk" import govukErrorSummary %}
+{% from "notification-banner/macro.njk" import govukNotificationBanner %}
+
+{% set pageTitle = "Notification banner and error summary" %}
+{% block pageTitle %}{{ "Error: " if errors }}{{ pageTitle }} - GOV.UK{% endblock %}
+
+{% block header %}
+  {% include "../../partials/banner.njk" %}
+  {{ govukHeader({}) }}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+
+          {{ govukErrorSummary({
+            titleText: "There is a problem"
+          })}}
+
+        {{ govukNotificationBanner({
+          text: "Invite sent to example@email.com",
+          type: "success"
+        })}}
+
+    </div>
+  </div>
+{% endblock %}
diff --git a/app/views/examples/notification-banner-multiple/index.njk b/app/views/examples/notification-banner-multiple/index.njk
new file mode 100644
index 0000000000..1f5a999fcc
--- /dev/null
+++ b/app/views/examples/notification-banner-multiple/index.njk
@@ -0,0 +1,32 @@
+{% extends "_generic.njk" %}
+
+{% from "notification-banner/macro.njk" import govukNotificationBanner %}
+
+{% set pageTitle = "Notification banner" %}
+{% block pageTitle %}{{ "Error: " if errors }}{{ pageTitle }} - GOV.UK{% endblock %}
+
+{% block header %}
+  {% include "../../partials/banner.njk" %}
+  {{ govukHeader({}) }}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+
+        {{ govukNotificationBanner({
+          text: "Invite sent to example@email.com",
+          type: "success"
+        })}}
+
+        {{ govukNotificationBanner({
+          text: "You need to respond within two days",
+          type: "success"
+        })}}
+
+        <h1 class="govuk-heading-xl">{{ pageTitle }}</h1>
+
+        <p class="govuk-body">Please note that it's not recommended to have multiple banners of the same type on the page. This page is an example for testing purposes.</p>
+    </div>
+  </div>
+{% endblock %}
diff --git a/app/views/examples/notification-banner/index.njk b/app/views/examples/notification-banner/index.njk
new file mode 100644
index 0000000000..5cc1fcc483
--- /dev/null
+++ b/app/views/examples/notification-banner/index.njk
@@ -0,0 +1,35 @@
+{% extends "_generic.njk" %}
+
+{% from "notification-banner/macro.njk" import govukNotificationBanner %}
+
+{% set pageTitle = "Notification banner" %}
+{% block pageTitle %}{{ "Error: " if errors }}{{ pageTitle }} - GOV.UK{% endblock %}
+
+{% block header %}
+  {% include "../../partials/banner.njk" %}
+  {{ govukHeader({}) }}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+
+        {{ govukNotificationBanner({
+          text: "Invite sent to example@email.com",
+          type: "success"
+        })}}
+
+        <h1 class="govuk-heading-xl">{{ pageTitle }}</h1>
+
+        <p class="govuk-body">These paragraphs make the page taller so that we can test the scrolling behaviour.</p>
+
+        <p class="govuk-body">These paragraphs make the page taller so that we can test the scrolling behaviour.</p>
+
+        <p class="govuk-body">These paragraphs make the page taller so that we can test the scrolling behaviour.</p>
+
+        <p class="govuk-body">These paragraphs make the page taller so that we can test the scrolling behaviour.</p>
+
+        <p class="govuk-body">These paragraphs make the page taller so that we can test the scrolling behaviour.</p>
+    </div>
+  </div>
+{% endblock %}
diff --git a/src/govuk/components/notification-banner/notification-banner.test.js b/src/govuk/components/notification-banner/notification-banner.test.js
new file mode 100644
index 0000000000..0998081d5a
--- /dev/null
+++ b/src/govuk/components/notification-banner/notification-banner.test.js
@@ -0,0 +1,79 @@
+/* eslint-env jest */
+
+const configPaths = require('../../../../config/paths.json')
+const PORT = configPaths.ports.test
+
+const baseUrl = 'http://localhost:' + PORT
+
+describe('/components/notification-banner', () => {
+  describe('/examples/notification-banner', () => {
+    describe('when JavaScript is available', () => {
+      it('focuses the notification banner', async () => {
+        await page.goto(`${baseUrl}/examples/notification-banner`, { waitUntil: 'load' })
+
+        const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
+
+        expect(activeElement).toBe('govuk-notification-banner')
+      })
+
+      it('scrolls the notification banner to the top of the screen', async () => {
+        // Wait until 'domcontentloaded' to have correct coordinates for element position
+        await page.goto(`${baseUrl}/examples/notification-banner`, { waitUntil: 'domcontentloaded' })
+
+        const positionFromTopOfViewport = await page.$eval('.govuk-notification-banner', (elem) => {
+          return elem.getBoundingClientRect().top
+        })
+
+        expect(positionFromTopOfViewport).toEqual(0)
+      })
+    })
+  })
+
+  describe('/examples/notification-banner-and-error-summary', () => {
+    describe('when there is an error summary on the page', () => {
+      it('the notification banner is not focused and the error summary is', async () => {
+        await page.goto(`${baseUrl}/examples/notification-banner-and-error-summary`, { waitUntil: 'load' })
+
+        const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
+
+        expect(activeElement).toBe('govuk-error-summary')
+      })
+    })
+  })
+
+  describe('/examples/notification-banner-multiple', () => {
+    describe('when there are multiple notification banners on the page', () => {
+      it('the first one on the page is focused', async () => {
+        await page.goto(`${baseUrl}/examples/notification-banner-multiple`, { waitUntil: 'load' })
+
+        const activeElementTextContent = await page.evaluate(() => document.activeElement.textContent)
+
+        expect(activeElementTextContent).toContain('Invite sent to example@email.com')
+      })
+    })
+  })
+
+  describe('components/notification-banner/auto-focus-as-is-set-to-false,-with-type-as-success', () => {
+    describe('when auto-focus is set to false', () => {
+      it('does not focus the notification banner', async () => {
+        await page.goto(`${baseUrl}/components/notification-banner/auto-focus-as-is-set-to-false,-with-type-as-success/preview`, { waitUntil: 'load' })
+
+        const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
+
+        expect(activeElement).not.toBe('govuk-notification-banner')
+      })
+    })
+  })
+
+  describe('components/notification-banner/data-auto-focus-is-set-without-role=alert/', () => {
+    describe('when role="alert" is not set', () => {
+      it('does not focus the notification banner', async () => {
+        await page.goto(`${baseUrl}/components/notification-banner/data-auto-focus-is-set-without-role=alert/preview`, { waitUntil: 'load' })
+
+        const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
+
+        expect(activeElement).not.toBe('govuk-notification-banner')
+      })
+    })
+  })
+})
diff --git a/src/govuk/components/notification-banner/notification-banner.yaml b/src/govuk/components/notification-banner/notification-banner.yaml
index 2403588177..f2dd03b86a 100644
--- a/src/govuk/components/notification-banner/notification-banner.yaml
+++ b/src/govuk/components/notification-banner/notification-banner.yaml
@@ -87,6 +87,16 @@ examples:
           <li><a href="#" class="govuk-notification-banner__link">government-strategy-v3-FINAL.pdf</a></li>
           <li><a href="#" class="govuk-notification-banner__link">government-strategy-v4-FINAL-v2.pdf</a></li>
       </ul>
+- name: auto-focus as is set to false, with type as success
+  data:
+    type: success
+    autoFocus: false
+    text: Email sent to example@email.com
+- name: data-auto-focus is set without role=alert
+  data:
+    type: success
+    role: banner
+    text: Email sent to example@email.com
 
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
 
@@ -164,12 +174,6 @@ examples:
   data:
     autoFocus: true
     text: This publication was withdrawn on 7 March 2014.
-- name: autoFocus as false and type as success
-  hidden: true
-  data:
-    type: success
-    autoFocus: false
-    text: Email sent to example@email.com
 
 - name: classes
   hidden: true
diff --git a/src/govuk/components/notification-banner/template.test.js b/src/govuk/components/notification-banner/template.test.js
index 787d9dddff..32bb1c6950 100644
--- a/src/govuk/components/notification-banner/template.test.js
+++ b/src/govuk/components/notification-banner/template.test.js
@@ -156,7 +156,7 @@ describe('Notification-banner', () => {
     })
 
     it('removes data-auto-focus attribute so component is not focused on page load', () => {
-      const $ = render('notification-banner', examples['autoFocus as false and type as success'])
+      const $ = render('notification-banner', examples['auto-focus as is set to false, with type as success'])
 
       const $component = $('.govuk-notification-banner')
       expect($component.attr('data-auto-focus')).toBeUndefined()