diff --git a/docs/components/care-card-emergency.njk b/docs/components/care-card-immediate.njk
similarity index 91%
rename from docs/components/care-card-emergency.njk
rename to docs/components/care-card-immediate.njk
index 19936b58b..5dcee03b9 100644
--- a/docs/components/care-card-emergency.njk
+++ b/docs/components/care-card-immediate.njk
@@ -1,5 +1,5 @@
 {% set html_style = 'background-color: #f0f4f5;' %}
-{% set title = 'Care card emergency (red and black)' %}
+{% set title = 'Care card immediate (red and black)' %}
 {% from 'components/care-card/macro.njk' import careCard %}
 {% extends 'layout.njk' %}
 
@@ -11,7 +11,7 @@
     <div class="nhsuk-grid-row">
       <div class="nhsuk-grid-column-two-thirds">
         {{ careCard({
-          "type": "emergency",
+          "type": "immediate",
           "heading": "Call 999 if you have sudden chest pain that:",
           "HTML": "
           <ul>
diff --git a/docs/components/care-card-non-urgent.njk b/docs/components/care-card-non-urgent.njk
index b84477817..6e6a4abb9 100644
--- a/docs/components/care-card-non-urgent.njk
+++ b/docs/components/care-card-non-urgent.njk
@@ -11,7 +11,7 @@
     <div class="nhsuk-grid-row">
       <div class="nhsuk-grid-column-two-thirds">
         {{ careCard({
-          "type": "primary",
+          "type": "non-urgent",
           "heading": "Speak to a GP if:",
           "HTML": "
           <ul>
diff --git a/docs/pages/examples.njk b/docs/pages/examples.njk
index f3456e8d5..976045649 100644
--- a/docs/pages/examples.njk
+++ b/docs/pages/examples.njk
@@ -28,7 +28,7 @@
     <li><a href="../components/breadcrumb.html">Breadcrumb</a></li>
     <li><a href="../components/care-card-non-urgent.html">Care card non-urgent (blue)</a></li>
     <li><a href="../components/care-card-urgent.html">Care card urgent (red)</a></li>
-    <li><a href="../components/care-card-emergency.html">Care card emergency (red and black)</a></li>
+    <li><a href="../components/care-card-immediate.html">Care card immediate (red and black)</a></li>
     <li><a href="../components/contents-list.html">Contents list</a></li>
     <li><a href="../components/details.html">Details</a></li>
     <li><a href="../components/do-dont-list.html">Do and Don't list</a></li>
diff --git a/packages/components/care-card/README.md b/packages/components/care-card/README.md
index cdef51b16..2f6f19414 100644
--- a/packages/components/care-card/README.md
+++ b/packages/components/care-card/README.md
@@ -15,7 +15,7 @@ To discuss or contribute to this component, visit the [GitHub issue for this com
 ```html
 <div class="nhsuk-care-card">
   <div class="nhsuk-care-card__heading-container">
-    <h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Non-urgent care: </span>Speak to a GP if:</h3>
+    <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Non-urgent advice: </span>Speak to a GP if:</span></h3>
   </div>
   <div class="nhsuk-care-card__content">
     <ul>
@@ -37,7 +37,7 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
 {% from 'components/care-card/macro.njk' import careCard %}
 
 {{ careCard({
-  "type": "primary",
+  "type": "non-urgent",
   "heading": "Speak to a GP if:",
   "HTML": "
   <ul>
@@ -53,15 +53,16 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
 
 #### Nunjucks arguments
 
-If you are using Nunjucks, then macros take the following arguments: 
+The non-urgent care card Nunjucks macro takes the following arguments:
 
-| Name                | Type     | Required  | Description  |
-| --------------------|----------|-----------|--------------|
-| type                | string   | Yes       | Care card component variant types: "primary", "emergency", "urgent" |
-| heading             | string   | Yes       | Heading to be used within the care card component |
-| HTML                | string   | Yes       | Content to be used within the care card component |
-| classes             | string   | No        | Optional additional classes to add to the anchor tag. Separate each class with a space. |
-| attributes          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the care card. |
+| Name                    | Type     | Required  | Description  |
+| ------------------------|----------|-----------|--------------|
+| **type**                | string   | Yes       | Care card component variant type - "non-urgent" |
+| **heading**             | string   | Yes       | Heading to be used within the care card component |
+| **HTML**                | string   | Yes       | Content to be used within the care card component |
+| **headingLevel**        | integer  | No        | Optional heading level for the  heading. Default: 3 |
+| **classes**             | string   | No        | Optional additional classes to add to the care card. Separate each class with a space. |
+| **attributes**          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the care card. |
 
 ### Care card urgent (red)
 
@@ -72,7 +73,7 @@ If you are using Nunjucks, then macros take the following arguments:
 ```html
 <div class="nhsuk-care-card nhsuk-care-card--urgent">
   <div class="nhsuk-care-card__heading-container">
-    <h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Urgent care low: </span>Ask for an urgent GP appointment if:</h3>
+    <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Urgent advice: </span>Ask for an urgent GP appointment if:</span></h3>
   </div>
   <div class="nhsuk-care-card__content">
     <ul>
@@ -109,26 +110,28 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
 
 #### Nunjucks arguments
 
-If you are using Nunjucks, then macros take the following arguments: 
+The urgent care card Nunjucks macro takes the following arguments:
 
-| Name                | Type     | Required  | Description  |
-| --------------------|----------|-----------|--------------|
-| type                | string   | Yes       | Care card component variant types: "primary", "emergency", "urgent" |
-| heading             | string   | Yes       | Heading to be used within the care card component |
-| HTML                | string   | Yes       | Content to be used within the care card component |
-| classes             | string   | No        | Optional additional classes to add to the anchor tag. Separate each class with a space. |
-| attributes          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the care card. |
+| Name                    | Type     | Required  | Description  |
+| ------------------------|----------|-----------|--------------|
+| **type**                | string   | Yes       | Care card component variant type - "urgent" |
+| **heading**             | string   | Yes       | Heading to be used within the care card component |
+| **HTML**                | string   | Yes       | Content to be used within the care card component |
+| **headingLevel**        | integer  | No        | Optional heading level for the  heading. Default: 3 |
+| **classes**             | string   | No        | Optional additional classes to add to the care card. Separate each class with a space. |
+| **attributes**          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the care card. |
 
-### Care card emergency (red and black)
 
-[Preview care card emergency (red and black) component](https://nhsuk.github.io/nhsuk-frontend/components/care-card-urgent.html)
+### Care card immediate (red and black)
+
+[Preview care card immediate (red and black) component](https://nhsuk.github.io/nhsuk-frontend/components/care-card-immediate.html)
 
 ### HTML markup
 
 ```html
-<div class="nhsuk-care-card nhsuk-care-card--emergency">
+<div class="nhsuk-care-card nhsuk-care-card--immediate">
   <div class="nhsuk-care-card__heading-container">
-    <h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Urgent care high: </span>Call 999 if you have sudden chest pain that:</h3>
+    <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Immediate action required: </span>Call 999 if you have sudden chest pain that:</span></h3>
   </div>
   <div class="nhsuk-care-card__content">
     <ul>
@@ -149,7 +152,7 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
 {% from 'components/care-card/macro.njk' import careCard %}
 
 {{ careCard({
-  "type": "emergency",
+  "type": "immediate",
   "heading": "Call 999 if you have sudden chest pain that:",
   "HTML": "
   <ul>
@@ -163,12 +166,13 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
 ```
 #### Nunjucks arguments
 
-If you are using Nunjucks, then macros take the following arguments: 
+The immediate care card Nunjucks macro takes the following arguments:
 
-| Name                | Type     | Required  | Description  |
-| --------------------|----------|-----------|--------------|
-| type                | string   | Yes       | Care card component variant types: "primary", "emergency", "urgent" |
-| heading             | string   | Yes       | Heading to be used within the care card component |
-| HTML                | string   | Yes       | Content to be used within the care card component |
-| classes             | string   | No        | Optional additional classes to add to the anchor tag. Separate each class with a space. |
-| attributes          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the care card. |
+| Name                    | Type     | Required  | Description  |
+| ------------------------|----------|-----------|--------------|
+| **type**                | string   | Yes       | Care card component variant type - "immediate" |
+| **heading**             | string   | Yes       | Heading to be used within the care card component |
+| **HTML**                | string   | Yes       | Content to be used within the care card component |
+| **headingLevel**        | integer  | No        | Optional heading level for the  heading. Default: 3 |
+| **classes**             | string   | No        | Optional additional classes to add to the care card. Separate each class with a space. |
+| **attributes**          | object   | No        | Any extra HTML attributes (for example data attributes) to add to the care card. |
diff --git a/packages/components/care-card/_care-card.scss b/packages/components/care-card/_care-card.scss
index 738ec54fa..da5a53127 100644
--- a/packages/components/care-card/_care-card.scss
+++ b/packages/components/care-card/_care-card.scss
@@ -78,7 +78,7 @@
   @include care-card($color_nhsuk-red, $color_nhsuk-white, 6px);
 }
 
-.nhsuk-care-card--emergency {
+.nhsuk-care-card--immediate {
   @include care-card($color_nhsuk-red, $color_nhsuk-white, 8px);
 
   .nhsuk-care-card__content {
diff --git a/packages/components/care-card/template.html b/packages/components/care-card/template.html
index 35e5aaf73..5341477b4 100644
--- a/packages/components/care-card/template.html
+++ b/packages/components/care-card/template.html
@@ -1,24 +1,24 @@
 <div class="nhsuk-care-card">
   <div class="nhsuk-care-card__heading-container">
-    <h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Non-urgent care: </span>Speak to a GP if:</h3>
+    <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Non-urgent advice: </span>Speak to a GP if:</span></h3>
   </div>
   <div class="nhsuk-care-card__content">
     <p>Test content with <a href="#">link</a>.</p>
   </div>
 </div>
 
-<div class="nhsuk-care-card nhsuk-care-card--emergency">
+<div class="nhsuk-care-card nhsuk-care-card--urgent">
   <div class="nhsuk-care-card__heading-container">
-    <h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Urgent care low: </span>Ask for an urgent GP appointment if:</h3>
+    <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Urgent advice: </span>Ask for an urgent GP appointment if:</span></h3>
   </div>
   <div class="nhsuk-care-card__content">
     <p>Test content with <a href="#">link</a>.</p>
   </div>
 </div>
 
-<div class="nhsuk-care-card nhsuk-care-card--urgent">
+<div class="nhsuk-care-card nhsuk-care-card--immediate">
   <div class="nhsuk-care-card__heading-container">
-    <h3 class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">Urgent care high: </span>Call 999 if you have sudden chest pain that:</h3>
+    <h3 class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">Immediate action required: </span>Call 999 if you have sudden chest pain that:</span></h3>
   </div>
   <div class="nhsuk-care-card__content">
     <p>Test content with <a href="#">link</a>.</p>
diff --git a/packages/components/care-card/template.njk b/packages/components/care-card/template.njk
index be3e8f443..8512ef303 100644
--- a/packages/components/care-card/template.njk
+++ b/packages/components/care-card/template.njk
@@ -1,7 +1,7 @@
 {% set headingLevel = params.headingLevel if params.headingLevel else 3 %}
-<div class="nhsuk-care-card {% if params.type %}nhsuk-care-card--{{ params.type }}{% endif %}" {% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<div class="nhsuk-care-card {% if params.type %}nhsuk-care-card--{{ params.type }}{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" {% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="nhsuk-care-card__heading-container">
-    <h{{ headingLevel }} class="nhsuk-care-card__heading"><span class="nhsuk-u-visually-hidden">{% if type == 'grey' %}Non-urgent advice: {% elseif type == 'red' %}Urgent care low: {% elseif type == 'black' %}Urgent care high: {% else %}Non-urgent advice: {% endif %}</span>{{ params.heading }}</h{{ headingLevel }}>
+    <h{{ headingLevel }} class="nhsuk-care-card__heading"><span role="text"><span class="nhsuk-u-visually-hidden">{% if params.type === 'non-urgent' %}Non-urgent advice: {% elseif params.type === 'urgent' %}Urgent advice: {% elseif params.type === 'immediate' %}Immediate action required: {% else %}Non-urgent advice: {% endif %}</span>{{ params.heading }}</span></h{{ headingLevel }}>
   </div>
   <div class="nhsuk-care-card__content">
   {{ params.HTML | safe }}
diff --git a/packages/core/tools/_mixins.scss b/packages/core/tools/_mixins.scss
index df44e5b04..f87c15ee7 100644
--- a/packages/core/tools/_mixins.scss
+++ b/packages/core/tools/_mixins.scss
@@ -46,6 +46,7 @@
   padding: 0;
   position: absolute;
   width: 1px;
+  white-space: nowrap;
 }
 
 //