diff --git a/packages/components/panel/README.md b/packages/components/panel/README.md
new file mode 100644
index 000000000..d83592a9e
--- /dev/null
+++ b/packages/components/panel/README.md
@@ -0,0 +1,54 @@
+# Panel
+
+## Guidance
+
+Find out more about the panel component and when to use it in the [NHS digital service manual](https://service-manual.nhs.uk/design-system/components/panel).
+
+## Quick start example
+
+[Preview the panel component](https://nhsuk.github.io/nhsuk-frontend/components/panel/index.html)
+
+### HTML markup
+
+```html
+
+
+ Application complete
+
+
+ Your reference number HDJ2123F
+
+
+```
+
+### Nunjucks macro
+
+```
+{% from 'components/panel/macro.njk' import panel %}
+
+{{ panel({
+ titleText: "Application complete",
+ html: "Your reference number HDJ2123F"
+}) }}
+```
+
+### Nunjucks arguments
+
+The panel Nunjucks macro takes the following arguments:
+
+| Name | Type | Required | Description |
+| ---------------- | -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **titleText** | string | Yes | If `titleHtml` is set, this is not required. Text to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored. |
+| **titleHtml** | string | Yes | If `titleText` is set, this is not required. HTML to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored. |
+| **headingLevel** | integer | No | Heading level, from `1` to `6`. Default is `1`. |
+| **text** | string | No | If `html` is set, this is not required. Text to use within the panel content. If `html` is provided, the `text` option will be ignored. |
+| **html** | string | No | If `text` is set, this is not required. Text to use within the panel content. If `text` is provided, the `html` option will be ignored. |
+| **caller** | nunjucks-block | No | Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire panel component in a `call` block. |
+| **classes** | string | No | Optional additional classes to add to the hint div tag. Separate each class with a space. |
+| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the input component. |
+
+If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).
+
+## Thanks to the Government Digital Service (GDS)
+
+This component and documentation has been taken from [GOV.UK Frontend - Panel component](https://github.com/alphagov/govuk-frontend/tree/main/packages/govuk-frontend/src/govuk/components/panel) with a few minor adaptations.
diff --git a/packages/components/panel/_panel.scss b/packages/components/panel/_panel.scss
new file mode 100644
index 000000000..453ef0437
--- /dev/null
+++ b/packages/components/panel/_panel.scss
@@ -0,0 +1,58 @@
+// ==========================================================================
+// COMPONENTS / #PANEL
+// ==========================================================================
+
+/**
+ * Original code taken from GDS (Government Digital Service)
+ * https://github.com/alphagov/govuk-frontend
+ *
+ * 1. Adds a transparent border for high contrast modes
+ * 2. This subtracts the transparent border width from the padding (because the border
+ * visually adds to the total padding)
+ * 3. This is an if-all-else-fails attempt to stop long words from overflowing the container
+ on very narrow viewports by forcing them to break and wrap instead. This
+ overflowing is more likely to happen when user increases text size on a mobile eg. using
+ iOS Safari text resize controls.
+
+ The overflowing is a particular problem with the panel component since it uses white
+ text: when the text overflows the container, it is invisible on the white (page)
+ background. When the text in our other components overflow, the user might have to scroll
+ horizontally to view it but the the text remains legible.
+ * 4. Support IE (autoprefixer doesn't add this as it's not a prefix)
+ */
+
+$nhsuk-border-width-panel: nhsuk-spacing(1);
+
+.nhsuk-panel {
+ @include nhsuk-typography-responsive(24);
+ @include nhsuk-responsive-margin(4, "bottom");
+
+ background: $color_nhsuk-green;
+ border: $nhsuk-border-width-panel solid transparent; /* [1] */
+ box-sizing: border-box;
+ color: $color_nhsuk-white;
+ padding: nhsuk-spacing(5) - $nhsuk-border-width-panel; /* [2] */
+
+ @include mq($until: tablet) {
+ padding: nhsuk-spacing(4) - $nhsuk-border-width-panel; /* [2] */
+ overflow-wrap: break-word; /* [3] */
+ word-wrap: break-word; /* [4] */
+ }
+
+ @include mq($media-type: print) {
+ border-color: currentcolor;
+ color: $nhsuk-print-text-color;
+ background: none;
+ }
+}
+
+.nhsuk-panel__title {
+ @include nhsuk-typography-responsive(48);
+ @include nhsuk-responsive-margin(5, "bottom");
+
+ margin-top: 0;
+}
+
+.nhsuk-panel__title:last-child {
+ margin-bottom: 0;
+}
diff --git a/packages/components/panel/macro.njk b/packages/components/panel/macro.njk
new file mode 100644
index 000000000..ac07d8a64
--- /dev/null
+++ b/packages/components/panel/macro.njk
@@ -0,0 +1,3 @@
+{% macro panel(params) %}
+ {%- include './template.njk' -%}
+{% endmacro %}
diff --git a/packages/components/panel/template.njk b/packages/components/panel/template.njk
new file mode 100644
index 000000000..52a33f07c
--- /dev/null
+++ b/packages/components/panel/template.njk
@@ -0,0 +1,16 @@
+{% from "../../macros/attributes.njk" import nhsukAttributes %}
+
+{% set headingLevel = params.headingLevel if params.headingLevel else 1 -%}
+
+
+
+ {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
+
+ {% if caller or params.html or params.text %}
+
+ {{ caller() if caller else (params.html | safe | trim | indent(4) if params.html else params.text) }}
+
+ {% endif %}
+
diff --git a/packages/nhsuk.scss b/packages/nhsuk.scss
index d9f67d6d3..a4a7eb39a 100644
--- a/packages/nhsuk.scss
+++ b/packages/nhsuk.scss
@@ -27,6 +27,7 @@
@import "components/inset-text/inset-text";
@import "components/label/label";
@import "components/pagination/pagination";
+@import "components/panel/panel";
@import "components/checkboxes/checkboxes";
@import "components/radios/radios";
@import "components/select/select";
diff --git a/tests/backstop/backstop.js b/tests/backstop/backstop.js
index 420dd5c27..611cd556e 100644
--- a/tests/backstop/backstop.js
+++ b/tests/backstop/backstop.js
@@ -368,6 +368,10 @@ module.exports = {
label: 'Pagination',
url: `${TEST_URL}/pagination/index.html`,
},
+ {
+ label: 'Panel',
+ url: `${TEST_URL}/panel/index.html`,
+ },
{
label: 'Radios',
url: `${TEST_URL}/radios/index.html`,
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Panel_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Panel_0_document_0_iPhone_5_SE.png
new file mode 100644
index 000000000..7b76ca326
Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Panel_0_document_0_iPhone_5_SE.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Panel_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Panel_0_document_1_iPhone_6-8.png
new file mode 100644
index 000000000..0af96fa5d
Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Panel_0_document_1_iPhone_6-8.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Panel_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Panel_0_document_2_iPad.png
new file mode 100644
index 000000000..991060475
Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Panel_0_document_2_iPad.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Panel_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Panel_0_document_3_Surface_iPad_Pro.png
new file mode 100644
index 000000000..c7f8b9e4e
Binary files /dev/null and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Panel_0_document_3_Surface_iPad_Pro.png differ