From e4c3ff25dfbdeae4ac3dc072ea86efd81ec57a12 Mon Sep 17 00:00:00 2001
From: Cameron Lamb <cameron.lamb@digital.trade.gov.uk>
Date: Tue, 8 Oct 2024 12:14:19 +0100
Subject: [PATCH 1/4] Component refactor (#765)

---
 assets/stylesheets/components/_home_new.scss  |   5 +-
 .../components/_streamfield-content.scss      |  40 ++-
 .../templates/content/navigation_page.html    |  10 +-
 src/core/templates/dwds_content.html          |  12 +-
 .../dwds/components/__init__.py               |   3 +-
 .../dwds/components/banner.html               |  11 +
 .../dwds/components/banner_card.html          |  30 ---
 .../dwds/components/banner_card.scss          |  13 -
 src/dw_design_system/dwds/components/box.html |   1 +
 src/dw_design_system/dwds/components/box.scss |   3 +
 .../dwds/components/card_group.html           |  44 ----
 .../dwds/components/card_group.scss           |  38 ---
 .../dwds/components/comment_section.html      |   8 +
 .../dwds/components/comment_section.scss      |   5 +
 .../dwds/components/content_list.html         |  23 ++
 .../dwds/components/content_list.scss         |  32 +++
 src/dw_design_system/dwds/components/cta.html |   6 +
 .../dwds/components/cta_card.html             |  18 +-
 .../dwds/components/cta_card.py               |  33 +++
 .../dwds/components/engagement.html           |  45 ++++
 .../dwds/components/engagement_card.html      |  60 -----
 .../dwds/components/engagement_card.scss      |   3 -
 .../dwds/components/link_action.html          |  10 +
 .../dwds/components/link_action.scss          |  26 ++
 .../dwds/components/link_list.html            |  42 ++-
 .../dwds/components/link_navigate.html        |  13 +-
 .../dwds/components/link_navigate.scss        |   8 +-
 .../dwds/components/navigation_card.html      |  17 --
 .../dwds/components/navigation_card.py        |  35 ---
 .../dwds/components/navigation_card.scss      |   1 -
 .../dwds/components/one_up.html               |  43 ++++
 .../dwds/components/one_up.scss               |  17 ++
 .../dwds/components/one_up_card.html          |  60 -----
 .../dwds/components/one_up_card.scss          |   7 -
 .../dwds/components/promo.html                |  64 ++---
 .../dwds/components/promo.scss                |  35 +--
 .../dwds/elements/content_header.html         |   5 +
 .../dwds/elements/content_header.scss         |  18 ++
 .../dwds/elements/content_image.html          |  11 +
 .../dwds/elements/content_image.scss          |   7 +
 .../dwds/elements/content_item.html           |   5 +
 .../dwds/elements/content_item.scss           |   4 +
 .../dwds/elements/content_main.html           |  17 ++
 .../dwds/elements/content_main.scss           |  86 +++++++
 .../dwds/elements/extendable/card.html        |  46 ----
 .../dwds/elements/extendable/card.scss        | 181 -------------
 .../dwds/elements/information_panel.scss      |  23 --
 src/dw_design_system/dwds/elements/ribbon.js  |  13 +
 .../dwds/elements/ribbon.scss                 |  20 +-
 .../dwds/layouts/content_custom_sidebar.html  |  12 +
 .../dwds/layouts/content_custom_sidebar.scss  |  49 ++++
 .../dwds/layouts/content_grid.html            |   3 +
 .../dwds/layouts/content_grid.scss            |  59 +++++
 .../dwds/layouts/content_item_card.html       |   1 +
 .../dwds/layouts/content_item_card.scss       |  17 ++
 .../dwds/layouts/content_sidebar.html         |   3 +
 .../dwds/layouts/content_sidebar.scss         |  35 +++
 .../dwds/layouts/content_stack.html           |   3 +
 .../dwds/layouts/content_stack.scss           |  19 ++
 .../dwds/layouts/content_switcher.html        |   3 +
 .../dwds/layouts/content_switcher.scss        |  20 ++
 .../dwds/styles/layout-primitives.scss        |  52 ----
 src/dw_design_system/dwds/styles/layout.scss  |  47 +---
 .../dwds/styles/temporary-base.scss           |  21 +-
 .../dwds/styles/variables.scss                |   2 -
 src/dw_design_system/dwds/stylesheet.scss     |  27 +-
 src/dw_design_system/dwds/utils.scss          |  31 +++
 .../{components.html => dwds_components.html} |   8 +-
 .../templates/dw_design_system/layouts.html   |  20 ++
 .../dw_design_system/partials/component.html  |   2 +-
 .../templatetags/dw_design_system.py          |   1 -
 src/dw_design_system/urls.py                  |  30 ++-
 src/dw_design_system/utils.py                 | 241 ++++++++++--------
 src/dw_design_system/views.py                 |  97 +++++--
 src/events/templates/events/event_page.html   | 142 ++++++-----
 .../events/includes/listing_header.html       |  37 +++
 src/home/templates/home/home_page.html        |  65 +++--
 src/home/templatetags/cards.py                |  61 ++++-
 .../templates/interactions/bookmark_card.html |  33 +--
 src/news/templates/news/news_page.html        |  10 +-
 80 files changed, 1310 insertions(+), 1098 deletions(-)
 create mode 100644 src/dw_design_system/dwds/components/banner.html
 delete mode 100644 src/dw_design_system/dwds/components/banner_card.html
 delete mode 100644 src/dw_design_system/dwds/components/banner_card.scss
 create mode 100644 src/dw_design_system/dwds/components/box.html
 create mode 100644 src/dw_design_system/dwds/components/box.scss
 delete mode 100644 src/dw_design_system/dwds/components/card_group.html
 delete mode 100644 src/dw_design_system/dwds/components/card_group.scss
 create mode 100644 src/dw_design_system/dwds/components/comment_section.html
 create mode 100644 src/dw_design_system/dwds/components/comment_section.scss
 create mode 100644 src/dw_design_system/dwds/components/content_list.html
 create mode 100644 src/dw_design_system/dwds/components/content_list.scss
 create mode 100644 src/dw_design_system/dwds/components/cta.html
 create mode 100644 src/dw_design_system/dwds/components/engagement.html
 delete mode 100644 src/dw_design_system/dwds/components/engagement_card.html
 delete mode 100644 src/dw_design_system/dwds/components/engagement_card.scss
 create mode 100644 src/dw_design_system/dwds/components/link_action.html
 create mode 100644 src/dw_design_system/dwds/components/link_action.scss
 delete mode 100644 src/dw_design_system/dwds/components/navigation_card.html
 delete mode 100644 src/dw_design_system/dwds/components/navigation_card.py
 delete mode 100644 src/dw_design_system/dwds/components/navigation_card.scss
 create mode 100644 src/dw_design_system/dwds/components/one_up.html
 create mode 100644 src/dw_design_system/dwds/components/one_up.scss
 delete mode 100644 src/dw_design_system/dwds/components/one_up_card.html
 delete mode 100644 src/dw_design_system/dwds/components/one_up_card.scss
 create mode 100644 src/dw_design_system/dwds/elements/content_header.html
 create mode 100644 src/dw_design_system/dwds/elements/content_header.scss
 create mode 100644 src/dw_design_system/dwds/elements/content_image.html
 create mode 100644 src/dw_design_system/dwds/elements/content_image.scss
 create mode 100644 src/dw_design_system/dwds/elements/content_item.html
 create mode 100644 src/dw_design_system/dwds/elements/content_item.scss
 create mode 100644 src/dw_design_system/dwds/elements/content_main.html
 create mode 100644 src/dw_design_system/dwds/elements/content_main.scss
 delete mode 100644 src/dw_design_system/dwds/elements/extendable/card.html
 delete mode 100644 src/dw_design_system/dwds/elements/extendable/card.scss
 delete mode 100644 src/dw_design_system/dwds/elements/information_panel.scss
 create mode 100644 src/dw_design_system/dwds/elements/ribbon.js
 create mode 100644 src/dw_design_system/dwds/layouts/content_custom_sidebar.html
 create mode 100644 src/dw_design_system/dwds/layouts/content_custom_sidebar.scss
 create mode 100644 src/dw_design_system/dwds/layouts/content_grid.html
 create mode 100644 src/dw_design_system/dwds/layouts/content_grid.scss
 create mode 100644 src/dw_design_system/dwds/layouts/content_item_card.html
 create mode 100644 src/dw_design_system/dwds/layouts/content_item_card.scss
 create mode 100644 src/dw_design_system/dwds/layouts/content_sidebar.html
 create mode 100644 src/dw_design_system/dwds/layouts/content_sidebar.scss
 create mode 100644 src/dw_design_system/dwds/layouts/content_stack.html
 create mode 100644 src/dw_design_system/dwds/layouts/content_stack.scss
 create mode 100644 src/dw_design_system/dwds/layouts/content_switcher.html
 create mode 100644 src/dw_design_system/dwds/layouts/content_switcher.scss
 create mode 100644 src/dw_design_system/dwds/utils.scss
 rename src/dw_design_system/templates/dw_design_system/{components.html => dwds_components.html} (89%)
 create mode 100644 src/dw_design_system/templates/dw_design_system/layouts.html
 create mode 100644 src/events/templates/events/includes/listing_header.html

diff --git a/assets/stylesheets/components/_home_new.scss b/assets/stylesheets/components/_home_new.scss
index 7df98ef43..052927df4 100644
--- a/assets/stylesheets/components/_home_new.scss
+++ b/assets/stylesheets/components/_home_new.scss
@@ -55,12 +55,13 @@
   }
 
   // Adds spacing to the top level content when a flag banner is not present.
-  .dwds > .stack > :not(.govuk-phase-banner) {
+  .dwds > .content-stack > :not(.govuk-phase-banner) {
     margin-block-start: var(--space);
   }
 }
 
 .new-home {
+
   article,
   section {
     display: inline;
@@ -81,4 +82,4 @@
       margin-bottom: 10px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/assets/stylesheets/components/_streamfield-content.scss b/assets/stylesheets/components/_streamfield-content.scss
index a9b2ba700..a607199fc 100644
--- a/assets/stylesheets/components/_streamfield-content.scss
+++ b/assets/stylesheets/components/_streamfield-content.scss
@@ -10,7 +10,8 @@
     @include govuk-font($size: 16, $weight: bold);
   }
 
-  p, li {
+  p,
+  li {
     @extend %govuk-body-m;
   }
 
@@ -29,30 +30,19 @@
   }
 
   table {
-       @extend .govuk-table;
+    @extend .govuk-table;
 
-       caption {
-         @extend .govuk-table__caption;
-       }
+    caption {
+      @extend .govuk-table__caption;
+    }
 
-       th {
-         @extend .govuk-table__header;
-       }
+    th {
+      @extend .govuk-table__header;
+    }
 
-       td {
-         @extend .govuk-table__cell;
-       }
-  }
-}
-
-.ws-streamfield-content__image {
-  margin: 0 0 govuk-spacing(3) 0;
-  padding: 0;
-  display: table;
-
-  img {
-    max-width: 100%;
-    height: auto;
+    td {
+      @extend .govuk-table__cell;
+    }
   }
 }
 
@@ -71,8 +61,10 @@
 
 .ws-streamfield-content__cta-link-container {
   padding-top: govuk-spacing(2);
-  a, a:visited {
+
+  a,
+  a:visited {
     color: $govuk-text-colour;
     padding: govuk-spacing(4);
   }
-}
+}
\ No newline at end of file
diff --git a/src/content/templates/content/navigation_page.html b/src/content/templates/content/navigation_page.html
index 994d2eab4..214ef6a51 100644
--- a/src/content/templates/content/navigation_page.html
+++ b/src/content/templates/content/navigation_page.html
@@ -4,7 +4,7 @@
 {% block body_classes %}dwds-body dwds-navigation-page{% endblock %}
 
 {% block page_title %}
-    <div class="with-sidebar-right flex-end">
+    <div class="content-sidebar-right flex-end">
         <h1>{{ page.title }}</h1>
         <div>
             {% include "feedback.html" with form_id="hr-v1" classes="" prefix="navigation-page" custom_submit_data_function="navigationFeedbackData" %}
@@ -13,17 +13,17 @@ <h1>{{ page.title }}</h1>
 {% endblock page_title %}
 
 {% block primary_content %}
-    <div class="grid grid-multiple-columns">
+    <div class="content-grid grid-cards">
         {% for block in page.primary_elements %}
-            {% include_block block %}
+            <div class="dwds-content-item-card">{% include_block block %}</div>
         {% endfor %}
     </div>
 {% endblock primary_content %}
 
 {% block secondary_content %}
-    <div class="stack">
+    <div class="content-stack">
         {% for block in page.secondary_elements %}
-            {% include_block block %}
+            <div class="dwds-content-item-card no-shadow">{% include_block block %}</div>
         {% endfor %}
     </div>
 {% endblock secondary_content %}
diff --git a/src/core/templates/dwds_content.html b/src/core/templates/dwds_content.html
index 5f90e4435..078ec2e6a 100644
--- a/src/core/templates/dwds_content.html
+++ b/src/core/templates/dwds_content.html
@@ -11,7 +11,7 @@
     {% block main_content %}
         <div class="dwds {% block main_content_classes %}{% endblock main_content_classes %}"
              style="margin-bottom: var(--s2)">
-            <div class="stack">
+            <div class="content-stack large">
                 {% block pre_content %}
                 {% endblock pre_content %}
                 {% block page_title %}
@@ -20,10 +20,10 @@ <h1>{{ page.title }}</h1>
                 {% endblock page_title %}
                 {% block bookmark %}
                     {% if page %}
-                        {% bookmark_page_input user page %}
+                        <div>{% bookmark_page_input user page %}</div>
                     {% endif %}
                 {% endblock bookmark %}
-                <div class="with-sidebar-right">
+                <div class="content-sidebar-right">
                     <div class="primary-content">
                         {% block pre_primary_content %}
                         {% endblock pre_primary_content %}
@@ -47,3 +47,9 @@ <h1>{{ page.title }}</h1>
             </div>
         </div>
     {% endblock main_content %}
+
+
+    {% block scripts %}
+        {{ block.super }}
+        <script src='{% static "dwds/elements/ribbon.js" %}'></script>
+    {% endblock scripts %}
diff --git a/src/dw_design_system/dwds/components/__init__.py b/src/dw_design_system/dwds/components/__init__.py
index 098194ddc..7780dc5f5 100644
--- a/src/dw_design_system/dwds/components/__init__.py
+++ b/src/dw_design_system/dwds/components/__init__.py
@@ -1,7 +1,6 @@
-from .cta_card import CTACardBlock
+from .cta_card import CTACardBlock, NavigationCardBlock
 from .engagement_card import EngagementCardBlock
 from .link_list import CustomPageLinkListBlock, TaggedPageListBlock
