diff --git a/app/templates/components/components/alert/README.md b/app/templates/components/components/alert/README.md
new file mode 100644
index 000000000..8e601db74
--- /dev/null
+++ b/app/templates/components/components/alert/README.md
@@ -0,0 +1,15 @@
+# Error message
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the error message component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/error-message).
+
+## Component options
+
+Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/error-message/#options-example-default) for details.
\ No newline at end of file
diff --git a/app/templates/components/components/alert/macro-options.json b/app/templates/components/components/alert/macro-options.json
new file mode 100644
index 000000000..eddcab0d2
--- /dev/null
+++ b/app/templates/components/components/alert/macro-options.json
@@ -0,0 +1,37 @@
+[
+    {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "If `html` is set, this is not required. Text to use within the error message. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "html",
+        "type": "string",
+        "required": true,
+        "description": "If `text` is set, this is not required. HTML to use within the error message. If `html` is provided, the `text` argument will be ignored."
+    },
+    {
+        "name": "id",
+        "type": "string",
+        "required": false,
+        "description": "Id attribute to add to the error message span tag."
+    },
+    {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the error message span tag."
+    },
+    {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the error message span tag"
+    },
+    {
+        "name": "visuallyHiddenText",
+        "type": "string",
+        "description": "A visually hidden prefix used before the error message. Defaults to \"Error\"."
+    }
+]
\ No newline at end of file
diff --git a/app/templates/components/components/alert/macro.njk b/app/templates/components/components/alert/macro.njk
new file mode 100644
index 000000000..65a977566
--- /dev/null
+++ b/app/templates/components/components/alert/macro.njk
@@ -0,0 +1,3 @@
+{% macro usaAlert(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/app/templates/components/components/alert/template.njk b/app/templates/components/components/alert/template.njk
new file mode 100644
index 000000000..ba9d9b415
--- /dev/null
+++ b/app/templates/components/components/alert/template.njk
@@ -0,0 +1,17 @@
+{% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
+
+<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {% if visuallyHiddenText %}<span class="usa-sr-only">{{ visuallyHiddenText }}:</span> {% endif -%}
+  {{ params.html | safe if params.html else params.text }}
+</span>
+
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-alert {%- if params.classes %} {{ params.classes }}{% endif %}">
+  <div class="usa-alert__body">
+    <h4 class="usa-alert__heading">Informative status</h4>
+    <p class="usa-alert__text">
+      Lorem ipsum dolor sit amet,
+      <a class="usa-link" href="javascript:void(0);">consectetur adipiscing</a>
+      elit, sed do eiusmod.
+    </p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/templates/components/components/checkboxes/template.njk b/app/templates/components/components/checkboxes/template.njk
index 2eeb21fe7..1ebda15c0 100644
--- a/app/templates/components/components/checkboxes/template.njk
+++ b/app/templates/components/components/checkboxes/template.njk
@@ -1,7 +1,7 @@
-{% from "../error-message/macro.njk" import govukErrorMessage -%}
-{% from "../fieldset/macro.njk" import govukFieldset %}
-{% from "../hint/macro.njk" import govukHint %}
-{% from "../label/macro.njk" import govukLabel %}
+{% from "../error-message/macro.njk" import usaErrorMessage -%}
+{% from "../fieldset/macro.njk" import usaFieldset %}
+{% from "../hint/macro.njk" import usaHint %}
+{% from "../label/macro.njk" import usaLabel %}
 
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
    instead. We need this for error messages and hints as well -#}
@@ -29,7 +29,7 @@
 {% if params.hint %}
   {% set hintId = idPrefix + '-hint' %}
   {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
-  {{ govukHint({
+  {{ usaHint({
     id: hintId,
     classes: params.hint.classes,
     attributes: params.hint.attributes,
@@ -40,7 +40,7 @@
 {% if params.errorMessage %}
   {% set errorId = idPrefix + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
-  {{ govukErrorMessage({
+  {{ usaErrorMessage({
     id: errorId,
     classes: params.errorMessage.classes,
     attributes: params.errorMessage.attributes,
@@ -67,7 +67,7 @@
       {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
       {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
       {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-      {{ govukLabel({
+      {{ usaLabel({
         html: item.html,
         text: item.text,
         classes: 'govuk-checkboxes__label' + (' ' + item.label.classes if item.label.classes),
@@ -75,7 +75,7 @@
         for: id
       }) | indent(6) | trim }}
       {%- if hasHint %}
-      {{ govukHint({
+      {{ usaHint({
         id: itemHintId,
         classes: 'govuk-checkboxes__hint',
         attributes: item.hint.attributes,
@@ -95,7 +95,7 @@
 
 <div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
 {% if params.fieldset %}
-  {% call govukFieldset({
+  {% call usaFieldset({
     describedBy: describedBy,
     classes: params.fieldset.classes,
     attributes: params.fieldset.attributes,
diff --git a/app/templates/components/components/details/template.njk b/app/templates/components/components/details/template.njk
index 2042a1d9d..2ec92f9be 100644
--- a/app/templates/components/components/details/template.njk
+++ b/app/templates/components/components/details/template.njk
@@ -1,4 +1,4 @@
-<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details margin-bottom-1 {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
+<details {%- if params.id %} id="{{params.id}}"{% endif %} class="usa-details margin-bottom-1 {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
   <summary class="usa-details__summary">
     <span class="usa-details__summary-text">
       {{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }}
diff --git a/app/templates/components/components/hint/macro.njk b/app/templates/components/components/hint/macro.njk
index e0a639d75..176814888 100644
--- a/app/templates/components/components/hint/macro.njk
+++ b/app/templates/components/components/hint/macro.njk
@@ -1,3 +1,3 @@
-{% macro govukHint(params) %}
+{% macro usaHint(params) %}
   {%- include "./template.njk" -%}
 {% endmacro %}
diff --git a/app/templates/components/components/input/template.njk b/app/templates/components/components/input/template.njk
index b4d8ce555..7f5634651 100644
--- a/app/templates/components/components/input/template.njk
+++ b/app/templates/components/components/input/template.njk
@@ -1,12 +1,12 @@
-{% from "../error-message/macro.njk" import govukErrorMessage -%}
-{% from "../hint/macro.njk" import govukHint %}
-{% from "../label/macro.njk" import govukLabel %}
+{% from "../error-message/macro.njk" import usaErrorMessage -%}
+{% from "../hint/macro.njk" import usaHint %}
+{% from "../label/macro.njk" import usaLabel %}
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
 <div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-  {{ govukLabel({
+  {{ usaLabel({
     html: params.label.html,
     text: params.label.text,
     classes: params.label.classes,
@@ -17,7 +17,7 @@
 {% if params.hint %}
   {% set hintId = params.id + '-hint' %}
   {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
-  {{ govukHint({
+  {{ usaHint({
     id: hintId,
     classes: params.hint.classes,
     attributes: params.hint.attributes,
@@ -28,7 +28,7 @@
 {% if params.errorMessage %}
   {% set errorId = params.id + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
-  {{ govukErrorMessage({
+  {{ usaErrorMessage({
     id: errorId,
     classes: params.errorMessage.classes,
     attributes: params.errorMessage.attributes,
diff --git a/app/templates/components/components/label/macro.njk b/app/templates/components/components/label/macro.njk
index 91f2ed71a..9bac46d8d 100644
--- a/app/templates/components/components/label/macro.njk
+++ b/app/templates/components/components/label/macro.njk
@@ -1,3 +1,3 @@
-{% macro govukLabel(params) %}
+{% macro usaLabel(params) %}
   {%- include "./template.njk" -%}
 {% endmacro %}
diff --git a/app/templates/components/components/radios/template.njk b/app/templates/components/components/radios/template.njk
index 0ee1a77c2..730581040 100644
--- a/app/templates/components/components/radios/template.njk
+++ b/app/templates/components/components/radios/template.njk
@@ -1,7 +1,7 @@
-{% from "../error-message/macro.njk" import govukErrorMessage -%}
+{% from "../error-message/macro.njk" import usaErrorMessage -%}
 {% from "../fieldset/macro.njk" import govukFieldset %}
-{% from "../hint/macro.njk" import govukHint %}
-{% from "../label/macro.njk" import govukLabel %}
+{% from "../hint/macro.njk" import usaHint %}
+{% from "../label/macro.njk" import usaLabel %}
 
 {#- If an id 'prefix' is not passed, fall back to using the name attribute
    instead. We need this for error messages and hints as well -#}
@@ -23,7 +23,7 @@
 {% if params.hint %}
   {% set hintId = idPrefix + '-hint' %}
   {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
-  {{ govukHint({
+  {{ usaHint({
     id: hintId,
     classes: params.hint.classes,
     attributes: params.hint.attributes,
@@ -34,7 +34,7 @@
 {% if params.errorMessage %}
   {% set errorId = idPrefix + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
-  {{ govukErrorMessage({
+  {{ usaErrorMessage({
     id: errorId,
     classes: params.errorMessage.classes,
     attributes: params.errorMessage.attributes,
@@ -61,7 +61,7 @@
       {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
       {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
       {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-      {{ govukLabel({
+      {{ usaLabel({
         html: item.html,
         text: item.text,
         classes: 'govuk-radios__label' + (' ' + item.label.classes if item.label.classes),
@@ -69,7 +69,7 @@
         for: id
       }) | indent(6) | trim }}
       {%- if hasHint %}
-      {{ govukHint({
+      {{ usaHint({
         id: itemHintId,
         classes: 'govuk-radios__hint',
         attributes: item.hint.attributes,
diff --git a/app/templates/components/components/skip-link/macro.njk b/app/templates/components/components/skip-link/macro.njk
index b5afb0c4e..4b1d7ff9a 100644
--- a/app/templates/components/components/skip-link/macro.njk
+++ b/app/templates/components/components/skip-link/macro.njk
@@ -1,3 +1,3 @@
-{% macro govukSkipLink(params) %}
+{% macro usaSkipLink(params) %}
   {%- include "./template.njk" -%}
 {% endmacro %}
diff --git a/app/templates/components/components/textarea/macro.njk b/app/templates/components/components/textarea/macro.njk
index 36a1c4ee7..03e30d11c 100644
--- a/app/templates/components/components/textarea/macro.njk
+++ b/app/templates/components/components/textarea/macro.njk
@@ -1,3 +1,3 @@
-{% macro govukTextarea(params) %}
+{% macro usaTextarea(params) %}
   {%- include "./template.njk" -%}
 {% endmacro %}
diff --git a/app/templates/components/components/textarea/template.njk b/app/templates/components/components/textarea/template.njk
index 49c5642ba..82c3ac751 100644
--- a/app/templates/components/components/textarea/template.njk
+++ b/app/templates/components/components/textarea/template.njk
@@ -1,12 +1,12 @@
-{% from "../error-message/macro.njk" import govukErrorMessage -%}
-{% from "../hint/macro.njk" import govukHint %}
-{% from "../label/macro.njk" import govukLabel %}
+{% from "../error-message/macro.njk" import usaErrorMessage -%}
+{% from "../hint/macro.njk" import usaHint %}
+{% from "../label/macro.njk" import usaLabel %}
 
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
 <div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-  {{ govukLabel({
+  {{ usaLabel({
     html: params.label.html,
     text: params.label.text,
     classes: params.label.classes,
@@ -17,7 +17,7 @@
 {% if params.hint %}
   {% set hintId = params.id + '-hint' %}
   {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
-  {{ govukHint({
+  {{ usaHint({
     id: hintId,
     classes: params.hint.classes,
     attributes: params.hint.attributes,
@@ -28,7 +28,7 @@
 {% if params.errorMessage %}
   {% set errorId = params.id + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
-  {{ govukErrorMessage({
+  {{ usaErrorMessage({
     id: errorId,
     classes: params.errorMessage.classes,
     attributes: params.errorMessage.attributes,
@@ -37,7 +37,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <textarea class="govuk-textarea {{- ' govuk-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
+  <textarea class="usa-textarea {{- ' usa-textarea--error' if params.errorMessage }} {{- ' ' + params.classes if params.classes}}" id="{{ params.id }}" name="{{ params.name }}" rows="{%if params.rows %} {{- params.rows -}} {% else %}5{%endif %}"
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.value }}</textarea>
diff --git a/app/templates/components/list-entry.html b/app/templates/components/list-entry.html
index ac777484d..4df8df230 100644
--- a/app/templates/components/list-entry.html
+++ b/app/templates/components/list-entry.html
@@ -1,5 +1,5 @@
 {% from "components/components/fieldset/macro.njk" import govukFieldset %}
-{% from "components/components/error-message/macro.njk" import govukErrorMessage %}
+{% from "components/components/error-message/macro.njk" import usaErrorMessage %}
 
 {% macro list_entry(
   field,
diff --git a/app/templates/forms/fields/checkboxes/template.njk b/app/templates/forms/fields/checkboxes/template.njk
index 3d8717acb..4e961fc2f 100644
--- a/app/templates/forms/fields/checkboxes/template.njk
+++ b/app/templates/forms/fields/checkboxes/template.njk
@@ -1,6 +1,6 @@
-{% from "components/components/error-message/macro.njk" import govukErrorMessage -%}
+{% from "components/components/error-message/macro.njk" import usaErrorMessage -%}
 {% from "components/components/fieldset/macro.njk" import govukFieldset %}
-{% from "components/components/hint/macro.njk" import govukHint %}
+{% from "components/components/hint/macro.njk" import usaHint %}
 {% from "components/components/radio-label/macro.njk" import usaRadioLabel %}
 
 
@@ -53,7 +53,7 @@
 {% if params.hint %}
   {% set hintId = idPrefix + '-hint' %}
   {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
-  {{ govukHint({
+  {{ usaHint({
     id: hintId,
     classes: params.hint.classes,
     attributes: params.hint.attributes,
@@ -64,7 +64,7 @@
 {% if params.errorMessage %}
   {% set errorId = idPrefix + '-error' %}
   {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
-  {{ govukErrorMessage({
+  {{ usaErrorMessage({
     id: errorId,
     classes: params.errorMessage.classes,
     attributes: params.errorMessage.attributes,
@@ -100,7 +100,7 @@
         for: id
       }) | indent(6) | trim }}
       {%- if hasHint %}
-      {{ govukHint({
+      {{ usaHint({
         id: itemHintId,
         classes: 'govuk-checkboxes__hint' + (' ' + item.hint.classes if item.hint.classes),
         attributes: item.hint.attributes,
diff --git a/app/templates/main_template.html b/app/templates/main_template.html
index 02c9b3904..9c12ecc82 100644
--- a/app/templates/main_template.html
+++ b/app/templates/main_template.html
@@ -1,4 +1,4 @@
-{% from "./components/components/skip-link/macro.njk" import govukSkipLink -%}
+{% from "./components/components/skip-link/macro.njk" import usaSkipLink -%}
 {% from "./components/components/header/macro.njk" import govukHeader -%}
 {% from "./components/components/footer/macro.njk" import govukFooter -%}
 {# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
@@ -36,7 +36,7 @@
     {% block bodyStart %}{% endblock %}
 
     {% block skipLink %}
-      {{ govukSkipLink({
+      {{ usaSkipLink({
         "href": '#main-content',
         "text": 'Skip to main content'
       }) }}
diff --git a/app/templates/views/check/ok.html b/app/templates/views/check/ok.html
index 8bbcc3e12..e5c5a1f38 100644
--- a/app/templates/views/check/ok.html
+++ b/app/templates/views/check/ok.html
@@ -3,7 +3,7 @@
 {% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/components/button/macro.njk" import usaButton %}
-{% from "components/components/skip-link/macro.njk" import govukSkipLink %}
+{% from "components/components/skip-link/macro.njk" import usaSkipLink %}
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
 
 {% set file_contents_header_id = 'file-preview' %}
@@ -21,7 +21,7 @@
 
   {{ page_header('Preview of {}'.format(template.name)) }}
 
-  {{ govukSkipLink({
+  {{ usaSkipLink({
     "text": "Skip to file contents",
     "href": "#" + file_contents_header_id
   }) }}
diff --git a/app/templates/views/two-factor-webauthn.html b/app/templates/views/two-factor-webauthn.html
index fb486518c..ef905841a 100644
--- a/app/templates/views/two-factor-webauthn.html
+++ b/app/templates/views/two-factor-webauthn.html
@@ -3,7 +3,7 @@
 {% from "components/components/button/macro.njk" import usaButton %}
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
 {% from "components/webauthn-api-check.html" import webauthn_api_check %}
-{% from "components/components/error-message/macro.njk" import govukErrorMessage %}
+{% from "components/components/error-message/macro.njk" import usaErrorMessage %}
 
 {% set page_title = 'Get your security key' %}
 
@@ -21,7 +21,7 @@
 
 {% block maincolumn_content %}
 
-    {{ govukErrorMessage({
+    {{ usaErrorMessage({
       "classes": "banner-dangerous govuk-!-display-none",
       "html": (
         'There’s a problem with your security key' +
@@ -54,12 +54,12 @@
         }
       }) }}
 
-      {{ govukErrorMessage({
+      {{ usaErrorMessage({
         "classes": "webauthn__api-missing",
         "text": "Your browser does not support security keys. Try signing in to Notify using a different browser."
       }) }}
 
-      {{ govukErrorMessage({
+      {{ usaErrorMessage({
         "classes": "webauthn__no-js",
         "text": "JavaScript is not available for this page. Security keys need JavaScript to work."
       }) }}
diff --git a/app/templates/views/user-profile/security-keys.html b/app/templates/views/user-profile/security-keys.html
index 4ee6f0044..adf9dfef5 100644
--- a/app/templates/views/user-profile/security-keys.html
+++ b/app/templates/views/user-profile/security-keys.html
@@ -4,7 +4,7 @@
 {% from "components/components/back-link/macro.njk" import usaBackLink %}
 {% from "components/table.html" import edit_field, mapping_table, row, field, row_heading %}
 {% from "components/webauthn-api-check.html" import webauthn_api_check %}
-{% from "components/components/error-message/macro.njk" import govukErrorMessage %}
+{% from "components/components/error-message/macro.njk" import usaErrorMessage %}
 
 {% set page_title = 'Security keys' %}
 {% set credentials = current_user.webauthn_credentials %}
@@ -34,12 +34,12 @@
     }
   }) }}
 
-  {{ govukErrorMessage({
+  {{ usaErrorMessage({
     "classes": "webauthn__api-missing",
     "text": "Your browser does not support security keys. Try signing in to Notify using a different browser."
   }) }}
 
-  {{ govukErrorMessage({
+  {{ usaErrorMessage({
     "classes": "webauthn__no-js",
     "text": "JavaScript is not available for this page. Security keys need JavaScript to work."
   }) }}
@@ -47,7 +47,7 @@
 
   <div class="govuk-grid-row">
 
-    {{ govukErrorMessage({
+    {{ usaErrorMessage({
       "classes": "banner-dangerous govuk-!-display-none",
       "html": (
         'There’s a problem with your security key' +