-from .navigation_card import NavigationCardBlock
 
 
 __all__ = [
diff --git a/src/dw_design_system/dwds/components/banner.html b/src/dw_design_system/dwds/components/banner.html
new file mode 100644
index 000000000..4e158a33c
--- /dev/null
+++ b/src/dw_design_system/dwds/components/banner.html
@@ -0,0 +1,11 @@
+<div class="content-main{% if alert %} warning {% else %} highlight {% endif %}">
+    <div class="content-body content-stack">
+        {% if link %}
+            <p role="alert">
+                <a href="{{ link }}">{{ text }}</a>
+            </p>
+        {% else %}
+            <p role="alert">{{ text }}</p>
+        {% endif %}
+    </div>
+</div>
diff --git a/src/dw_design_system/dwds/components/banner_card.html b/src/dw_design_system/dwds/components/banner_card.html
deleted file mode 100644
index f5b5bb0d6..000000000
--- a/src/dw_design_system/dwds/components/banner_card.html
+++ /dev/null
@@ -1,30 +0,0 @@
-{% extends "dwds/elements/extendable/card.html" %}
-
-{% block card_container_classes %}
-    dwds-banner-card
-    card-without-shadow
-    {% if alert %}
-        dwds-card-red
-    {% else %}
-        dwds-card-blue
-    {% endif %}
-{% endblock %}
-
-{% block card_header %}
-{% endblock card_header %}
-
-{% block card_content_image %}
-{% endblock card_content_image %}
-
-{% block card_content_body %}
-    {% if link %}
-        <a href="{{ link }}">
-            <p role="alert">{{ text }}</p>
-        </a>
-    {% else %}
-        <p role="alert">{{ text }}</p>
-    {% endif %}
-{% endblock card_content_body %}
-
-{% block card_footer %}
-{% endblock card_footer %}
diff --git a/src/dw_design_system/dwds/components/banner_card.scss b/src/dw_design_system/dwds/components/banner_card.scss
deleted file mode 100644
index f1aa27206..000000000
--- a/src/dw_design_system/dwds/components/banner_card.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.dwds-card-wrapper {
-    .dwds-card.dwds-banner-card {
-        h3 {
-            font-size: var(--text-xlarge);
-            font-weight: var(--font-weight-normal);
-            line-height: var(--font-lineheight-headings);
-        }
-
-        p {
-            margin: 0;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/components/box.html b/src/dw_design_system/dwds/components/box.html
new file mode 100644
index 000000000..244d7d2dc
--- /dev/null
+++ b/src/dw_design_system/dwds/components/box.html
@@ -0,0 +1 @@
+<div class="box dwds-box">{{ excerpt }}</div>
diff --git a/src/dw_design_system/dwds/components/box.scss b/src/dw_design_system/dwds/components/box.scss
new file mode 100644
index 000000000..533f7de9b
--- /dev/null
+++ b/src/dw_design_system/dwds/components/box.scss
@@ -0,0 +1,3 @@
+.dwds-box {
+    background-color: pink;
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/components/card_group.html b/src/dw_design_system/dwds/components/card_group.html
deleted file mode 100644
index 32886e8bf..000000000
--- a/src/dw_design_system/dwds/components/card_group.html
+++ /dev/null
@@ -1,44 +0,0 @@
-{% extends "dwds/elements/extendable/card.html" %}
-
-{% block card_container_classes %}
-    dwds-card-stack-big
-    dwds-card-group
-    {% if grid %}dwds-card-group-grid{% endif %}
-    {% if blue_bg %}dwds-card-blue{% endif %}
-    {% if not show_shadow %}card-without-shadow{% endif %}
-{% endblock card_container_classes %}
-
-{% block card_header %}
-{% endblock card_header %}
-
-{% block card_content_image %}
-{% endblock card_content_image %}
-
-{% block card_content_body %}
-    <div class="card-group-title-wrapper">
-        <h2>{{ card_group_title }}</h2>
-        {% if card_group_link and card_group_link_text %}
-            <a href="{{ card_group_link }}">
-                {{ card_group_link_text }}
-                {% include "dwds/icons/arrow-right.html" %}
-            </a>
-        {% endif %}
-    </div>
-    <div class="grid">
-        {% for card in cards %}
-            {% include card.template with title=card.title post_title_date=card.post_title_date post_title_time=card.post_title_time thumbnail=card.thumbnail url=card.url created_date=card.created_date updated_date=card.updated_date comment_count=card.comment_count excerpt=card.excerpt hide_shadow=card.hide_shadow %}
-        {% endfor %}
-    </div>
-{% endblock card_content_body %}
-
-{% block card_footer %}
-    {% if footer_link and footer_link_text %}
-        <div class="card-footer stack">
-            {% if show_hr %}<hr>{% endif %}
-            <a href="{{ footer_link }}">
-                {{ footer_link_text }}
-                {% include "dwds/icons/arrow-right.html" %}
-            </a>
-        </div>
-    {% endif %}
-{% endblock card_footer %}
diff --git a/src/dw_design_system/dwds/components/card_group.scss b/src/dw_design_system/dwds/components/card_group.scss
deleted file mode 100644
index 7d289d661..000000000
--- a/src/dw_design_system/dwds/components/card_group.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.dwds-card.dwds-card-group {
-    --card-body-heading-color: var(--color-text);
-    padding: var(--s0);
-
-    .card-group-title-wrapper {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        align-items: center;
-
-        h2 {
-            margin: 0;
-        }
-    }
-
-    .card-group-title-wrapper a,
-    .card-footer a {
-        display: flex;
-        justify-content: space-between;
-        max-width: fit-content;
-
-        svg {
-            height: var(--font-lineheight-body);
-            width: var(--s0);
-            margin-left: var(--s0);
-
-            path {
-                fill: currentColor;
-            }
-        }
-    }
-}
-
-.dwds-card.dwds-card-group.dwds-card-group-grid {
-    .grid {
-        grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr));
-    }
-}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/components/comment_section.html b/src/dw_design_system/dwds/components/comment_section.html
new file mode 100644
index 000000000..2bc51999d
--- /dev/null
+++ b/src/dw_design_system/dwds/components/comment_section.html
@@ -0,0 +1,8 @@
+{% load static %}
+
+<div class="dwds-comment-section">
+    <img class="comment-icon"
+         src="{% static '/images/dwds/icons/comment_icon.svg' %}"
+         alt="Comment bubble icon.">
+    {{ comment_count }} Comment{{ comment_count|pluralize }}
+</div>
diff --git a/src/dw_design_system/dwds/components/comment_section.scss b/src/dw_design_system/dwds/components/comment_section.scss
new file mode 100644
index 000000000..964fa903d
--- /dev/null
+++ b/src/dw_design_system/dwds/components/comment_section.scss
@@ -0,0 +1,5 @@
+.dwds-comment-section {
+    .comment-icon {
+        vertical-align: text-bottom;
+    }
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/components/content_list.html b/src/dw_design_system/dwds/components/content_list.html
new file mode 100644
index 000000000..0f7da4016
--- /dev/null
+++ b/src/dw_design_system/dwds/components/content_list.html
@@ -0,0 +1,23 @@
+{% load cards %}
+
+<div class="dwds-content-list {% if as_card_grid %}as-card-grid{% endif %} content-item">
+    <div class="content-main {% if highlight %}highlight{% endif %}">
+        <div class="content-body content-body-space-padding content-stack large">
+            <h2>{{ title }}</h2>
+            {% if as_card_grid %}
+                <div class="content-grid grid-cards">
+                    {% for content_item in content_items %}
+                        <div class="dwds-content-item-card">{% page_to_engagement content_item %}</div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                {% for content_item in content_items %}
+                    {% page_to_engagement content_item %}
+                {% endfor %}
+            {% endif %}
+            {% if link_url and link_text %}
+                {% include "dwds/components/link_action.html" with link_url=link_url link_text=link_text right=True %}
+            {% endif %}
+        </div>
+    </div>
+</div>
diff --git a/src/dw_design_system/dwds/components/content_list.scss b/src/dw_design_system/dwds/components/content_list.scss
new file mode 100644
index 000000000..c8789d222
--- /dev/null
+++ b/src/dw_design_system/dwds/components/content_list.scss
@@ -0,0 +1,32 @@
+.dwds-content-list {
+    > .content-main {
+        --content-main-padding: 0;
+    }
+
+    .content-item {
+        .content-custom-sidebar {
+            --sidebar-gap: var(--s1);
+
+            .content-main {
+                --content-main-padding: 0;
+            }
+
+            .content-image {
+                height: fit-content;
+                border-radius: 6px;
+            }
+        }
+    }
+}
+
+.dwds-content-list.as-card-grid {
+    .content-item {
+        .content-custom-sidebar {
+            --sidebar-gap: 0;
+
+            .content-main {
+                --content-main-padding: var(--s0);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/components/cta.html b/src/dw_design_system/dwds/components/cta.html
new file mode 100644
index 000000000..2a23f5c39
--- /dev/null
+++ b/src/dw_design_system/dwds/components/cta.html
@@ -0,0 +1,6 @@
+<div class="content-main {% if highlight %}highlight{% endif %}">
+    <div class="content-body content-stack">
+        {% include 'dwds/elements/navigational_link.html' with url=url text=title %}
+        {% if description %}<p>{{ description }}</p>{% endif %}
+    </div>
+</div>
diff --git a/src/dw_design_system/dwds/components/cta_card.html b/src/dw_design_system/dwds/components/cta_card.html
index d96b2c8b5..4301f80dc 100644
--- a/src/dw_design_system/dwds/components/cta_card.html
+++ b/src/dw_design_system/dwds/components/cta_card.html
@@ -1,17 +1 @@
-{% extends "dwds/elements/extendable/card.html" %}
-
-{% block card_container_classes %}dwds-cta-card card-without-shadow dwds-card-blue{% endblock %}
-
-{% block card_header %}
-{% endblock card_header %}
-
-{% block card_content_image %}
-{% endblock card_content_image %}
-
-{% block card_content_body %}
-    {% include 'dwds/elements/navigational_link.html' with url=url text=title %}
-    {% if description %}<p>{{ description }}</p>{% endif %}
-{% endblock card_content_body %}
-
-{% block card_footer %}
-{% endblock card_footer %}
+<div class="content-item">{% include "dwds/components/cta.html" %}</div>
diff --git a/src/dw_design_system/dwds/components/cta_card.py b/src/dw_design_system/dwds/components/cta_card.py
index b3a9c4a43..6e72f4d6c 100644
--- a/src/dw_design_system/dwds/components/cta_card.py
+++ b/src/dw_design_system/dwds/components/cta_card.py
@@ -40,6 +40,7 @@ def get_context(self, value, parent_context=None):
             url = value["url"]
 
         context.update(
+            highlight=True,
             title=value["title"],
             description=value["description"],
             url=url,
@@ -50,3 +51,35 @@ def get_searchable_heading(self, value):
         title = value["title"]
         page = value["page"]
         return title or page.title
+
+
+class NavigationCardBlock(blocks.StructBlock):
+    """A nav card to direct users"""
+
+    page = blocks.PageChooserBlock()
+    title = content_blocks.HeadingBlock(
+        required=False,
+        max_length=30,
+        help_text="By default, the name of the page will be the title. Override it using the below field.",
+    )
+    summary = blocks.CharBlock(required=False, max_length=70)
+
+    class Meta:
+        label = "Navigation Card"
+        icon = "link"
+        template = "dwds/components/cta_card.html"
+
+    def get_context(self, value, parent_context=None):
+        context = parent_context or {}
+        page = value["page"]
+        context.update(
+            title=value.get("title") or page.title,
+            url=page.get_url(),
+            description=value["summary"],
+        )
+        return context
+
+    def get_searchable_heading(self, value):
+        title = value["title"]
+        page = value["page"]
+        return title or page.title
diff --git a/src/dw_design_system/dwds/components/engagement.html b/src/dw_design_system/dwds/components/engagement.html
new file mode 100644
index 000000000..aaa8ab1b7
--- /dev/null
+++ b/src/dw_design_system/dwds/components/engagement.html
@@ -0,0 +1,45 @@
+{% load wagtailimages_tags static humanize %}
+
+<div class="dwds-engagement content-item content-custom-sidebar-wrapper">
+    <div class="content-custom-sidebar">
+        {% include "dwds/elements/content_image.html" with content_image=thumbnail %}
+
+        <div class="content-main content">
+            <div class="content-body content-stack">
+                {% if ribbon_text %}
+                    {% include "dwds/elements/ribbon.html" with text=ribbon_text colour="blue" %}
+                {% endif %}
+                <h3>
+                    <a class="no-underline" href="{{ url }}">{{ title }}</a>
+                </h3>
+                {% if post_title_date and post_title_time %}
+                    <div class="post-title-container">
+                        <h4 class="post-title">{{ post_title_date }}</h4>
+                        <h4 class="post-title">{{ post_title_time }}</h4>
+                    </div>
+                {% endif %}
+                {% if excerpt %}<p>{{ excerpt|truncatewords:16 }}</p>{% endif %}
+            </div>
+
+            {% if updated_date or created_date or comment_count %}
+                <div class="content-footer content-stack">
+                    {% if updated_date > created_date %}
+                        <time>
+                            Updated {{ updated_date|naturalday:'j F Y' }}
+                            {% if updated_date|naturalday in 'yesterday, today' %}at {{ updated_date|time:'g:iA'|lower }}{% endif %}
+                        </time>
+                    {% elif created_date %}
+                        <time>
+                            Added {{ created_date|naturalday:'j F Y' }}
+                            {% if created_date|naturalday in 'yesterday, today' %}at {{ created_date|time:'g:iA'|lower }}{% endif %}
+                        </time>
+                    {% endif %}
+
+                    {% if comment_count > 0 %}
+                        {% include "dwds/components/comment_section.html" %}
+                    {% endif %}
+                </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
diff --git a/src/dw_design_system/dwds/components/engagement_card.html b/src/dw_design_system/dwds/components/engagement_card.html
deleted file mode 100644
index 8caea4389..000000000
--- a/src/dw_design_system/dwds/components/engagement_card.html
+++ /dev/null
@@ -1,60 +0,0 @@
-{% extends "dwds/elements/extendable/card.html" %}
-{% load wagtailimages_tags static humanize %}
-
-{% block card_header %}
-{% endblock card_header %}
-
-{% block card_container_classes %}
-    dwds-engagement-card card-with-image
-    {% if hide_shadow %}card-without-shadow{% endif %}
-{% endblock card_container_classes %}
-
-{% block card_content_image %}
-    {% if thumbnail %}
-        {% image thumbnail fill-420x240 %}
-    {% else %}
-        <img src="{% static '/images/dwds/fallback_image_card.png' %}"
-             alt="Colourful circles on a blue background.">
-    {% endif %}
-{% endblock card_content_image %}
-
-{% block card_content_body %}
-    {% if ribbon_text %}
-        {% include "dwds/elements/ribbon.html" with text=ribbon_text colour="blue" %}
-    {% endif %}
-
-    <h3>
-        <a class="no-underline" href="{{ url }}">{{ title }}</a>
-    </h3>
-    {% if post_title_date and post_title_time %}
-        <div class="post-title-container">
-            <h4 class="post-title">{{ post_title_date }}</h4>
-            <h4 class="post-title">{{ post_title_time }}</h4>
-        </div>
-    {% endif %}
-
-    {% if excerpt %}<p>{{ excerpt|truncatewords:16 }}</p>{% endif %}
-{% endblock card_content_body %}
-
-{% block card_footer_body %}
-    {% if updated_date > created_date %}
-        <time>
-            Updated {{ updated_date|naturalday:'j F Y' }}
-            {% if updated_date|naturalday in 'yesterday, today' %}at {{ updated_date|time:'g:iA'|lower }}{% endif %}
-        </time>
-    {% elif created_date %}
-        <time>
-            Added {{ created_date|naturalday:'j F Y' }}
-            {% if created_date|naturalday in 'yesterday, today' %}at {{ created_date|time:'g:iA'|lower }}{% endif %}
-        </time>
-    {% endif %}
-
-    {% if comment_count > 0 %}
-        <span class="card-comment-section">
-            <img class="comment-icon"
-                 src="{% static '/images/dwds/icons/comment_icon.svg' %}"
-                 alt="Comment bubble icon.">
-            {{ comment_count }} Comment{{ comment_count|pluralize }}
-        </span>
-    {% endif %}
-{% endblock card_footer_body %}
diff --git a/src/dw_design_system/dwds/components/engagement_card.scss b/src/dw_design_system/dwds/components/engagement_card.scss
deleted file mode 100644
index b12c935f1..000000000
--- a/src/dw_design_system/dwds/components/engagement_card.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.dwds-card.dwds-engagement-card {
-    --card-body-heading-color: var(--color-link);
-}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/components/link_action.html b/src/dw_design_system/dwds/components/link_action.html
new file mode 100644
index 000000000..3b561f76d
--- /dev/null
+++ b/src/dw_design_system/dwds/components/link_action.html
@@ -0,0 +1,10 @@
+<a class="dwds-link-action {% if left %}left{% endif %} {% if right %}right{% endif %}"
+   href="{{ link_url }}">
+    {% if left %}
+        {% include "dwds/icons/arrow-left.html" %}
+    {% endif %}
+    <div>{{ link_text }}</div>
+    {% if right %}
+        {% include "dwds/icons/arrow-right.html" %}
+    {% endif %}
+</a>
diff --git a/src/dw_design_system/dwds/components/link_action.scss b/src/dw_design_system/dwds/components/link_action.scss
new file mode 100644
index 000000000..44c2ef77c
--- /dev/null
+++ b/src/dw_design_system/dwds/components/link_action.scss
@@ -0,0 +1,26 @@
+.dwds-link-action {
+    display: flex;
+    justify-content: space-between;
+    max-width: fit-content;
+
+    svg {
+        height: var(--font-lineheight-body);
+        width: var(--s0);
+
+        path {
+            fill: currentColor;
+        }
+    }
+}
+
+.dwds-link-action.left {
+    > div {
+        margin-left: var(--s0);
+    }
+}
+
+.dwds-link-action.right {
+    > div {
+        margin-right: var(--s0);
+    }
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/components/link_list.html b/src/dw_design_system/dwds/components/link_list.html
index b0f450383..221206d71 100644
--- a/src/dw_design_system/dwds/components/link_list.html
+++ b/src/dw_design_system/dwds/components/link_list.html
@@ -1,26 +1,18 @@
-{% extends "dwds/elements/extendable/card.html" %}
+<div class="dwds-link-list content-item">
+    <div class="content-header content-stack">
+        <h3>{{ title }}</h3>
+    </div>
 
-{% block card_container_classes %}
-    dwds-link-list
-{% endblock card_container_classes %}
-
-{% block card_header_content %}
-    <h3>{{ title }}</h3>
-{% endblock card_header_content %}
-
-{% block card_content_image %}
-{% endblock card_content_image %}
-
-{% block card_content_body %}
-    {% if description %}<p>{{ description }}</p>{% endif %}
-    <ul>
-        {% for item in list %}
-            <li>
-                <a href="{{ item.url }}">{{ item.text }}</a>
-            </li>
-        {% endfor %}
-    </ul>
-{% endblock card_content_body %}
-
-{% block card_footer %}
-{% endblock card_footer %}
+    <div class="content-main">
+        <div class="content-body content-stack">
+            {% if description %}<p>{{ description }}</p>{% endif %}
+            <ul>
+                {% for item in list %}
+                    <li>
+                        <a href="{{ item.url }}">{{ item.text }}</a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
+</div>
diff --git a/src/dw_design_system/dwds/components/link_navigate.html b/src/dw_design_system/dwds/components/link_navigate.html
index 9da95b636..a7d4bd1fb 100644
--- a/src/dw_design_system/dwds/components/link_navigate.html
+++ b/src/dw_design_system/dwds/components/link_navigate.html
@@ -1,14 +1,5 @@
 <div class="dwds-link-navigate">
-    {% if previous_url %}
-        <a href="{{ previous_url }}">
-            {% include "dwds/icons/arrow-left.html" %}
-            <span>{{ previous_text|default:'Previous'|title }}</span>
-        </a>
-    {% endif %}
+    {% include "dwds/components/link_action.html" with link_url=previous_url link_text=previous_text|default:'Previous'|title left=True %}
     {% if previous_url and next_url %}<span>|</span>{% endif %}
-    {% if next_url %}
-        <a href="{{ next_url }}"> <span>{{ next_text|default:'Next'|title }}</span>
-            {% include "dwds/icons/arrow-right.html" %}
-        </a>
-    {% endif %}
+    {% include "dwds/components/link_action.html" with link_url=next_url link_text=next_text|default:'Next'|title right=True %}
 </div>
diff --git a/src/dw_design_system/dwds/components/link_navigate.scss b/src/dw_design_system/dwds/components/link_navigate.scss
index 3cfcca6c0..2433f60b4 100644
--- a/src/dw_design_system/dwds/components/link_navigate.scss
+++ b/src/dw_design_system/dwds/components/link_navigate.scss
@@ -3,11 +3,17 @@
     align-items: center;
     gap: var(--s0);
 
+    .dwds-link-action {
+        > div {
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+
     a {
         display: flex;
         gap: var(--s0);
 
-
         svg {
             height: var(--font-lineheight-body);
             width: var(--s1);
diff --git a/src/dw_design_system/dwds/components/navigation_card.html b/src/dw_design_system/dwds/components/navigation_card.html
deleted file mode 100644
index 48d584042..000000000
--- a/src/dw_design_system/dwds/components/navigation_card.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% extends "dwds/elements/extendable/card.html" %}
-
-{% block card_container_classes %}dwds-navigation-card{% endblock %}
-
-{% block card_header %}
-{% endblock card_header %}
-
-{% block card_content_image %}
-{% endblock card_content_image %}
-
-{% block card_content_body %}
-    {% include "dwds/elements/navigational_link.html" with url=url text=title %}
-    {% if summary %}<p>{{ summary }}</p>{% endif %}
-{% endblock card_content_body %}
-
-{% block card_footer %}
-{% endblock card_footer %}
diff --git a/src/dw_design_system/dwds/components/navigation_card.py b/src/dw_design_system/dwds/components/navigation_card.py
deleted file mode 100644
index 0f17bc651..000000000
--- a/src/dw_design_system/dwds/components/navigation_card.py
+++ /dev/null
@@ -1,35 +0,0 @@
-from wagtail import blocks
-
-from content import blocks as content_blocks
-
-
-class NavigationCardBlock(blocks.StructBlock):
-    """A nav card to direct users"""
-
-    page = blocks.PageChooserBlock()
-    title = content_blocks.HeadingBlock(
-        required=False,
-        max_length=30,
-        help_text="By default, the name of the page will be the title. Override it using the below field.",
-    )
-    summary = blocks.CharBlock(required=False, max_length=70)
-
-    class Meta:
-        label = "Navigation Card"
-        icon = "link"
-        template = "dwds/components/navigation_card.html"
-
-    def get_context(self, value, parent_context=None):
-        context = parent_context or {}
-        page = value["page"]
-        context.update(
-            title=value.get("title") or page.title,
-            url=page.get_url(),
-            summary=value["summary"],
-        )
-        return context
-
-    def get_searchable_heading(self, value):
-        title = value["title"]
-        page = value["page"]
-        return title or page.title
diff --git a/src/dw_design_system/dwds/components/navigation_card.scss b/src/dw_design_system/dwds/components/navigation_card.scss
deleted file mode 100644
index 9c07d33b1..000000000
--- a/src/dw_design_system/dwds/components/navigation_card.scss
+++ /dev/null
@@ -1 +0,0 @@
-.dwds-navigation-card {}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/components/one_up.html b/src/dw_design_system/dwds/components/one_up.html
new file mode 100644
index 000000000..7e5518afa
--- /dev/null
+++ b/src/dw_design_system/dwds/components/one_up.html
@@ -0,0 +1,43 @@
+{% load wagtailimages_tags static humanize %}
+
+<div class="dwds-one-up content-item content-custom-sidebar-wrapper">
+    <div class="content-custom-sidebar large">
+        <div class="content-main content">
+            <div class="content-body content-stack">
+                {% if ribbon_text %}
+                    {% include "dwds/elements/ribbon.html" with text=ribbon_text colour="blue" %}
+                {% endif %}
+                <h2>
+                    <a class="no-underline" href="{{ url }}">{{ title }}</a>
+                </h2>
+                {% if post_title_date and post_title_time %}
+                    <div class="post-title-container">
+                        <h4 class="post-title">{{ post_title_date }}</h4>
+                        <h4 class="post-title">{{ post_title_time }}</h4>
+                    </div>
+                {% endif %}
+                {% if excerpt %}<p>{{ excerpt|truncatewords:16 }}</p>{% endif %}
+            </div>
+
+            {% if updated_date or created_date or comment_count %}
+                <div class="content-footer content-stack">
+                    {% if updated_date > created_date %}
+                        <time>
+                            Updated {{ updated_date|naturalday:'j F Y' }}
+                            {% if updated_date|naturalday in 'yesterday, today' %}at {{ updated_date|time:'g:iA'|lower }}{% endif %}
+                        </time>
+                    {% elif created_date %}
+                        <time>
+                            Added {{ created_date|naturalday:'j F Y' }}
+                            {% if created_date|naturalday in 'yesterday, today' %}at {{ created_date|time:'g:iA'|lower }}{% endif %}
+                        </time>
+                    {% endif %}
+                    {% if comment_count %}
+                        {% include "dwds/components/comment_section.html" %}
+                    {% endif %}
+                </div>
+            {% endif %}
+        </div>
+        {% include "dwds/elements/content_image.html" with content_image=thumbnail %}
+    </div>
+</div>
diff --git a/src/dw_design_system/dwds/components/one_up.scss b/src/dw_design_system/dwds/components/one_up.scss
new file mode 100644
index 000000000..d50d96246
--- /dev/null
+++ b/src/dw_design_system/dwds/components/one_up.scss
@@ -0,0 +1,17 @@
+.dwds-one-up {
+    --one-up-min-inline-size: 30ch;
+
+
+    > .content-custom-sidebar {
+        > .content-main {
+            min-inline-size: var(--one-up-min-inline-size);
+        }
+    }
+
+    .content-image {
+        background-color: white;
+
+        object-position: center;
+        height: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/components/one_up_card.html b/src/dw_design_system/dwds/components/one_up_card.html
deleted file mode 100644
index fa6068774..000000000
--- a/src/dw_design_system/dwds/components/one_up_card.html
+++ /dev/null
@@ -1,60 +0,0 @@
-{% extends "dwds/elements/extendable/card.html" %}
-{% load wagtailimages_tags static humanize %}
-
-{% block card_container_classes %}
-    dwds-one-up-card card-with-image image-right
-{% endblock card_container_classes %}
-
-{% block card_header %}
-{% endblock card_header %}
-
-{% block card_content_image %}
-    {% if thumbnail %}
-        {% image thumbnail fill-420x240 %}
-    {% else %}
-        <img src="{% static '/images/dwds/fallback_image_card.png' %}"
-             alt="Colourful circles on a blue background.">
-    {% endif %}
-{% endblock card_content_image %}
-
-{% block card_content %}
-    <div class="card-body card-body-stack">
-        {% block card_content_body %}
-            {% if ribbon_text %}
-                {% include "dwds/elements/ribbon.html" with text=ribbon_text colour="blue" %}
-            {% endif %}
-            <h2>
-                <a class="no-underline" href="{{ url }}">{{ title }}</a>
-            </h2>
-            {% if post_title_date and post_title_time %}
-                <div class="post-title-container">
-                    <h4 class="post-title">{{ post_title_date }}</h4>
-                    <h4 class="post-title">{{ post_title_time }}</h4>
-                </div>
-            {% endif %}
-            {% if excerpt %}<p>{{ excerpt|truncatewords:16 }}</p>{% endif %}
-        {% endblock card_content_body %}
-    </div>
-{% endblock card_content %}
-
-{% block card_footer_body %}
-    {% if updated_date > created_date %}
-        <time>
-            Updated {{ updated_date|naturalday:'j F Y' }}
-            {% if updated_date|naturalday in 'yesterday, today' %}at {{ updated_date|time:'g:iA'|lower }}{% endif %}
-        </time>
-    {% elif created_date %}
-        <time>
-            Added {{ created_date|naturalday:'j F Y' }}
-            {% if created_date|naturalday in 'yesterday, today' %}at {{ created_date|time:'g:iA'|lower }}{% endif %}
-        </time>
-    {% endif %}
-    {% if comment_count %}
-        <span class="card-comment-section">
-            <img class="comment-icon"
-                 src="{% static '/images/dwds/icons/comment_icon.svg' %}"
-                 alt="Comment bubble icon.">
-            {{ comment_count }} Comment{{ comment_count|pluralize }}
-        </span>
-    {% endif %}
-{% endblock card_footer_body %}
diff --git a/src/dw_design_system/dwds/components/one_up_card.scss b/src/dw_design_system/dwds/components/one_up_card.scss
deleted file mode 100644
index 2709a9ea1..000000000
--- a/src/dw_design_system/dwds/components/one_up_card.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.dwds-one-up-card {
-    --card-body-heading-color: var(--color-link);
-
-    .card-main {
-        grid-template-columns: 1fr 1.25fr !important;
-    }
-}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/components/promo.html b/src/dw_design_system/dwds/components/promo.html
index b3cb28a23..1ade617f1 100644
--- a/src/dw_design_system/dwds/components/promo.html
+++ b/src/dw_design_system/dwds/components/promo.html
@@ -1,47 +1,17 @@
-{% extends "dwds/elements/extendable/card.html" %}
-{% load wagtailimages_tags static %}
-
-{% comment %}
-Context:
-    ribbon_text (str)
-    description (str)
-    link_url (str)
-    link_text (str)
-    thumbnail (str)
-
-Example:
-    {% include 'dwds/components/promo.html' with ribbon_text='One DBT' description='One DBT promotion banner.' link_url='https://example.com' link_text='Example website' thumbnail='' %}
-{% endcomment %}
-
-{% block card_container_classes %}
-    dwds-promo-banner
-    card-without-shadow
-    card-with-image
-    image-right
-    dwds-card-blue
-{% endblock %}
-
-{% block card_header %}
-{% endblock card_header %}
-
-{% block card_content_image %}
-    {% if thumbnail %}
-        {% image thumbnail fill-420x240 %}
-    {% else %}
-        <img src="{% static '/images/dwds/fallback_image_card.png' %}"
-             alt="Colourful circles on a blue background.">
-    {% endif %}
-{% endblock card_content_image %}
-
-{% block card_content_body %}
-    {% if ribbon_text %}
-        {% include "dwds/elements/ribbon.html" with colour="red" text=ribbon_text %}
-    {% endif %}
-    {% if description %}<p>{{ description }}</p>{% endif %}
-    {% if link_url and link_text %}
-        {% include "dwds/elements/navigational_link.html" with url=link_url text=link_text %}
-    {% endif %}
-{% endblock card_content_body %}
-
-{% block card_footer %}
-{% endblock card_footer %}
+{% load wagtailimages_tags static humanize %}
+<div class="dwds-promo content-item">
+    <div class="content-grid image-right">
+        {% include "dwds/elements/content_image.html" with content_image=thumbnail %}
+        <div class="content-main highlight">
+            <div class="content-body content-stack">
+                {% if ribbon_text %}
+                    {% include "dwds/elements/ribbon.html" with text=ribbon_text colour="red" %}
+                {% endif %}
+                {% if description %}<p>{{ description }}</p>{% endif %}
+                {% if link_url and link_text %}
+                    {% include "dwds/components/link_action.html" with link_url=link_url link_text=link_text right=True %}
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/dw_design_system/dwds/components/promo.scss b/src/dw_design_system/dwds/components/promo.scss
index f08232f6b..248d821f1 100644
--- a/src/dw_design_system/dwds/components/promo.scss
+++ b/src/dw_design_system/dwds/components/promo.scss
@@ -1,34 +1,7 @@
-.dwds-card.dwds-promo-banner {
-    --link-font-size: var(--s0);
-
-    .card-main {
-        grid-template-columns: 2fr 1fr !important;
-
-        image {
-            border-radius: 0;
-        }
-    }
-
-    .dwds-navigational-link {
-        justify-content: unset;
-        align-items: center;
-        gap: var(--s0);
-
-        svg {
-            height: var(--link-font-size);
-        }
-    }
-
-    a,
-    a:visited,
-    a:link {
-        color: var(--color-text-highlight);
-        font-size: var(--link-font-size);
-        text-decoration: underline;
-        font-weight: var(--font-weight-bold);
-
-        p {
-            color: var(--color-text-highlight);
+.dwds-promo {
+    > .content-grid {
+        > .content-image {
+            height: auto;
         }
     }
 }
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/elements/content_header.html b/src/dw_design_system/dwds/elements/content_header.html
new file mode 100644
index 000000000..aa4a66005
--- /dev/null
+++ b/src/dw_design_system/dwds/elements/content_header.html
@@ -0,0 +1,5 @@
+<div class="content-header content-stack">
+    {% include "dwds/elements/ribbon.html" with text="Ribbon" colour="red" %}
+    <p class="content-subtitle">26 June</p>
+    <h3>DBT Connect: John Smith in conversation with Jane Doe</h3>
+</div>
diff --git a/src/dw_design_system/dwds/elements/content_header.scss b/src/dw_design_system/dwds/elements/content_header.scss
new file mode 100644
index 000000000..66a903940
--- /dev/null
+++ b/src/dw_design_system/dwds/elements/content_header.scss
@@ -0,0 +1,18 @@
+.content-header {
+    --content-header-text-colour: var(--card-bg-white);
+
+    padding: var(--s0) var(--s1) var(--s0) var(--s0);
+    background: linear-gradient(180deg, rgba(0, 40, 95, 0.00) 53.55%, #00285F 99.65%), url("/assets/images/dwds/card-header-bg-small.webp") center / cover no-repeat, #00285F;
+    font-weight: var(--font-weight-bold);
+    color: var(--content-header-text-colour);
+
+    .content-subtitle {
+        font-size: var(--text-large);
+        color: var(--content-header-text-colour);
+    }
+
+    h2,
+    h3 {
+        color: var(--content-header-text-colour);
+    }
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/elements/content_image.html b/src/dw_design_system/dwds/elements/content_image.html
new file mode 100644
index 000000000..69ad00ab4
--- /dev/null
+++ b/src/dw_design_system/dwds/elements/content_image.html
@@ -0,0 +1,11 @@
+{% load wagtailimages_tags static %}
+
+{% if content_image %}
+    {% image content_image fill-420x240 class="content-image" %}
+{% else %}
+    <img class="content-image"
+         src="{% static '/images/dwds/fallback_image_card.png' %}"
+         alt="Colourful circles on a blue background."
+         width="420"
+         height="240">
+{% endif %}
diff --git a/src/dw_design_system/dwds/elements/content_image.scss b/src/dw_design_system/dwds/elements/content_image.scss
new file mode 100644
index 000000000..42793347a
--- /dev/null
+++ b/src/dw_design_system/dwds/elements/content_image.scss
@@ -0,0 +1,7 @@
+.content-image {
+    // Fill the available space, but don't crop or stretch the image
+    inline-size: 100%;
+    object-fit: contain;
+    object-position: 0 0;
+    flex-basis: 300px;
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/elements/content_item.html b/src/dw_design_system/dwds/elements/content_item.html
new file mode 100644
index 000000000..dbf564bdb
--- /dev/null
+++ b/src/dw_design_system/dwds/elements/content_item.html
@@ -0,0 +1,5 @@
+<div class="content-item">
+    {% include "dwds/elements/content_header.html" %}
+    {% include "dwds/elements/content_image.html" %}
+    {% include "dwds/elements/content_main.html" %}
+</div>
diff --git a/src/dw_design_system/dwds/elements/content_item.scss b/src/dw_design_system/dwds/elements/content_item.scss
new file mode 100644
index 000000000..c1c980c72
--- /dev/null
+++ b/src/dw_design_system/dwds/elements/content_item.scss
@@ -0,0 +1,4 @@
+.content-item {
+    container-name: content_item;
+    container-type: inline-size;
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/elements/content_main.html b/src/dw_design_system/dwds/elements/content_main.html
new file mode 100644
index 000000000..f225dfbae
--- /dev/null
+++ b/src/dw_design_system/dwds/elements/content_main.html
@@ -0,0 +1,17 @@
+<div class="content-main">
+    <div class="content-body content-stack">
+        {% include "dwds/elements/ribbon.html" with text="Ribbon" %}
+
+        <h3>
+            <a href="#">A message from the Secretary of State</a>
+        </h3>
+
+        <p>Join John Smith, former SpAd for Jane Doe, at the next DBT Connect event on Wednesday 26 June, 1-2pm.</p>
+        <a href="#">See event</a>
+    </div>
+
+    <div class="content-footer content-stack">
+        <span>Added today at 9am</span>
+        <span>4 Comments</span>
+    </div>
+</div>
diff --git a/src/dw_design_system/dwds/elements/content_main.scss b/src/dw_design_system/dwds/elements/content_main.scss
new file mode 100644
index 000000000..ff60b8131
--- /dev/null
+++ b/src/dw_design_system/dwds/elements/content_main.scss
@@ -0,0 +1,86 @@
+.content-main {
+    --content-main-bg-color: var(--card-bg-white);
+    --content-main-heading-color: var(--color-text);
+    --content-main-link-color: var(--color-link);
+    --content-main-text-color: var(--color-text);
+    --content-main-padding: var(--s0);
+
+    padding: var(--content-main-padding);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--s0);
+
+    background-color: var(--content-main-bg-color);
+
+    h2,
+    h3 {
+        color: var(--content-main-heading-color);
+    }
+
+    p {
+        color: var(--content-main-text-color);
+    }
+
+    a,
+    a:visited,
+    a:link {
+        color: var(--content-main-link-color);
+        text-decoration-color: var(--content-main-link-color);
+    }
+
+    a:focus {
+        color: var(--color-text);
+        text-decoration-color: var(--color-text);
+    }
+
+    .content-body.content-body-space-padding {
+        padding: var(--space);
+    }
+
+    .content-body {
+        font-size: var(--text-large);
+        line-height: var(--font-lineheight-body);
+
+        .post-title-container {
+            display: flex;
+            flex-direction: column;
+            gap: var(--s-5)
+        }
+
+        .post-title {
+            margin: 0;
+        }
+    }
+
+    .content-footer {
+        margin-top: auto;
+        color: var(--color-text-secondary);
+    }
+
+    .content-footer.content-stack {
+        --content-stack-gap: var(--s-5);
+    }
+}
+
+.content-main.info {
+    --content-main-bg-color: #EEF2F6;
+}
+
+.content-main.content {
+    --content-main-heading-color: var(--color-link);
+}
+
+.content-main.highlight {
+    --content-main-bg-color: var(--card-bg-blue);
+    --content-main-heading-color: var(--color-text-highlight);
+    --content-main-link-color: var(--color-text-highlight);
+    --content-main-text-color: var(--color-text-highlight);
+}
+
+.content-main.warning {
+    --content-main-bg-color: var(--card-bg-red);
+    --content-main-heading-color: var(--color-text-highlight);
+    --content-main-link-color: var(--color-text-highlight);
+    --content-main-text-color: var(--color-text-highlight);
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/elements/extendable/card.html b/src/dw_design_system/dwds/elements/extendable/card.html
deleted file mode 100644
index 366f87d9f..000000000
--- a/src/dw_design_system/dwds/elements/extendable/card.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div class="dwds-card-wrapper flex">
-    <div class="dwds-card {% block card_container_classes %}{% endblock card_container_classes %}">
-        {% block card_header %}
-            <div class="card-header stack">
-                {% block card_header_content %}
-                    {% include "dwds/elements/ribbon.html" with text="Ribbon" colour="red" %}
-                    <p class="card-subtitle">26 June</p>
-                    <h3>DBT Connect: John Smith in conversation with Jane Doe</h3>
-                {% endblock card_header_content %}
-            </div>
-        {% endblock card_header %}
-
-        {% block card_main %}
-            <div class="card-main">
-                {% block card_content_image %}
-                    <img src="https://via.placeholder.com/196x127" alt="image">
-                {% endblock card_content_image %}
-
-                <div class="card-content">
-                    {% block card_content %}
-                        {% comment %} stack should be converted into a card-specific stack {% endcomment %}
-                        <div class="card-body card-body-stack">
-                            {% block card_content_body %}
-                                {% include "dwds/elements/ribbon.html" with text="Ribbon" %}
-                                <a href="#">
-                                    <h3>A message from the Secretary of State</h3>
-                                </a>
-                                <p>Join John Smith, former SpAd for Jane Doe, at the next DBT Connect event on Wednesday 26 June, 1-2pm.</p>
-                                <a href="#">See event</a>
-                            {% endblock card_content_body %}
-                        </div>
-                    {% endblock card_content %}
-
-                    {% block card_footer %}
-                        <div class="card-footer stack">
-                            {% block card_footer_body %}
-                                <span>Added today at 9am</span>
-                                <span>4 Comments</span>
-                            {% endblock card_footer_body %}
-                        </div>
-                    {% endblock card_footer %}
-                </div>
-            </div>
-        {% endblock card_main %}
-    </div>
-</div>
diff --git a/src/dw_design_system/dwds/elements/extendable/card.scss b/src/dw_design_system/dwds/elements/extendable/card.scss
deleted file mode 100644
index 6929c694f..000000000
--- a/src/dw_design_system/dwds/elements/extendable/card.scss
+++ /dev/null
@@ -1,181 +0,0 @@
-.dwds-card-wrapper {
-    container-name: card;
-    container-type: inline-size;
-
-    .dwds-card {
-        --card-bottom-border-height: 5px;
-        --card-body-bg-color: var(--card-bg-white);
-        --card-body-heading-color: var(--color-text);
-        --card-body-link-color: var(--color-link);
-        --card-body-text-color: var(--color-text);
-        --card-body-stack-space: var(--s0);
-        color: var(--card-body-text-color);
-
-        flex-grow: 1;
-
-        display: flex;
-        flex-direction: column;
-
-        box-shadow: 0 var(--card-bottom-border-height) 0 rgba(0, 0, 0, 0.2);
-        border-radius: var(--border-radius);
-        overflow: hidden;
-        background-color: var(--card-body-bg-color);
-
-
-        a,
-        a:visited,
-        a:link {
-            color: var(--card-body-link-color);
-            text-decoration-color: var(--card-body-link-color);
-
-            p {
-                color: var(--card-body-text-color);
-            }
-        }
-
-        p:last-child {
-            margin-bottom: 0;
-        }
-
-        p {
-            color: var(--card-body-text-color);
-        }
-
-        &.dwds-card-blue {
-            --card-body-bg-color: var(--card-bg-blue);
-            --card-body-heading-color: var(--color-text-highlight);
-            --card-body-link-color: var(--color-text-highlight);
-            --card-body-text-color: var(--color-text-highlight);
-        }
-
-        &.dwds-card-red {
-            --card-body-bg-color: var(--card-bg-red);
-            --card-body-heading-color: var(--color-text-highlight);
-            --card-body-link-color: var(--color-text-highlight);
-            --card-body-text-color: var(--color-text-highlight);
-        }
-
-        &.dwds-card-stack-big {
-            --card-body-stack-space: var(--space)
-        }
-
-        .card-header {
-            --header-background-colour: var(--card-bg-blue);
-            --header-text-colour: var(--card-bg-white);
-
-            padding: var(--s0) var(--s1) var(--s0) var(--s0);
-            align-items: flex-start;
-            background: linear-gradient(180deg, rgba(0, 40, 95, 0.00) 53.55%, #00285F 99.65%), url("/assets/images/dwds/card-header-bg-small.webp") center / cover no-repeat, #00285F;
-            font-weight: var(--font-weight-bold);
-            color: var(--header-text-colour);
-            border-radius: var(--border-radius) var(--border-radius) 0 0;
-            overflow: hidden;
-
-            .card-subtitle {
-                font-size: var(--text-large);
-                color: var(--header-text-colour);
-            }
-
-            h2,
-            h3 {
-                color: var(--header-text-colour);
-            }
-        }
-
-        .card-main {
-            flex-grow: 1;
-
-            display: flex;
-            flex-direction: column;
-
-            > img {
-                width: 100%;
-                height: auto;
-                align-self: stretch;
-                object-fit: cover;
-            }
-
-            .card-content {
-                flex-grow: 1;
-
-                display: flex;
-                flex-direction: column;
-
-                .card-body-stack {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: flex-start;
-                }
-
-                .card-body-stack > * {
-                    margin-block: 0;
-                }
-
-                .card-body-stack > * + * {
-                    margin-block-start: var(--card-body-stack-space);
-                }
-
-                .card-body {
-                    flex-grow: 1;
-                    padding: var(--s0);
-                    font-size: var(--text-large);
-                    line-height: var(--font-lineheight-body);
-
-                    h2,
-                    h3 {
-                        color: var(--card-body-heading-color);
-                    }
-
-                    .post-title-container {
-                        display: flex;
-                        flex-direction: column;
-                        gap: var(--s-5)
-                    }
-                
-                    .post-title {
-                        margin: 0;
-                    }
-                }
-            }
-
-            .card-footer {
-                padding: 0 var(--s0) var(--s0) var(--s0);
-                color: var(--color-text-secondary);
-
-                .card-comment-section {
-                    margin-top: var(--card-comment-section-margin-top);
-                }
-
-                .comment-icon {
-                    vertical-align: text-bottom;
-                }
-            }
-        }
-    }
-}
-
-.dwds-card.card-without-shadow {
-    --card-bottom-border-height: 0px;
-}
-
-@container card (width > 60ch) {
-    .dwds-card.card-with-image {
-        .card-main {
-            display: grid;
-            grid-template-columns: 1fr 2fr;
-            grid-template-rows: 1fr;
-        }
-
-        &.image-right {
-            .card-content {
-                grid-column: 1;
-                grid-row: 1;
-            }
-
-            .card-main > img {
-                grid-column: 2;
-                grid-row: 1;
-            }
-        }
-    }
-}
diff --git a/src/dw_design_system/dwds/elements/information_panel.scss b/src/dw_design_system/dwds/elements/information_panel.scss
deleted file mode 100644
index dd9884bb1..000000000
--- a/src/dw_design_system/dwds/elements/information_panel.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.dwds-card.dwds-information-panel {
-    --card-body-heading-color: var(--color-text);
-    --card-body-bg-color: #EEF2F6;
-    --card-bottom-border-height: 0px;
-    padding: var(--s0);
-    align-self: flex-start;
-
-    p,
-    div,
-    a {
-        margin-bottom: var(--s-5);
-        margin-top: var(--s-5);
-    }
-
-    h3 {
-        margin-top: 0;
-        margin-bottom: var(--s-5);
-    }
-
-    h4 {
-        margin: 0;
-    }
-}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/elements/ribbon.js b/src/dw_design_system/dwds/elements/ribbon.js
new file mode 100644
index 000000000..d9b1fc6dc
--- /dev/null
+++ b/src/dw_design_system/dwds/elements/ribbon.js
@@ -0,0 +1,13 @@
+function setRibbonMainHeight(ribbonMain) {
+    var ribbonMainHeight = ribbonMain.getBoundingClientRect().height;
+    ribbonMain.style.setProperty('--ribbon-main-height', ribbonMainHeight + 'px');
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('.ribbon-main').forEach(function (ribbonMain) {
+        setRibbonMainHeight(ribbonMain);
+        window.addEventListener('resize', function () {
+            setRibbonMainHeight(ribbonMain);
+        });
+    });
+});
diff --git a/src/dw_design_system/dwds/elements/ribbon.scss b/src/dw_design_system/dwds/elements/ribbon.scss
index 56f67d5c0..e0c15438b 100644
--- a/src/dw_design_system/dwds/elements/ribbon.scss
+++ b/src/dw_design_system/dwds/elements/ribbon.scss
@@ -1,6 +1,7 @@
 .dwds-ribbon {
     --ribbon-background-blue: var(--dbt-blue);
     --ribbon-background-red: var(--dbt-red);
+    --ribbon-background: var(--ribbon-background-blue);
     --ribbon-padding: var(--s-4);
     --ribbon-padding-right: var(--s-2);
     --ribbon-left-space: var(--s2);
@@ -8,6 +9,8 @@
     --ribbon-line-height: var(--font-lineheight-headings);
     --ribbon-border-radius: var(--border-radius);
 
+    --ribbon-main-height: 0px;
+
     display: inline-block;
     font-size: var(--text-large);
     font-weight: var(--font-weight-bold);
@@ -15,13 +18,24 @@
     .ribbon-main {
         padding: var(--ribbon-padding) var(--ribbon-padding-right) var(--ribbon-padding) var(--ribbon-left-space);
         margin-left: calc(var(--ribbon-left-space) * -1);
-        border-radius: var(--ribbon-border-radius);
+        border-radius: 0 var(--ribbon-border-radius) var(--ribbon-border-radius) 0;
         color: var(--ribbon-text-colour);
-        background: var(--ribbon-background-blue);
+        background: var(--ribbon-background);
         width: fit-content;
     }
 
     .ribbon-red {
-        background: var(--ribbon-background-red);
+        --ribbon-background: var(--ribbon-background-red);
+    }
+
+    ::before {
+        content: '';
+        position: absolute;
+        width: var(--ribbon-left-space);
+        height: var(--ribbon-main-height);
+        background: var(--ribbon-background);
+        border-radius: var(--ribbon-border-radius) 0 0 var(--ribbon-border-radius);
+        margin-top: calc(var(--ribbon-padding) * -1);
+        transform: translateX(calc(var(--ribbon-left-space) * -1));
     }
 }
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/layouts/content_custom_sidebar.html b/src/dw_design_system/dwds/layouts/content_custom_sidebar.html
new file mode 100644
index 000000000..9bb5c8e06
--- /dev/null
+++ b/src/dw_design_system/dwds/layouts/content_custom_sidebar.html
@@ -0,0 +1,12 @@
+{% load static %}
+
+<div class="content-custom-sidebar-wrapper">
+    <div class="content-custom-sidebar">
+        <img class="content-image"
+             src="{% static '/images/dwds/fallback_image_card.png' %}"
+             alt="Colourful circles on a blue background."
+             height="420"
+             width="240">
+        <div class="content-main box">CONTENT CONTENT CONTENT CONTENT CONTENT</div>
+    </div>
+</div>
diff --git a/src/dw_design_system/dwds/layouts/content_custom_sidebar.scss b/src/dw_design_system/dwds/layouts/content_custom_sidebar.scss
new file mode 100644
index 000000000..38e69d75c
--- /dev/null
+++ b/src/dw_design_system/dwds/layouts/content_custom_sidebar.scss
@@ -0,0 +1,49 @@
+.content-custom-sidebar-wrapper {
+    container-name: custom_sidebar;
+    container-type: inline-size;
+}
+
+.content-custom-sidebar {
+    --sidebar-gap: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    gap: var(--sidebar-gap);
+
+    height: 100%;
+
+    > .content-image {
+        flex-grow: 1;
+        flex-basis: 0;
+
+        width: 100%;
+        height: auto;
+    }
+
+    > .content-main {
+        flex-grow: 999;
+    }
+}
+
+@container custom_sidebar (width > 600px) {
+    .content-custom-sidebar {
+        flex-direction: row;
+
+        > .content-image {
+            width: 30ch;
+        }
+
+        > .content-main {
+            > .content-footer {
+                margin-top: unset;
+            }
+        }
+    }
+
+    .content-custom-sidebar.large {
+        > .content-image {
+            flex-basis: 100%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/layouts/content_grid.html b/src/dw_design_system/dwds/layouts/content_grid.html
new file mode 100644
index 000000000..28a9700a0
--- /dev/null
+++ b/src/dw_design_system/dwds/layouts/content_grid.html
@@ -0,0 +1,3 @@
+<div class="content-grid grid-cards">
+    {% for _ in content_items %}<div class="box"></div>{% endfor %}
+</div>
diff --git a/src/dw_design_system/dwds/layouts/content_grid.scss b/src/dw_design_system/dwds/layouts/content_grid.scss
new file mode 100644
index 000000000..54f1f24b0
--- /dev/null
+++ b/src/dw_design_system/dwds/layouts/content_grid.scss
@@ -0,0 +1,59 @@
+.content-grid {
+    display: grid;
+    grid-gap: var(--space);
+}
+
+.content-grid.image-left,
+.content-grid.image-right {
+    grid-gap: 0;
+}
+
+@container content_item (width > 60ch) {
+
+    .content-grid.image-left,
+    .content-grid.image-right {
+        grid-gap: 0;
+        grid-template-rows: 1fr;
+
+        > .content-image {
+            object-fit: cover;
+            object-position: center;
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    .content-grid.image-left {
+        grid-template-columns: 1fr 2fr;
+
+        > .content-main {
+            grid-row: 1;
+            grid-column: 2;
+        }
+
+        > .content-image {
+            grid-row: 1;
+            grid-column: 1;
+        }
+    }
+
+    .content-grid.image-right {
+        grid-template-columns: 2fr 1fr;
+
+        > .content-main {
+            grid-row: 1;
+            grid-column: 1;
+        }
+
+        > .content-image {
+            grid-row: 1;
+            grid-column: 2;
+        }
+    }
+}
+
+@supports (width: min(250px, 100%)) {
+    .grid-cards {
+        grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min-width), 100%), 1fr));
+    }
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/layouts/content_item_card.html b/src/dw_design_system/dwds/layouts/content_item_card.html
new file mode 100644
index 000000000..b8a035e75
--- /dev/null
+++ b/src/dw_design_system/dwds/layouts/content_item_card.html
@@ -0,0 +1 @@
+<div class="dwds-content-item-card">{% include "dwds/elements/content_item.html" %}</div>
diff --git a/src/dw_design_system/dwds/layouts/content_item_card.scss b/src/dw_design_system/dwds/layouts/content_item_card.scss
new file mode 100644
index 000000000..f09f54055
--- /dev/null
+++ b/src/dw_design_system/dwds/layouts/content_item_card.scss
@@ -0,0 +1,17 @@
+.dwds-content-item-card {
+    --content-item-card-radius: var(--border-radius);
+    --card-bottom-border-height: 5px;
+
+    display: flex;
+    box-shadow: 0 var(--card-bottom-border-height) 0 rgba(0, 0, 0, 0.2);
+    border-radius: var(--content-item-card-radius);
+    overflow: hidden;
+
+    > div {
+        flex-grow: 1;
+    }
+}
+
+.dwds-content-item-card.no-shadow {
+    --card-bottom-border-height: 0;
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/layouts/content_sidebar.html b/src/dw_design_system/dwds/layouts/content_sidebar.html
new file mode 100644
index 000000000..98f1d26bc
--- /dev/null
+++ b/src/dw_design_system/dwds/layouts/content_sidebar.html
@@ -0,0 +1,3 @@
+<div class="content-sidebar">
+    {% for _ in content_items %}<div class="box"></div>{% endfor %}
+</div>
diff --git a/src/dw_design_system/dwds/layouts/content_sidebar.scss b/src/dw_design_system/dwds/layouts/content_sidebar.scss
new file mode 100644
index 000000000..e40f3ac4a
--- /dev/null
+++ b/src/dw_design_system/dwds/layouts/content_sidebar.scss
@@ -0,0 +1,35 @@
+.content-sidebar,
+.content-sidebar-right {
+    --sidebar-gap: var(--space);
+    --sidebar-size: 300px;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sidebar-gap);
+}
+
+.content-sidebar {
+    > :first-child {
+        flex-grow: 1;
+        flex-basis: var(--sidebar-size);
+    }
+
+    > :last-child {
+        flex-grow: 999;
+        flex-basis: 0;
+        min-inline-size: 40%;
+    }
+}
+
+.content-sidebar-right {
+    > :first-child {
+        flex-grow: 999;
+        flex-basis: 0;
+        min-inline-size: 40%;
+    }
+
+    > :last-child {
+        flex-grow: 1;
+        flex-basis: var(--sidebar-size);
+    }
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/layouts/content_stack.html b/src/dw_design_system/dwds/layouts/content_stack.html
new file mode 100644
index 000000000..dc3ae6c9d
--- /dev/null
+++ b/src/dw_design_system/dwds/layouts/content_stack.html
@@ -0,0 +1,3 @@
+<div class="content-stack">
+    {% for _ in content_items %}<div class="box"></div>{% endfor %}
+</div>
diff --git a/src/dw_design_system/dwds/layouts/content_stack.scss b/src/dw_design_system/dwds/layouts/content_stack.scss
new file mode 100644
index 000000000..ea8001aea
--- /dev/null
+++ b/src/dw_design_system/dwds/layouts/content_stack.scss
@@ -0,0 +1,19 @@
+.content-stack {
+    --content-stack-gap: var(--s0);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.content-stack.large {
+    --content-stack-gap: var(--space);
+}
+
+.content-stack > * {
+    margin-block: 0;
+}
+
+.content-stack > * + * {
+    margin-block-start: var(--content-stack-gap);
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/layouts/content_switcher.html b/src/dw_design_system/dwds/layouts/content_switcher.html
new file mode 100644
index 000000000..d29a1248e
--- /dev/null
+++ b/src/dw_design_system/dwds/layouts/content_switcher.html
@@ -0,0 +1,3 @@
+<div class="content-switcher max-3">
+    {% for _ in content_items %}<div class="box"></div>{% endfor %}
+</div>
diff --git a/src/dw_design_system/dwds/layouts/content_switcher.scss b/src/dw_design_system/dwds/layouts/content_switcher.scss
new file mode 100644
index 000000000..0b61ce575
--- /dev/null
+++ b/src/dw_design_system/dwds/layouts/content_switcher.scss
@@ -0,0 +1,20 @@
+.content-switcher {
+    --content-switcher-min-width: 36rem;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space);
+
+    > * {
+        flex-grow: 1;
+        flex-basis: calc((var(--content-switcher-min-width) - 100%) * 999);
+    }
+}
+
+.content-switcher.max-3 {
+
+    > :nth-last-child(n+ 4),
+    > :nth-last-child(n+ 4) ~ * {
+        flex-basis: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/styles/layout-primitives.scss b/src/dw_design_system/dwds/styles/layout-primitives.scss
index a15014cb8..e57ce47d6 100644
--- a/src/dw_design_system/dwds/styles/layout-primitives.scss
+++ b/src/dw_design_system/dwds/styles/layout-primitives.scss
@@ -40,58 +40,6 @@
   }
 
 
-  // Sidebar
-  // https://every-layout.dev/layouts/sidebar/
-  .with-sidebar,
-  .with-sidebar-right {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space);
-  }
-
-  .with-sidebar > :first-child {
-    flex-grow: 1;
-  }
-
-  .with-sidebar > :last-child {
-    flex-basis: 0;
-    flex-grow: 999;
-    min-inline-size: 50%;
-  }
-
-  .with-sidebar-right > :last-child {
-    // @TODO temporary - this works for 2-col in the GDS fixed container
-    flex-basis: 300px;
-    flex-grow: 1;
-  }
-
-
-  .with-sidebar-right > :first-child {
-    flex-basis: 0;
-    flex-grow: 999;
-    min-inline-size: 50%;
-  }
-
-  // Switcher
-  // https://every-layout.dev/layouts/switcher/
-
-  .switcher {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space);
-  }
-
-  .switcher > * {
-    flex-grow: 1;
-    flex-basis: calc((30rem - 100%) * 999);
-  }
-
-  .switcher > :nth-last-child(n+ 5),
-  .switcher > :nth-last-child(n+ 5) ~ * {
-    flex-basis: 100%;
-  }
-
-
   // Cover
   // https://every-layout.dev/layouts/cover/
 
diff --git a/src/dw_design_system/dwds/styles/layout.scss b/src/dw_design_system/dwds/styles/layout.scss
index 656411cac..9d6f4d480 100644
--- a/src/dw_design_system/dwds/styles/layout.scss
+++ b/src/dw_design_system/dwds/styles/layout.scss
@@ -9,43 +9,20 @@
 }
 
 .dwds {
-    // Stack
-    // https://every-layout.dev/layouts/stack/
-
-    .stack {
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-    }
-
-    .stack > * {
-        margin-block: 0;
-    }
-
-    .stack > * + * {
-        margin-block-start: var(--space);
-    }
-
-    .streamfield-content-stack > * + * {
-        margin-block-start: var(--s0);
-    }
-
-
-    // Grid
-    // https://every-layout.dev/layouts/grid/
-
-    .grid {
-        display: grid;
-        grid-gap: var(--space);
-    }
-
-    @supports (width: min(250px, 100%)) {
-        .grid-multiple-columns {
-            grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
+    .streamfield-content-stack {
+        > * + * {
+            margin-block-start: var(--s0);
         }
 
-        .grid-cards {
-            grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min-width), 100%), 1fr));
+        .ws-streamfield-content__image {
+            margin-left: 0;
+            margin-right: 0;
+
+            img {
+                max-inline-size: 100%;
+                width: 100%;
+                height: auto;
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/styles/temporary-base.scss b/src/dw_design_system/dwds/styles/temporary-base.scss
index 028a4d700..eafe4410f 100644
--- a/src/dw_design_system/dwds/styles/temporary-base.scss
+++ b/src/dw_design_system/dwds/styles/temporary-base.scss
@@ -31,9 +31,11 @@ body {
     header,
     nav,
     main,
+    img,
     footer,
     hr,
-    article {
+    article,
+    figure {
         max-inline-size: none;
     }
 
@@ -67,7 +69,7 @@ body {
     a.no-underline {
         text-decoration: none;
     }
-    
+
     a.no-underline:focus,
     a.no-underline:active,
     a:focus,
@@ -95,6 +97,21 @@ body {
         border-left: 0;
         color: var(--color-hr);
     }
+
+    dl {
+        dt {
+            margin-top: var(--s-1);
+
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+
+        dd {
+            margin-left: 0;
+            font-weight: var(--font-weight-bold);
+        }
+    }
 }
 
 .dwds {
diff --git a/src/dw_design_system/dwds/styles/variables.scss b/src/dw_design_system/dwds/styles/variables.scss
index 44ecdfc1b..01822fed4 100644
--- a/src/dw_design_system/dwds/styles/variables.scss
+++ b/src/dw_design_system/dwds/styles/variables.scss
@@ -67,7 +67,6 @@
   --space: var(--s3);
   --padding-button: 11px 20px 11px;
   --padding-button-inline: 6px 15px 5px;
-  --card-comment-section-margin-top: 8px;
 
   // Text size
   --text-small: var(--s-2);
@@ -105,7 +104,6 @@
 
   // Card
   --card-min-width: 15rem;
-  --card-comment-section-margin-top: 8px;
   --card-bg-white: white;
   --card-bg-blue: var(--dbt-blue);
   --card-bg-red: var(--dbt-red);
diff --git a/src/dw_design_system/dwds/stylesheet.scss b/src/dw_design_system/dwds/stylesheet.scss
index 3f3f3d5f2..a9d33d10e 100644
--- a/src/dw_design_system/dwds/stylesheet.scss
+++ b/src/dw_design_system/dwds/stylesheet.scss
@@ -7,24 +7,37 @@
 // @forward "styles/base";  // Use once we migrate everything to the new approach
 @forward "styles/temporary-base"; // Remove this once we switch to the above base.scss
 
+// New
+@forward "utils";
+
 // Components
-@forward "components/banner_card";
-@forward "components/card_group";
-@forward "components/engagement_card";
+@forward "components/box";
+@forward "components/comment_section";
+@forward "components/content_list";
+@forward "components/link_action";
 @forward "components/link_list";
 @forward "components/link_navigate";
-@forward "components/navigation_card";
-@forward "components/one_up_card";
+@forward "components/one_up";
 @forward "components/pagination";
 @forward "components/promo";
 
 // Elements
 @forward "elements/button";
-@forward "elements/extendable/card";
+@forward "elements/content_header";
+@forward "elements/content_image";
+@forward "elements/content_item";
+@forward "elements/content_main";
 @forward "elements/icon";
-@forward "elements/information_panel";
 @forward "elements/navigational_link";
 @forward "elements/ribbon";
 
+// Layouts
+@forward "layouts/content_sidebar";
+@forward "layouts/content_grid";
+@forward "layouts/content_stack";
+@forward "layouts/content_switcher";
+@forward "layouts/content_item_card";
+@forward "layouts/content_custom_sidebar";
+
 // App specific stylesheets
 @forward "../../interactions/static/interactions/interactions.scss";
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/utils.scss b/src/dw_design_system/dwds/utils.scss
new file mode 100644
index 000000000..fbea025df
--- /dev/null
+++ b/src/dw_design_system/dwds/utils.scss
@@ -0,0 +1,31 @@
+.dwds-sr-only {
+    // Visually hidden but accessible to screen readers
+    // See: https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/helpers/_visually-hidden.scss
+
+    position: absolute !important;
+
+    width: 1px !important;
+    height: 1px !important;
+    // If margin is set to a negative value it can cause text to be announced in
+    // the wrong order in VoiceOver for OSX
+    margin: 0 !important;
+    padding: 0 !important;
+
+    overflow: hidden !important;
+
+    // `clip` is needed for IE11 support
+    clip: rect(0 0 0 0) !important;
+    clip-path: inset(50%) !important;
+
+    border: 0 !important;
+
+    // For long content, line feeds are not interpreted as spaces and small width
+    // causes content to wrap 1 word per line:
+    // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+    white-space: nowrap !important;
+
+    // Prevent users from selecting or copying visually-hidden text. This prevents
+    // a user unintentionally copying more text than they intended and needing to
+    // manually trim it down again.
+    user-select: none;
+}
\ No newline at end of file
diff --git a/src/dw_design_system/templates/dw_design_system/components.html b/src/dw_design_system/templates/dw_design_system/dwds_components.html
similarity index 89%
rename from src/dw_design_system/templates/dw_design_system/components.html
rename to src/dw_design_system/templates/dw_design_system/dwds_components.html
index c6da1b8b1..6093ef9e8 100644
--- a/src/dw_design_system/templates/dw_design_system/components.html
+++ b/src/dw_design_system/templates/dw_design_system/dwds_components.html
@@ -1,17 +1,17 @@
 {% extends "dwds_content.html" %}
 
 {% block title %}
-    DW Design System components
+    DW Design System {{ template_type }}
 {% endblock title %}
 
 {% block page_title %}
     <br />
-    <h1>DW Design System components</h1>
+    <h1>DW Design System {{ template_type }}</h1>
 {% endblock page_title %}
 
 {% block primary_content %}
-    {% for component in components %}
-        {% include "dw_design_system/partials/component.html" %}
+    {% for template in templates %}
+        {% include "dw_design_system/partials/component.html" with component=template new=template.new %}
     {% endfor %}
 {% endblock primary_content %}
 
diff --git a/src/dw_design_system/templates/dw_design_system/layouts.html b/src/dw_design_system/templates/dw_design_system/layouts.html
new file mode 100644
index 000000000..b2c067208
--- /dev/null
+++ b/src/dw_design_system/templates/dw_design_system/layouts.html
@@ -0,0 +1,20 @@
+{% extends "dwds_content.html" %}
+
+{% block title %}
+    DW Design System layouts
+{% endblock title %}
+
+{% block page_title %}
+    <br />
+    <h1>DW Design System layouts</h1>
+{% endblock page_title %}
+
+{% block primary_content %}
+    <h1>Layouts</h1>
+
+    {% for layout in layouts %}
+        <h2>{{ layout.name }}</h2>
+        {% include layout.template with content_items=layout.content_items %}
+    {% endfor %}
+
+{% endblock primary_content %}
diff --git a/src/dw_design_system/templates/dw_design_system/partials/component.html b/src/dw_design_system/templates/dw_design_system/partials/component.html
index e288148c9..633a5d7fd 100644
--- a/src/dw_design_system/templates/dw_design_system/partials/component.html
+++ b/src/dw_design_system/templates/dw_design_system/partials/component.html
@@ -13,7 +13,7 @@ <h3>{{ component.name }}</h3>
     <h4>Context</h4>
     <textarea class="component-context"
               name="context"
-              hx-post="{% url 'dwds-component-get' %}"
+              hx-post="{% url 'dwds-template-get' template_type %}"
               hx-vals='js:{template: "{{ component.template }}", context: getComponentContext(event),}'
               hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
               hx-target="previous .component-container">{{ component.context_json }}</textarea>
diff --git a/src/dw_design_system/templatetags/dw_design_system.py b/src/dw_design_system/templatetags/dw_design_system.py
index 5727418b9..db766a5a8 100644
--- a/src/dw_design_system/templatetags/dw_design_system.py
+++ b/src/dw_design_system/templatetags/dw_design_system.py
@@ -7,5 +7,4 @@
 @register.simple_tag(takes_context=True)
 def render_component(context, template_name, component_context):
     component_template: template.Template = template.loader.get_template(template_name)
-    component_context.update(request=context["request"])
     return component_template.render(context=component_context)
diff --git a/src/dw_design_system/urls.py b/src/dw_design_system/urls.py
index 881386426..08ea39f83 100644
--- a/src/dw_design_system/urls.py
+++ b/src/dw_design_system/urls.py
@@ -1,10 +1,34 @@
-from django.urls import path
+from django.http import HttpResponseRedirect
+from django.urls import path, reverse
 
 from dw_design_system import views
 
 
 urlpatterns = [
     path("styles/", views.styles, name="dwds-styles"),
-    path("", views.components, name="dwds-components"),
-    path("get/", views.get_component, name="dwds-component-get"),
+    path("layouts/", views.layouts, name="dwds-layouts"),
+    path(
+        "",
+        lambda request: HttpResponseRedirect(reverse("dwds-components")),
+    ),
+    path(
+        "get/<str:template_type>/",
+        views.get_dwds_template,
+        name="dwds-template-get",
+    ),
+    path(
+        "content/",
+        views.dwds_templates("content"),
+        name="dwds-content",
+    ),
+    path(
+        "components/",
+        views.dwds_templates("components"),
+        name="dwds-components-new",
+    ),
+    path(
+        "components/content/",
+        views.dwds_templates("components_content"),
+        name="dwds-components-content",
+    ),
 ]
diff --git a/src/dw_design_system/utils.py b/src/dw_design_system/utils.py
index 80288d93d..e058f3ca4 100644
--- a/src/dw_design_system/utils.py
+++ b/src/dw_design_system/utils.py
@@ -2,10 +2,10 @@
 from json import JSONDecoder, scanner
 
 from django.core.paginator import Page, Paginator
+from django.http import HttpRequest
 from django.utils import timezone
 from wagtail.images.models import Image
 
-from home.templatetags.cards import pages_to_cards
 from news.models import NewsPage
 
 
@@ -15,120 +15,148 @@
 RANGE_STR = "Range"
 
 
-def get_components():
-    thumbnail_file = Image.objects.first()
+def get_dwds_templates(template_type, request: HttpRequest):
+    thumbnail_file = Image.objects.last()
     pages = Paginator(NewsPage.objects.all(), 2).page(1)
-    return [
-        {
-            "name": "Card",
-            "template": "dwds/elements/extendable/card.html",
-            "context": {},
-        },
-        {
-            "name": "Banner Card",
-            "template": "dwds/components/banner_card.html",
-            "context": {
-                "alert": False,
-                "link": "https://www.gov.uk",
-                "text": "This is a banner card for GOV.UK",
+
+    dwds_templates = {
+        "content": [
+            {
+                "name": "Content Header",
+                "template": "dwds/elements/content_header.html",
+                "context": {},
+            },
+            {
+                "name": "Content Image",
+                "template": "dwds/elements/content_image.html",
+                "context": {
+                    "content_image": thumbnail_file,
+                },
+            },
+            {
+                "name": "Content Main",
+                "template": "dwds/elements/content_main.html",
+                "context": {},
+            },
+            {
+                "name": "Content Item",
+                "template": "dwds/elements/content_item.html",
+                "context": {},
             },
-        },
-        {
-            "name": "CTA Card",
-            "template": "dwds/components/cta_card.html",
-            "context": {
-                "link": "https://www.gov.uk",
-                "title": "This is a CTA card for GOV.UK",
-                "description": "This is a description for the CTA card",
+            {
+                "name": "Content Item Card",
+                "template": "dwds/layouts/content_item_card.html",
+                "context": {},
             },
-        },
-        {
-            "name": "Engagement Card",
-            "template": "dwds/components/engagement_card.html",
-            "context": {
-                "url": "https://www.gov.uk",
-                "title": "This is an engagement card for GOV.UK",
-                "excerpt": "This is an excerpt for the engagement card",
-                "author": "John Doe",
-                "date": timezone.now(),
-                "thumbnail": thumbnail_file,
+        ],
+        "components": [
+            {
+                "name": "Action Link",
+                "template": "dwds/components/link_action.html",
+                "context": {
+                    "link_text": "Action Link",
+                    "link_url": "https://www.gov.uk",
+                    "left": True,
+                    "right": True,
+                },
             },
-        },
-        {
-            "name": "Card Group",
-            "template": "dwds/components/card_group.html",
-            "context": {
-                "card_group_title": "Latest DBT news",
-                "cards": pages_to_cards(
-                    NewsPage.objects.all().annotate_with_comment_count()[:3]
-                ),
-                "footer_link": "/news-and-views/",
-                "footer_link_text": "View all news",
-                "show_hr": True,
+            {
+                "name": "Link navigate",
+                "template": "dwds/components/link_navigate.html",
+                "context": {
+                    "previous_url": "https://www.gov.uk",
+                    "previous_text": "Previous",
+                    "next_url": "https://www.gov.uk",
+                    "next_text": "Next",
+                },
             },
-        },
-        {
-            "name": "Link List",
-            "template": "dwds/components/link_list.html",
-            "context": {
-                "title": "Link List",
-                "description": "A list of links",
-                "list": [
-                    {
-                        "link": "https://www.gov.uk",
-                        "text": f"Link {i + 1} for GOV.UK",
-                    }
-                    for i in range(10)
-                ],
+            {
+                "name": "Banner",
+                "template": "dwds/components/banner.html",
+                "context": {
+                    "alert": False,
+                    "link": "https://www.gov.uk",
+                    "text": (
+                        "This is a banner for GOV.UK, it can be really long or"
+                        " really short. In this example we have a long banner to"
+                        " show how it looks with a lot of text."
+                    ),
+                },
             },
-        },
-        {
-            "name": "Navigation Card",
-            "template": "dwds/components/navigation_card.html",
-            "context": {
-                "url": "https://www.gov.uk",
-                "title": "Navigation Card",
-                "summary": "This is a summary for the navigation card",
+            {
+                "name": "CTA",
+                "template": "dwds/components/cta.html",
+                "context": {
+                    "highlight": True,
+                    "url": "https://www.gov.uk",
+                    "title": "This is a CTA for GOV.UK",
+                    "description": "This is a description for the CTA",
+                },
             },
-        },
-        {
-            "name": "One Up Card",
-            "template": "dwds/components/one_up_card.html",
-            "context": {
-                "url": "https://www.gov.uk",
-                "title": "One Up Card",
-                "excerpt": "This is an excerpt for the one up card",
-                "date": timezone.now(),
-                "thumbnail": thumbnail_file,
+            {
+                "name": "Link list",
+                "template": "dwds/components/link_list.html",
+                "context": {
+                    "title": "Link List",
+                    "description": "A list of links",
+                    "list": [
+                        {
+                            "link": "https://www.gov.uk",
+                            "text": f"Link {i + 1} for GOV.UK",
+                        }
+                        for i in range(10)
+                    ],
+                },
             },
-        },
-        {
-            "name": "Pagination",
-            "template": "dwds/components/pagination.html",
-            "context": {"pages": pages},
-        },
-        {
-            "name": "Link navigation",
-            "template": "dwds/components/link_navigate.html",
-            "context": {
-                "previous_url": "https://www.gov.uk",
-                "previous_text": "Previous",
-                "next_url": "https://www.gov.uk",
-                "next_text": "Next",
+            {
+                "name": "Engagement",
+                "template": "dwds/components/engagement.html",
+                "context": {
+                    "url": "https://www.gov.uk",
+                    "title": "This is engaging content for GOV.UK with a really long title to show what a long title looks like",
+                    "excerpt": "This is an excerpt for the engaging content. This excerpt is longer than it should be for test data.",
+                    "author": "John Doe",
+                    "date": timezone.now(),
+                    "thumbnail": thumbnail_file,
+                    "comment_count": 10,
+                    "created_date": timezone.now(),
+                    "updated_date": timezone.now(),
+                },
             },
-        },
-        {
-            "name": "Promo Banner",
-            "template": "dwds/components/promo.html",
-            "context": {
-                "ribbon_text": "One DBT",
-                "description": "We value your ideas to help make it simpler to work at DBT, make a difference and celebrate innovation.",
-                "link_text": "Collaborate and connect",
-                "link_url": "http://localhost:8000/dwds/",
-                "background_image": thumbnail_file,
+            {
+                "name": "One Up",
+                "template": "dwds/components/one_up.html",
+                "context": {
+                    "url": "https://www.gov.uk",
+                    "title": "One Up",
+                    "excerpt": "This is an excerpt for the one up content",
+                    "date": timezone.now(),
+                    "thumbnail": thumbnail_file,
+                    "comment_count": 10,
+                    "created_date": timezone.now(),
+                    "updated_date": timezone.now(),
+                },
             },
-        },
-    ]
+            {
+                "name": "Promo Banner",
+                "template": "dwds/components/promo.html",
+                "context": {
+                    "ribbon_text": "One DBT",
+                    "description": "We value your ideas to help make it simpler to work at DBT, make a difference and celebrate innovation.",
+                    "link_text": "Collaborate and connect",
+                    "link_url": "http://localhost:8000/dwds/",
+                    "background_image": thumbnail_file,
+                },
+            },
+            {
+                "name": "Pagination",
+                "template": "dwds/components/pagination.html",
+                "context": {"pages": pages, "request": request},
+            },
+        ],
+        "layouts": [],
+    }
+    return dwds_templates[template_type]
 
 
 def to_json(val):
@@ -147,9 +175,6 @@ def to_json(val):
 
 
 def parse_str(val):
-    if " " not in val:
-        return val
-
     if val.startswith(DATETIME_STR):
         return datetime.fromisoformat(val.split(" ")[1])
     if val.startswith(IMAGE_STR):
diff --git a/src/dw_design_system/views.py b/src/dw_design_system/views.py
index d8ef71db8..bb1886b5d 100644
--- a/src/dw_design_system/views.py
+++ b/src/dw_design_system/views.py
@@ -4,7 +4,11 @@
 from django.shortcuts import render
 
 from dw_design_system.templatetags.dw_design_system import render_component
-from dw_design_system.utils import CustomJSONDecoder, get_components, to_json
+from dw_design_system.utils import (
+    CustomJSONDecoder,
+    get_dwds_templates,
+    to_json,
+)
 
 
 def styles(request: HttpRequest) -> HttpResponse:
@@ -45,44 +49,93 @@ def styles(request: HttpRequest) -> HttpResponse:
     )
 
 
-def components(request: HttpRequest) -> HttpResponse:
-    components = []
-    for component in get_components():
-        new_component = component.copy()
-        new_component["request"] = request
-        new_component.update(
-            context_json=json.dumps(
-                new_component["context"],
+def dwds_templates(template_type):
+    def templates(request: HttpRequest) -> HttpResponse:
+        templates = []
+        for template in get_dwds_templates(template_type, request):
+            new_template_context = template["context"].copy()
+
+            if "request" in new_template_context:
+                del new_template_context["request"]
+
+            context_json = json.dumps(
+                new_template_context,
                 indent=4,
                 default=to_json,
             )
+            template.update(context_json=context_json)
+            templates.append(template)
+
+        return render(
+            request,
+            "dw_design_system/dwds_components.html",
+            {
+                "template_type": template_type,
+                "templates": templates,
+            },
         )
-        components.append(new_component)
 
-    return render(
-        request,
-        "dw_design_system/components.html",
-        {"components": components},
-    )
+    return templates
 
 
-def get_component(request: HttpRequest) -> HttpResponse:
-    component_template = request.POST.get("template")
+def get_dwds_template(request: HttpRequest, template_type) -> HttpResponse:
+    template_str = request.POST.get("template")
     new_context_str = request.POST.get("context")
     new_context = json.loads(new_context_str, cls=CustomJSONDecoder)
-    component = next(
-        (c for c in get_components() if c["template"] == component_template), None
+    template = next(
+        (
+            t
+            for t in get_dwds_templates(template_type, request)
+            if t["template"] == template_str
+        ),
+        None,
     )
 
-    if not component:
+    if not template:
         return HttpResponse(status=404)
 
-    context = component["context"]
+    context = template["context"]
     if new_context:
         context = new_context
 
     context["request"] = request
+    context["template_type"] = template_type
 
     return HttpResponse(
-        render_component(request, component["template"], context),
+        render_component(request, template["template"], context),
+    )
+
+
+def layouts(request: HttpRequest) -> HttpResponse:
+    layouts = [
+        {
+            "name": "Content stack",
+            "template": "dwds/layouts/content_stack.html",
+            "content_items": range(3),
+        },
+        {
+            "name": "Content sidebar",
+            "template": "dwds/layouts/content_sidebar.html",
+            "content_items": range(2),
+        },
+        {
+            "name": "Content grid",
+            "template": "dwds/layouts/content_grid.html",
+            "content_items": range(6),
+        },
+        {
+            "name": "Content switcher",
+            "template": "dwds/layouts/content_switcher.html",
+            "content_items": range(3),
+        },
+        {
+            "name": "Content custom sidebar",
+            "template": "dwds/layouts/content_custom_sidebar.html",
+        },
+    ]
+
+    return render(
+        request,
+        "dw_design_system/layouts.html",
+        {"layouts": layouts},
     )
diff --git a/src/events/templates/events/event_page.html b/src/events/templates/events/event_page.html
index e2b22888c..1a136a763 100644
--- a/src/events/templates/events/event_page.html
+++ b/src/events/templates/events/event_page.html
@@ -6,76 +6,84 @@
 {% endblock main_content_classes %}
 
 {% block primary_content %}
-    <div class="with-sidebar-right">
-        <div class="stack streamfield-content-stack">
-            {% image page.preview_image fill-465x265 width=None height=None style="border-radius: var(--border-radius);" %}
-            {% for block in page.body %}
-                {% include_block block %}
-            {% endfor %}
+    <div class="content-sidebar-right">
+        <div>
+            <div class="content-stack streamfield-content-stack">
+                {% image page.preview_image fill-465x265 width=None height=None style="border-radius: var(--border-radius);" %}
+                {% for block in page.body %}
+                    {% include_block block %}
+                {% endfor %}
+            </div>
         </div>
-        <div class="dwds-card-wrapper">
-            <div class="dwds-card dwds-information-panel">
-                <div>
-                    <h3>{{ event_date }}</h3>
-                    <h3>{{ event_time }}</h3>
-                </div>
-                {% if is_in_person or is_hybrid %}
-                    <div>
-                        <p>Location</p>
-                        <h4>{{ page.location|default_if_none:"To be confirmed" }}</h4>
-                    </div>
-                    {% if page.location and page.room %}
-                        <div>
-                            <p>Room</p>
-                            <h4>
-                                {{ page.room }}
-                                {% if page.room_capacity %}with {{ page.room_capacity }} seats{% endif %}
-                            </h4>
+        <div>
+            <div class="dwds-content-item-card no-shadow">
+                <div class="content-item">
+                    <div class="content-main info">
+                        <div class="content-body content-stack">
+                            <dl>
+                                <dt class="dwds-sr-only">When</dt>
+                                <dd class="text-xlarge">
+                                    {{ event_date }}
+                                    <br>
+                                    {{ event_time }}
+                                </dd>
+                                {% if is_in_person or is_hybrid %}
+                                    <dt>Location</dt>
+                                    <dd>
+                                        {{ page.location|default_if_none:"To be confirmed" }}
+                                    </dd>
+                                    {% if page.location and page.room %}
+                                        <dt>Room</dt>
+                                        <dd>
+                                            {{ page.room }}
+                                            {% if page.room_capacity %}with {{ page.room_capacity }} seats{% endif %}
+                                        </dd>
+                                        {% if page.room and page.room_capacity %}
+                                            <dt>Capacity</dt>
+                                            <dd>
+                                                {{ page.room_capacity }} seats
+                                            </dd>
+                                        {% endif %}
+                                    {% endif %}
+                                {% endif %}
+                                {% if page.audience %}
+                                    <dt>Audience</dt>
+                                    <dd>
+                                        {{ page.get_audience_display|default_if_none:"-" }}
+                                    </dd>
+                                {% endif %}
+                                <dt>Event type</dt>
+                                <dd>
+                                    {% if is_online or is_in_person %}
+                                        {{ page.get_event_type_display }}
+                                    {% else %}
+                                        In person or online
+                                    {% endif %}
+                                </dd>
+                            </dl>
+                            {% if not page.is_past_event %}
+                                {% if page.offline_event_url and is_in_person or is_hybrid %}
+                                    <a href="{{ page.offline_event_url }}"
+                                       class="dwds-button dwds-button--inline dwds-button--secondary"
+                                       target="_blank">Register to join</a>
+                                {% endif %}
+                                {% if page.online_event_url and is_online or is_hybrid %}
+                                    <a href="{{ page.online_event_url }}"
+                                       class="dwds-button dwds-button--inline dwds-button--secondary"
+                                       target="_blank">Watch event online</a>
+                                {% endif %}
+                                {% if page.submit_questions_url %}
+                                    <a href="{{ page.submit_questions_url }}"
+                                       class="dwds-button dwds-button--inline dwds-button--secondary"
+                                       target="_blank">Submit a question</a>
+                                {% endif %}
+                            {% elif page.event_recording_url %}
+                                <a href="{{ page.event_recording_url }}"
+                                   class="dwds-button dwds-button--inline dwds-button--secondary"
+                                   target="_blank">Watch past event</a>
+                            {% endif %}
                         </div>
-                        {% if page.room and page.room_capacity %}
-                            <div>
-                                <p>Capacity</p>
-                                <h4>{{ page.room_capacity }} seats</h4>
-                            </div>
-                        {% endif %}
-                    {% endif %}
-                {% endif %}
-                {% if page.audience %}
-                    <div>
-                        <p>Audience</p>
-                        <h4>{{ page.get_audience_display|default_if_none:"-" }}</h4>
                     </div>
-                {% endif %}
-                <div>
-                    <p>Event type</p>
-                    {% if is_online or is_in_person %}
-                        <h4>{{ page.get_event_type_display }}</h4>
-                    {% else %}
-                        <h4>In person or online</h4>
-                    {% endif %}
-                </div>
-                <div class="stack">
-                    {% if not page.is_past_event %}
-                        {% if page.offline_event_url and is_in_person or is_hybrid %}
-                            <a href="{{ page.offline_event_url }}"
-                               class="dwds-button dwds-button--inline dwds-button--secondary"
-                               target="_blank">Register to join</a>
-                        {% endif %}
-                        {% if page.online_event_url and is_online or is_hybrid %}
-                            <a href="{{ page.online_event_url }}"
-                               class="dwds-button dwds-button--inline dwds-button--secondary"
-                               target="_blank">Watch event online</a>
-                        {% endif %}
-                        {% if page.submit_questions_url %}
-                            <a href="{{ page.submit_questions_url }}"
-                               class="dwds-button dwds-button--inline dwds-button--secondary"
-                               target="_blank">Submit a question</a>
-                        {% endif %}
-                    {% elif page.event_recording_url %}
-                        <a href="{{ page.event_recording_url }}"
-                           class="dwds-button dwds-button--inline dwds-button--secondary"
-                           target="_blank">Watch past event</a>
-                    {% endif %}
                 </div>
             </div>
         </div>
diff --git a/src/events/templates/events/includes/listing_header.html b/src/events/templates/events/includes/listing_header.html
new file mode 100644
index 000000000..98505f07e
--- /dev/null
+++ b/src/events/templates/events/includes/listing_header.html
@@ -0,0 +1,37 @@
+<div class="dwds-content-item-card no-shadow">
+    <div class="content-item">
+        <div class="content-main highlight">
+            <div class="content-body content-stack large">
+                <form method="get" class="stack">
+                    <div class="switcher">
+                        <h1 style="margin:0;">{{ page_title }}</h1>
+                        <div>
+                            {% include "dwds/components/link_navigate.html" with previous_url=previous_link previous_text="Previous month" next_url=next_link next_text="Next month" %}
+                        </div>
+                    </div>
+                    <hr>
+                    <div class="stack">
+                        <h2>Filter events by</h2>
+                        <div class="switcher">
+                            <div class="stack">
+                                <label for="id_location">Location</label>
+                                {{ events_filters.form.location }}
+                            </div>
+                            <div class="stack">
+                                <label for="id_event_type">Event type</label>
+                                {{ events_filters.form.event_type }}
+                            </div>
+                        </div>
+                    </div>
+                    <hr>
+                    <div>
+                        <input class="dwds-button dwds-button--secondary dwds-button--inline"
+                               type="submit"
+                               value="Apply" />
+                        <a href="?">Reset filters</a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/home/templates/home/home_page.html b/src/home/templates/home/home_page.html
index c168e3fa4..92bed8b3b 100644
--- a/src/home/templates/home/home_page.html
+++ b/src/home/templates/home/home_page.html
@@ -25,44 +25,54 @@
 {% block primary_content %}
     <article>
         <section>
-            <div class="stack">
+            <div class="content-stack large">
                 <!-- User selected top priority page cards -->
                 {% if not is_empty %}
                     {% for pages in pages_by_news_layout %}
-                        <div class="switcher">
-                            {% for page in pages %}
-                                {% page_to_card page as card %}
-
-                                {% if pages|length == 1 %}
-                                    {% include "dwds/components/one_up_card.html" with title=card.title thumbnail=card.thumbnail url=card.url created_date=card.created_date updated_date=card.updated_date comment_count=card.comment_count excerpt=card.excerpt hide_shadow=card.hide_shadow ribbon_text=card.ribbon_text post_title_date=card.post_title_date post_title_time=card.post_title_time %}
-                                {% else %}
-                                    {% include card.template with title=card.title thumbnail=card.thumbnail url=card.url created_date=card.created_date updated_date=card.updated_date comment_count=card.comment_count excerpt=card.excerpt hide_shadow=card.hide_shadow ribbon_text=card.ribbon_text post_title_date=card.post_title_date post_title_time=card.post_title_time %}
-                                {% endif %}
-                            {% endfor %}
-                        </div>
+                        {% if pages %}
+                            <div class="content-switcher max-3">
+                                {% for page in pages %}
+                                    <div class="dwds-content-item-card">
+                                        {% if pages|length == 1 %}
+                                            {% page_to_one_up page %}
+                                        {% else %}
+                                            {% page_to_engagement page %}
+                                        {% endif %}
+                                    </div>
+                                {% endfor %}
+                            </div>
+                        {% endif %}
                     {% endfor %}
                 {% endif %}
 
                 {% if page.promo_enabled %}
-                    {% include 'dwds/components/promo.html' with ribbon_text=page.promo_ribbon_text description=page.promo_description link_url=page.promo_link_url link_text=page.promo_link_text thumbnail=page.promo_image %}
+                    <div class="dwds-content-item-card">
+                        {% include 'dwds/components/promo.html' with ribbon_text=page.promo_ribbon_text description=page.promo_description link_url=page.promo_link_url link_text=page.promo_link_text thumbnail=page.promo_image %}
+                    </div>
                 {% endif %}
 
                 {% if news_items %}
-                    {% pages_to_cards news_items True as news_cards %}
-                    {% include "dwds/components/card_group.html" with card_group_title="Latest DBT news" cards=news_cards footer_link="/news-and-views/" footer_link_text="View all news" show_hr=True show_shadow=True %}
+                    <div class="dwds-content-item-card no-shadow cams-custom-class">
+                        {% include "dwds/components/content_list.html" with title="Latest DBT news" content_items=news_items link_url="/news-and-views/" link_text="View all news" %}
+                    </div>
                 {% endif %}
 
                 {% if events %}
-                    {% pages_to_cards events True as event_cards %}
-                    {% if FEATURE_FLAGS.event_listing %}
-                        {% include "dwds/components/card_group.html" with card_group_title="Events" card_group_link="/events/" card_group_link_text="View all events" cards=event_cards grid=True blue_bg=True %}
-                    {% else %}
-                        {% include "dwds/components/card_group.html" with card_group_title="Events" cards=event_cards grid=True blue_bg=True %}
-                    {% endif %}
+                    <div class="dwds-content-item-card no-shadow">
+                        {% if FEATURE_FLAGS.event_listing %}
+                            {% include "dwds/components/content_list.html" with as_card_grid=True highlight=True title="Events" content_items=events link_url="/events/" link_text="View all events" %}
+                        {% else %}
+                            {% include "dwds/components/content_list.html" with as_card_grid=True highlight=True title="Events" content_items=events %}
+                        {% endif %}
+                    </div>
                 {% endif %}
 
                 {% if not hide_news %}
-                    {% include "dwds/components/link_list.html" with title="DBT news from GOV.UK" list=govuk_feed %}
+                    <div class="dwds-content-item-card">
+                        <div class="content-item">
+                            {% include "dwds/components/link_list.html" with title="DBT news from GOV.UK" list=govuk_feed %}
+                        </div>
+                    </div>
                 {% endif %}
             </div>
         </section>
@@ -71,17 +81,16 @@
 
 {% block secondary_content %}
     <article>
-        <section class="stack">
+        <section class="content-stack">
             {% if active_site_alert %}
-                {% include 'dwds/components/banner_card.html' with text=active_site_alert.banner_text link=active_site_alert.banner_link %}
+                {% include 'dwds/components/banner.html' with text=active_site_alert.banner_text link=active_site_alert.banner_link %}
             {% endif %}
             {% include 'interactions/bookmark_card.html' %}
             {% if quick_links %}
-                {% include "dwds/components/link_list.html" with title="Quick links" list=quick_links %}
+                <div class="dwds-content-item-card">
+                    {% include "dwds/components/link_list.html" with title="Quick links" list=quick_links %}
+                </div>
             {% endif %}
         </section>
-        {% comment %} <section>
-            {% include "dwds/components/link_list.html" with title="Popular pages" list=whats_popular_items %}
-        </section> {% endcomment %}
     </article>
 {% endblock secondary_content %}
diff --git a/src/home/templatetags/cards.py b/src/home/templatetags/cards.py
index 75ad14138..ddcba69f2 100644
--- a/src/home/templatetags/cards.py
+++ b/src/home/templatetags/cards.py
@@ -1,4 +1,6 @@
 from django import template
+from django.template.loader import render_to_string
+from django.utils.safestring import SafeString
 
 from events.models import EventPage
 from events.utils import get_event_date, get_event_time
@@ -8,40 +10,75 @@
 register = template.Library()
 
 
-@register.simple_tag
-def page_to_card(page: NewsPage | EventPage, hide_shadow: bool = False):
-    card_dict = {
+def page_to_display_context(page: NewsPage | EventPage):
+    context = {
         "title": page.title,
         "thumbnail": page.preview_image,
         "url": page.url,
         "excerpt": page.excerpt,
-        "hide_shadow": hide_shadow,
-        "grid": False,
-        "blue_bg": False,
-        "show_hr": False,
         "ribbon_text": None,
-        "template": "dwds/components/engagement_card.html",
     }
 
     if hasattr(page, "ribbon_text"):
-        card_dict["ribbon_text"] = page.ribbon_text
+        context["ribbon_text"] = page.ribbon_text
 
     if issubclass(type(page), NewsPage):
-        card_dict.update(
+        context.update(
             created_date=page.first_published_at,
             updated_date=page.last_published_at,
             comment_count=page.comment_count,
         )
 
     if issubclass(type(page), EventPage):
-        card_dict.update(
+        context.update(
             post_title_date=get_event_date(page),
             post_title_time=get_event_time(page),
         )
 
-    return card_dict
+    return context
+
+
+@register.simple_tag
+def page_to_card(page: NewsPage | EventPage, hide_shadow: bool = False):
+    return {
+        **page_to_display_context(page),
+        "template": "dwds/components/engagement_card.html",
+    }
 
 
 @register.simple_tag
 def pages_to_cards(pages: list[NewsPage | EventPage], hide_shadow: bool = False):
     return [page_to_card(page, hide_shadow=hide_shadow) for page in pages]
+
+
+class RenderableComponent:
+    def __init__(self, template_name: str, context: dict):
+        self.template_name = template_name
+        self.context = context
+
+    def render(self, *args, **kwargs) -> SafeString:
+        return render_to_string(self.template_name, self.context)
+
+    __str__ = render
+    __html__ = render
+
+
+@register.simple_tag
+def page_to_engagement(page: NewsPage | EventPage) -> SafeString:
+    return RenderableComponent(
+        "dwds/components/engagement.html",
+        page_to_display_context(page),
+    )
+
+
+@register.simple_tag
+def pages_to_engagement(pages: list[NewsPage | EventPage]) -> list[RenderableComponent]:
+    return [page_to_engagement(page) for page in pages]
+
+
+@register.simple_tag
+def page_to_one_up(page: NewsPage | EventPage) -> SafeString:
+    return RenderableComponent(
+        "dwds/components/one_up.html",
+        page_to_display_context(page),
+    )
diff --git a/src/interactions/templates/interactions/bookmark_card.html b/src/interactions/templates/interactions/bookmark_card.html
index 43edcf5b5..91c5d1630 100644
--- a/src/interactions/templates/interactions/bookmark_card.html
+++ b/src/interactions/templates/interactions/bookmark_card.html
@@ -1,24 +1,17 @@
-{% extends 'dwds/elements/extendable/card.html' %}
 {% load bookmarks %}
 
-{% block card_header_content %}
-    <h3>Your bookmarks</h3>
-{% endblock card_header_content %}
+<div class="dwds-content-item-card">
+    <div class="dwds-link-list content-item">
+        <div class="content-header content-stack">
+            <h3>Your bookmarks</h3>
+        </div>
+        <div class="content-main">
+            <div class="content-body content-stack">{% bookmark_list user %}</div>
 
-{% block card_container_classes %}
-    dwds-link-list
-{% endblock card_container_classes %}
-
-{% block card_content_image %}
-{% endblock card_content_image %}
-
-{% block card_content_body %}
-    {% bookmark_list user %}
-{% endblock card_content_body %}
-
-{% block card_footer %}
-    <div class="card-footer">
-        <hr>
-        <a href="{% url 'interactions:bookmark-index' %}">View all bookmarks</a>
+            <div class="content-footer content-stack">
+                <hr>
+                <a href="{% url 'interactions:bookmark-index' %}">View all bookmarks</a>
+            </div>
+        </div>
     </div>
-{% endblock card_footer %}
+</div>
diff --git a/src/news/templates/news/news_page.html b/src/news/templates/news/news_page.html
index e6cf1c01b..b91357acb 100644
--- a/src/news/templates/news/news_page.html
+++ b/src/news/templates/news/news_page.html
@@ -6,7 +6,7 @@
 {% endblock main_content_classes %}
 {% block primary_content %}
 
-    <div class="stack streamfield-content-stack">
+    <div class="content-stack streamfield-content-stack">
         {% image page.preview_image fill-640x360 width=None height=None style="border-radius: var(--border-radius);" %}
         {% include "includes/attribution.html" with page=page is_news_page=True perm_sec_as_author=self.perm_sec_as_author first_publisher_as_author=True %}
         {% for block in page.body %}
@@ -16,8 +16,8 @@
 {% endblock primary_content %}
 
 {% block post_primary_content %}
-    <div class="news_comments">
-        {% if self.allow_comments %}
+    {% if self.allow_comments %}
+        <div class="news_comments">
             {% if page.comment_count > 0 %}
                 <div class="news-article-comments">
                     <h2 class="govuk-heading-m">
@@ -106,8 +106,8 @@ <h2 class="govuk-heading-m">Leave a comment</h2>
                     return false;
                 }
             </script>
-        {% endif %}
-    </div>
+        </div>
+    {% endif %}
     {{ block.super }}
 {% endblock post_primary_content %}
 

From 2660a80f0a18acbc3da7821da7bbf6f958468472 Mon Sep 17 00:00:00 2001
From: Cameron Lamb <cameron.lamb@digital.trade.gov.uk>
Date: Tue, 8 Oct 2024 14:07:24 +0100
Subject: [PATCH 2/4] Component fixups (#770)

---
 src/dw_design_system/dwds/components/engagement.html | 2 +-
 src/dw_design_system/dwds/layouts/content_grid.scss  | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/dw_design_system/dwds/components/engagement.html b/src/dw_design_system/dwds/components/engagement.html
index aaa8ab1b7..551adad52 100644
--- a/src/dw_design_system/dwds/components/engagement.html
+++ b/src/dw_design_system/dwds/components/engagement.html
@@ -1,6 +1,6 @@
 {% load wagtailimages_tags static humanize %}
 
-<div class="dwds-engagement content-item content-custom-sidebar-wrapper">
+<div class="content-item content-custom-sidebar-wrapper">
     <div class="content-custom-sidebar">
         {% include "dwds/elements/content_image.html" with content_image=thumbnail %}
 
diff --git a/src/dw_design_system/dwds/layouts/content_grid.scss b/src/dw_design_system/dwds/layouts/content_grid.scss
index 54f1f24b0..bc941510e 100644
--- a/src/dw_design_system/dwds/layouts/content_grid.scss
+++ b/src/dw_design_system/dwds/layouts/content_grid.scss
@@ -1,6 +1,10 @@
 .content-grid {
     display: grid;
     grid-gap: var(--space);
+
+    .content-item {
+        display: flex;
+    }
 }
 
 .content-grid.image-left,

From 223681d0f1c4afcd448f10011e855620d14c59ea Mon Sep 17 00:00:00 2001
From: Cameron Lamb <cameron.lamb@digital.trade.gov.uk>
Date: Tue, 8 Oct 2024 15:10:32 +0100
Subject: [PATCH 3/4] Fix the engagement streamfield content (#771)

---
 .../dwds/components/engagement_card.py              |  2 +-
 src/home/templatetags/cards.py                      | 13 -------------
 2 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/dw_design_system/dwds/components/engagement_card.py b/src/dw_design_system/dwds/components/engagement_card.py
index 890c5587f..ed49c3776 100644
--- a/src/dw_design_system/dwds/components/engagement_card.py
+++ b/src/dw_design_system/dwds/components/engagement_card.py
@@ -5,7 +5,7 @@ class EngagementCardBlock(blocks.StructBlock):
     page = blocks.PageChooserBlock(page_type="content.ContentPage")
 
     class Meta:
-        template = "dwds/components/engagement_card.html"
+        template = "dwds/components/engagement.html"
         icon = "doc-empty"
         label = "Engagement Card"
 
diff --git a/src/home/templatetags/cards.py b/src/home/templatetags/cards.py
index ddcba69f2..fb7c28a0a 100644
--- a/src/home/templatetags/cards.py
+++ b/src/home/templatetags/cards.py
@@ -38,19 +38,6 @@ def page_to_display_context(page: NewsPage | EventPage):
     return context
 
 
-@register.simple_tag
-def page_to_card(page: NewsPage | EventPage, hide_shadow: bool = False):
-    return {
-        **page_to_display_context(page),
-        "template": "dwds/components/engagement_card.html",
-    }
-
-
-@register.simple_tag
-def pages_to_cards(pages: list[NewsPage | EventPage], hide_shadow: bool = False):
-    return [page_to_card(page, hide_shadow=hide_shadow) for page in pages]
-
-
 class RenderableComponent:
     def __init__(self, template_name: str, context: dict):
         self.template_name = template_name

From 8cde860bcc7222d160b17753840b9d60a0ee63d9 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 8 Oct 2024 15:37:28 +0100
Subject: [PATCH 4/4] Bump @sentry/browser from 6.19.7 to 7.119.1 (#768)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Cameron Lamb <cameron.lamb@digital.trade.gov.uk>
---
 assets/js/init.js |   3 +-
 package-lock.json | 280 ++++++++++++++++++++++++++++++++++++----------
 package.json      |   3 +-
 3 files changed, 220 insertions(+), 66 deletions(-)

diff --git a/assets/js/init.js b/assets/js/init.js
index 31edba769..5ece16462 100644
--- a/assets/js/init.js
+++ b/assets/js/init.js
@@ -1,5 +1,4 @@
 import * as Sentry from "@sentry/browser";
-import { BrowserTracing } from "@sentry/tracing";
 
 /**
  * Return config from meta html elements.
@@ -24,7 +23,7 @@ function sentryInit() {
     dsn,
     release: config("release"),
     environment: config("environment"),
-    integrations: [new BrowserTracing()],
+    integrations: [Sentry.browserTracingIntegration()],
     tracesSampleRate: Number(config("sentry:browser-traces-sample-rate")),
   });
 }
diff --git a/package-lock.json b/package-lock.json
index 6027bcdf5..f6fc0894b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,7 @@
             "version": "0.1.0",
             "dependencies": {
                 "@ministryofjustice/frontend": "^1.8.0",
-                "@sentry/browser": "^6.19.7",
-                "@sentry/tracing": "^6.19.7",
+                "@sentry/browser": "^7.119.1",
                 "cropperjs": "^1.5.13",
                 "css-loader": "^5.2.7",
                 "govuk-frontend": "^4.5.0",
@@ -106,94 +105,235 @@
                 "jquery": "^3.6.0"
             }
         },
+        "node_modules/@sentry-internal/feedback": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-7.119.1.tgz",
+            "integrity": "sha512-EPyW6EKZmhKpw/OQUPRkTynXecZdYl4uhZwdZuGqnGMAzswPOgQvFrkwsOuPYvoMfXqCH7YuRqyJrox3uBOrTA==",
+            "dependencies": {
+                "@sentry/core": "7.119.1",
+                "@sentry/types": "7.119.1",
+                "@sentry/utils": "7.119.1"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@sentry-internal/feedback/node_modules/@sentry/types": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.119.1.tgz",
+            "integrity": "sha512-4G2mcZNnYzK3pa2PuTq+M2GcwBRY/yy1rF+HfZU+LAPZr98nzq2X3+mJHNJoobeHRkvVh7YZMPi4ogXiIS5VNQ==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@sentry-internal/feedback/node_modules/@sentry/utils": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.119.1.tgz",
+            "integrity": "sha512-ju/Cvyeu/vkfC5/XBV30UNet5kLEicZmXSyuLwZu95hEbL+foPdxN+re7pCI/eNqfe3B2vz7lvz5afLVOlQ2Hg==",
+            "dependencies": {
+                "@sentry/types": "7.119.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@sentry-internal/replay-canvas": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-7.119.1.tgz",
+            "integrity": "sha512-O/lrzENbMhP/UDr7LwmfOWTjD9PLNmdaCF408Wx8SDuj7Iwc+VasGfHg7fPH4Pdr4nJON6oh+UqoV4IoG05u+A==",
+            "dependencies": {
+                "@sentry/core": "7.119.1",
+                "@sentry/replay": "7.119.1",
+                "@sentry/types": "7.119.1",
+                "@sentry/utils": "7.119.1"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@sentry-internal/replay-canvas/node_modules/@sentry/types": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.119.1.tgz",
+            "integrity": "sha512-4G2mcZNnYzK3pa2PuTq+M2GcwBRY/yy1rF+HfZU+LAPZr98nzq2X3+mJHNJoobeHRkvVh7YZMPi4ogXiIS5VNQ==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@sentry-internal/replay-canvas/node_modules/@sentry/utils": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.119.1.tgz",
+            "integrity": "sha512-ju/Cvyeu/vkfC5/XBV30UNet5kLEicZmXSyuLwZu95hEbL+foPdxN+re7pCI/eNqfe3B2vz7lvz5afLVOlQ2Hg==",
+            "dependencies": {
+                "@sentry/types": "7.119.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@sentry-internal/tracing": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.119.1.tgz",
+            "integrity": "sha512-cI0YraPd6qBwvUA3wQdPGTy8PzAoK0NZiaTN1LM3IczdPegehWOaEG5GVTnpGnTsmBAzn1xnBXNBhgiU4dgcrQ==",
+            "dependencies": {
+                "@sentry/core": "7.119.1",
+                "@sentry/types": "7.119.1",
+                "@sentry/utils": "7.119.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@sentry-internal/tracing/node_modules/@sentry/types": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.119.1.tgz",
+            "integrity": "sha512-4G2mcZNnYzK3pa2PuTq+M2GcwBRY/yy1rF+HfZU+LAPZr98nzq2X3+mJHNJoobeHRkvVh7YZMPi4ogXiIS5VNQ==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@sentry-internal/tracing/node_modules/@sentry/utils": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.119.1.tgz",
+            "integrity": "sha512-ju/Cvyeu/vkfC5/XBV30UNet5kLEicZmXSyuLwZu95hEbL+foPdxN+re7pCI/eNqfe3B2vz7lvz5afLVOlQ2Hg==",
+            "dependencies": {
+                "@sentry/types": "7.119.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/@sentry/browser": {
-            "version": "6.19.7",
-            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.19.7.tgz",
-            "integrity": "sha512-oDbklp4O3MtAM4mtuwyZLrgO1qDVYIujzNJQzXmi9YzymJCuzMLSRDvhY83NNDCRxf0pds4DShgYeZdbSyKraA==",
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.119.1.tgz",
+            "integrity": "sha512-aMwAnFU4iAPeLyZvqmOQaEDHt/Dkf8rpgYeJ0OEi50dmP6AjG+KIAMCXU7CYCCQDn70ITJo8QD5+KzCoZPYz0A==",
             "dependencies": {
-                "@sentry/core": "6.19.7",
-                "@sentry/types": "6.19.7",
-                "@sentry/utils": "6.19.7",
-                "tslib": "^1.9.3"
+                "@sentry-internal/feedback": "7.119.1",
+                "@sentry-internal/replay-canvas": "7.119.1",
+                "@sentry-internal/tracing": "7.119.1",
+                "@sentry/core": "7.119.1",
+                "@sentry/integrations": "7.119.1",
+                "@sentry/replay": "7.119.1",
+                "@sentry/types": "7.119.1",
+                "@sentry/utils": "7.119.1"
             },
             "engines": {
-                "node": ">=6"
+                "node": ">=8"
+            }
+        },
+        "node_modules/@sentry/browser/node_modules/@sentry/types": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.119.1.tgz",
+            "integrity": "sha512-4G2mcZNnYzK3pa2PuTq+M2GcwBRY/yy1rF+HfZU+LAPZr98nzq2X3+mJHNJoobeHRkvVh7YZMPi4ogXiIS5VNQ==",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@sentry/browser/node_modules/@sentry/utils": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.119.1.tgz",
+            "integrity": "sha512-ju/Cvyeu/vkfC5/XBV30UNet5kLEicZmXSyuLwZu95hEbL+foPdxN+re7pCI/eNqfe3B2vz7lvz5afLVOlQ2Hg==",
+            "dependencies": {
+                "@sentry/types": "7.119.1"
+            },
+            "engines": {
+                "node": ">=8"
             }
         },
         "node_modules/@sentry/core": {
-            "version": "6.19.7",
-            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-6.19.7.tgz",
-            "integrity": "sha512-tOfZ/umqB2AcHPGbIrsFLcvApdTm9ggpi/kQZFkej7kMphjT+SGBiQfYtjyg9jcRW+ilAR4JXC9BGKsdEQ+8Vw==",
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.119.1.tgz",
+            "integrity": "sha512-YUNnH7O7paVd+UmpArWCPH4Phlb5LwrkWVqzFWqL3xPyCcTSof2RL8UmvpkTjgYJjJ+NDfq5mPFkqv3aOEn5Sw==",
             "dependencies": {
-                "@sentry/hub": "6.19.7",
-                "@sentry/minimal": "6.19.7",
-                "@sentry/types": "6.19.7",
-                "@sentry/utils": "6.19.7",
-                "tslib": "^1.9.3"
+                "@sentry/types": "7.119.1",
+                "@sentry/utils": "7.119.1"
             },
             "engines": {
-                "node": ">=6"
+                "node": ">=8"
+            }
+        },
+        "node_modules/@sentry/core/node_modules/@sentry/types": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.119.1.tgz",
+            "integrity": "sha512-4G2mcZNnYzK3pa2PuTq+M2GcwBRY/yy1rF+HfZU+LAPZr98nzq2X3+mJHNJoobeHRkvVh7YZMPi4ogXiIS5VNQ==",
+            "engines": {
+                "node": ">=8"
             }
         },
-        "node_modules/@sentry/hub": {
-            "version": "6.19.7",
-            "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-6.19.7.tgz",
-            "integrity": "sha512-y3OtbYFAqKHCWezF0EGGr5lcyI2KbaXW2Ik7Xp8Mu9TxbSTuwTe4rTntwg8ngPjUQU3SUHzgjqVB8qjiGqFXCA==",
+        "node_modules/@sentry/core/node_modules/@sentry/utils": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.119.1.tgz",
+            "integrity": "sha512-ju/Cvyeu/vkfC5/XBV30UNet5kLEicZmXSyuLwZu95hEbL+foPdxN+re7pCI/eNqfe3B2vz7lvz5afLVOlQ2Hg==",
             "dependencies": {
-                "@sentry/types": "6.19.7",
-                "@sentry/utils": "6.19.7",
-                "tslib": "^1.9.3"
+                "@sentry/types": "7.119.1"
             },
             "engines": {
-                "node": ">=6"
+                "node": ">=8"
             }
         },
-        "node_modules/@sentry/minimal": {
-            "version": "6.19.7",
-            "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-6.19.7.tgz",
-            "integrity": "sha512-wcYmSJOdvk6VAPx8IcmZgN08XTXRwRtB1aOLZm+MVHjIZIhHoBGZJYTVQS/BWjldsamj2cX3YGbGXNunaCfYJQ==",
+        "node_modules/@sentry/integrations": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/integrations/-/integrations-7.119.1.tgz",
+            "integrity": "sha512-CGmLEPnaBqbUleVqrmGYjRjf5/OwjUXo57I9t0KKWViq81mWnYhaUhRZWFNoCNQHns+3+GPCOMvl0zlawt+evw==",
             "dependencies": {
-                "@sentry/hub": "6.19.7",
-                "@sentry/types": "6.19.7",
-                "tslib": "^1.9.3"
+                "@sentry/core": "7.119.1",
+                "@sentry/types": "7.119.1",
+                "@sentry/utils": "7.119.1",
+                "localforage": "^1.8.1"
             },
             "engines": {
-                "node": ">=6"
+                "node": ">=8"
+            }
+        },
+        "node_modules/@sentry/integrations/node_modules/@sentry/types": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.119.1.tgz",
+            "integrity": "sha512-4G2mcZNnYzK3pa2PuTq+M2GcwBRY/yy1rF+HfZU+LAPZr98nzq2X3+mJHNJoobeHRkvVh7YZMPi4ogXiIS5VNQ==",
+            "engines": {
+                "node": ">=8"
             }
         },
-        "node_modules/@sentry/tracing": {
-            "version": "6.19.7",
-            "resolved": "https://registry.npmjs.org/@sentry/tracing/-/tracing-6.19.7.tgz",
-            "integrity": "sha512-ol4TupNnv9Zd+bZei7B6Ygnr9N3Gp1PUrNI761QSlHtPC25xXC5ssSD3GMhBgyQrcvpuRcCFHVNNM97tN5cZiA==",
+        "node_modules/@sentry/integrations/node_modules/@sentry/utils": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.119.1.tgz",
+            "integrity": "sha512-ju/Cvyeu/vkfC5/XBV30UNet5kLEicZmXSyuLwZu95hEbL+foPdxN+re7pCI/eNqfe3B2vz7lvz5afLVOlQ2Hg==",
             "dependencies": {
-                "@sentry/hub": "6.19.7",
-                "@sentry/minimal": "6.19.7",
-                "@sentry/types": "6.19.7",
-                "@sentry/utils": "6.19.7",
-                "tslib": "^1.9.3"
+                "@sentry/types": "7.119.1"
             },
             "engines": {
-                "node": ">=6"
+                "node": ">=8"
+            }
+        },
+        "node_modules/@sentry/replay": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.119.1.tgz",
+            "integrity": "sha512-4da+ruMEipuAZf35Ybt2StBdV1S+oJbSVccGpnl9w6RoeQoloT4ztR6ML3UcFDTXeTPT1FnHWDCyOfST0O7XMw==",
+            "dependencies": {
+                "@sentry-internal/tracing": "7.119.1",
+                "@sentry/core": "7.119.1",
+                "@sentry/types": "7.119.1",
+                "@sentry/utils": "7.119.1"
+            },
+            "engines": {
+                "node": ">=12"
             }
         },
-        "node_modules/@sentry/types": {
-            "version": "6.19.7",
-            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-6.19.7.tgz",
-            "integrity": "sha512-jH84pDYE+hHIbVnab3Hr+ZXr1v8QABfhx39KknxqKWr2l0oEItzepV0URvbEhB446lk/S/59230dlUUIBGsXbg==",
+        "node_modules/@sentry/replay/node_modules/@sentry/types": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.119.1.tgz",
+            "integrity": "sha512-4G2mcZNnYzK3pa2PuTq+M2GcwBRY/yy1rF+HfZU+LAPZr98nzq2X3+mJHNJoobeHRkvVh7YZMPi4ogXiIS5VNQ==",
             "engines": {
-                "node": ">=6"
+                "node": ">=8"
             }
         },
-        "node_modules/@sentry/utils": {
-            "version": "6.19.7",
-            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-6.19.7.tgz",
-            "integrity": "sha512-z95ECmE3i9pbWoXQrD/7PgkBAzJYR+iXtPuTkpBjDKs86O3mT+PXOT3BAn79w2wkn7/i3vOGD2xVr1uiMl26dA==",
+        "node_modules/@sentry/replay/node_modules/@sentry/utils": {
+            "version": "7.119.1",
+            "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.119.1.tgz",
+            "integrity": "sha512-ju/Cvyeu/vkfC5/XBV30UNet5kLEicZmXSyuLwZu95hEbL+foPdxN+re7pCI/eNqfe3B2vz7lvz5afLVOlQ2Hg==",
             "dependencies": {
-                "@sentry/types": "6.19.7",
-                "tslib": "^1.9.3"
+                "@sentry/types": "7.119.1"
             },
             "engines": {
-                "node": ">=6"
+                "node": ">=8"
             }
         },
         "node_modules/@types/estree": {
@@ -864,6 +1004,11 @@
                 "postcss": "^8.1.0"
             }
         },
+        "node_modules/immediate": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+            "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+        },
         "node_modules/immutable": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
@@ -1024,6 +1169,14 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/lie": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+            "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+            "dependencies": {
+                "immediate": "~3.0.5"
+            }
+        },
         "node_modules/loader-runner": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -1045,6 +1198,14 @@
                 "node": ">=8.9.0"
             }
         },
+        "node_modules/localforage": {
+            "version": "1.10.0",
+            "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+            "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+            "dependencies": {
+                "lie": "3.1.1"
+            }
+        },
         "node_modules/locate-path": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1728,11 +1889,6 @@
                 "node": ">=8.0"
             }
         },
-        "node_modules/tslib": {
-            "version": "1.14.1",
-            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-            "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        },
         "node_modules/undici-types": {
             "version": "6.19.8",
             "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
diff --git a/package.json b/package.json
index 9c73d1e77..5a67f387e 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,7 @@
     "private": true,
     "dependencies": {
         "@ministryofjustice/frontend": "^1.8.0",
-        "@sentry/browser": "^6.19.7",
-        "@sentry/tracing": "^6.19.7",
+        "@sentry/browser": "^7.119.1",
         "cropperjs": "^1.5.13",
         "css-loader": "^5.2.7",
         "govuk-frontend": "^4.5.0",