diff --git a/CHANGELOG.md b/CHANGELOG.md
index 305a57803f..e27ab010e1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@
 * Replace 'unset' property in printed background colours ([PR #4184](https://github.com/alphagov/govuk_publishing_components/pull/4184))
 * Improve print styles for layout-footer component ([PR #4178](https://github.com/alphagov/govuk_publishing_components/pull/4178))
 * Improve print styles for inverse-header component ([PR #4179](https://github.com/alphagov/govuk_publishing_components/pull/4179))
+* Add Summary Card component to Gem ([PR #4182](https://github.com/alphagov/govuk_publishing_components/pull/4182))
 
 ## 43.0.1
 
diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss
index 33b51fda5e..b133dac8f8 100644
--- a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss
@@ -77,6 +77,7 @@
 @import "components/step-by-step-nav";
 @import "components/subscription-links";
 @import "components/success-alert";
+@import "components/summary-card";
 @import "components/summary-list";
 @import "components/tabs";
 @import "components/table";
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_summary-card.scss b/app/assets/stylesheets/govuk_publishing_components/components/_summary-card.scss
new file mode 100644
index 0000000000..f2d7ee0228
--- /dev/null
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_summary-card.scss
@@ -0,0 +1,16 @@
+@import "govuk_publishing_components/individual_component_support";
+@import "govuk/components/summary-list/summary-list";
+
+.gem-c-summary-card {
+  .govuk-summary-list__key {
+    vertical-align: top;
+  }
+
+  .govuk-summary-list__actions {
+    width: auto;
+  }
+
+  img {
+    display: block;
+  }
+}
diff --git a/app/views/govuk_publishing_components/components/_summary_card.html.erb b/app/views/govuk_publishing_components/components/_summary_card.html.erb
new file mode 100644
index 0000000000..eb137bcc98
--- /dev/null
+++ b/app/views/govuk_publishing_components/components/_summary_card.html.erb
@@ -0,0 +1,62 @@
+<%
+  add_gem_component_stylesheet("summary-card")
+
+  id ||= nil
+  title ||= nil
+  data_attributes ||= {}
+  summary_card_actions ||= []
+  rows ||=[]
+%>
+<% if title || rows.any? %>
+  <%= tag.div class: "gem-c-summary-card", id: id, data: data_attributes do %>
+    <%= tag.div class: "govuk-summary-card" do %>
+      <%= tag.div class: "govuk-summary-card__title-wrapper" do %>
+        <%= tag.h2 class: "govuk-summary-card__title" do %>
+          <%= title %>
+        <% end %>
+
+        <%= tag.ul class: "govuk-summary-card__actions" do %>
+          <% summary_card_actions.each do |action| %>
+            <%= tag.li class: "govuk-summary-card__action" do %>
+              <%= link_to sanitize(action[:label] + tag.span(" #{title}", class: "govuk-visually-hidden")), action[:href], class: "govuk-link govuk-link--no-visited-state #{"gem-link--destructive govuk-!-font-weight-bold" if action[:destructive]}".strip %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% if rows.present? %>
+        <%= tag.div class: "govuk-summary-card__content" do %>
+          <%= tag.dl class: "govuk-summary-list" do %>
+            <% rows.each do |row| %>
+              <%= tag.div class: "govuk-summary-list__row" do %>
+                <%= tag.dt class: "govuk-summary-list__key" do %>
+                  <%= row[:key] %>
+                <% end %>
+
+                <%= tag.dt class: "govuk-summary-list__value" do %>
+                  <%= row[:value] %>
+                <% end %>
+
+                <% if row[:actions].present? %>
+                  <%= tag.dd class: "govuk-summary-list__actions" do %>
+                    <%= tag.ul class: "govuk-summary-list__actions-list" do %>
+                      <% row[:actions].each do |action| %>
+                        <%= tag.li class: "govuk-summary-list__actions-list-item" do %>
+                          <% if action[:opens_in_new_tab] %>
+                            <%= link_to sanitize(action[:label] + tag.span(" #{row[:key]} (opens in new tab)", class: "govuk-visually-hidden")), action[:href], class: "govuk-link govuk-link--no-visited-state", rel: "noreferrer noopener", target: "_blank" %>
+                          <% else %>
+                            <%= link_to sanitize(action[:label] + tag.span(" #{row[:key]}", class: "govuk-visually-hidden")), action[:href], class: "govuk-link govuk-link--no-visited-state #{"gem-link--destructive" if action[:destructive]}".strip %>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/app/views/govuk_publishing_components/components/docs/summary_card.yml b/app/views/govuk_publishing_components/components/docs/summary_card.yml
new file mode 100644
index 0000000000..71553d93eb
--- /dev/null
+++ b/app/views/govuk_publishing_components/components/docs/summary_card.yml
@@ -0,0 +1,93 @@
+name: Summary card
+description: An extension of the Summary list component. It can be used where there are multiple groups of lists to be displayed in their own discrete sections.
+accessibility_criteria: |
+  - accept focus
+  - be focusable with a keyboard
+  - be usable with a keyboard
+  - indicate when it has focus
+examples:
+  default:
+    data:
+      title: Title
+      rows:
+        - key: key one
+          value: value1
+        - key: key two
+          value: value2
+  with_custom-id:
+    data:
+      id: custom_id
+      title: Title
+      rows:
+        - key: key one
+          value: value1
+        - key: key two
+          value: value2
+  with_actions:
+    data:
+      title: Title
+      rows:
+        - key: key one
+          value: value1
+        - key: key two
+          value: value2
+      summary_card_actions:
+        - label: View
+          href: "#1"
+        - label: Edit
+          href: "#2"
+  with_destructive_action:
+    data:
+      title: Title
+      rows:
+        - key: key one
+          value: value1
+        - key: key two
+          value: value2
+      summary_card_actions:
+        - label: Delete
+          href: "#1"
+          destructive: true
+
+  with_row_actions:
+    data:
+      title: Title
+      rows:
+        - key: key one
+          value: value1
+          actions:
+            - label: View
+              href: "#1"
+            - label: Edit
+              href: "#2"
+        - key: key two
+          value: value2
+          actions:
+            - label: View
+              href: "#1"
+            - label: Edit
+              href: "#2"
+  with_row_destructive_action:
+    data:
+      title: Title
+      rows:
+        - key: key
+          value: value
+          actions:
+            - label: View
+              href: "#1"
+            - label: Edit
+              href: "#2"
+            - label: Delete
+              href: "#3"
+              destructive: true
+  with_row_action_that_opens_in_new_tab:
+    data:
+      title: Title
+      rows:
+        - key: key
+          value: value
+          actions:
+            - label: View
+              href: "#1"
+              opens_in_new_tab: true
diff --git a/spec/components/summary_card_spec.rb b/spec/components/summary_card_spec.rb
new file mode 100644
index 0000000000..7d2c562fe3
--- /dev/null
+++ b/spec/components/summary_card_spec.rb
@@ -0,0 +1,157 @@
+require "rails_helper"
+
+describe "Summary card", type: :view do
+  def component_name
+    "summary_card"
+  end
+
+  it "does not render anything if no data is passed" do
+    test_data = {}
+    assert_empty render_component(test_data)
+  end
+
+  it "renders component title" do
+    render_component(title: "Title")
+    assert_select ".gem-c-summary-card .govuk-summary-card__title", text: "Title"
+  end
+
+  it "renders items" do
+    render_component(
+      rows: [
+        {
+          key: "Title",
+          value: "The title",
+        },
+        {
+          key: "Summary",
+          value: "The summary",
+        },
+      ],
+    )
+    assert_select ".govuk-summary-list__row", 2
+    assert_select ".govuk-summary-list__key", text: "Title"
+    assert_select ".govuk-summary-list__value", text: "The title"
+    assert_select ".govuk-summary-list__key", text: "Summary"
+    assert_select ".govuk-summary-list__value", text: "The summary"
+  end
+
+  it "renders component with a custom id" do
+    render_component(
+      id: "custom_id",
+      title: "Title",
+    )
+    assert_select "#custom_id", count: 1
+  end
+
+  it "renders component title with view and edit actions" do
+    render_component(
+      title: "Title",
+      summary_card_actions: [
+        {
+          label: "View",
+          href: "#1",
+        },
+        {
+          label: "Edit",
+          href: "#2",
+        },
+      ],
+    )
+    assert_select ".govuk-summary-card__title-wrapper h2.govuk-summary-card__title", text: "Title"
+    assert_select '.govuk-summary-card__title-wrapper ul.govuk-summary-card__actions .govuk-link[href="#1"]', text: "View Title"
+    assert_select '.govuk-summary-card__title-wrapper ul.govuk-summary-card__actions .govuk-link[href="#2"]', text: "Edit Title"
+  end
+
+  it "renders component title with destructive action" do
+    render_component(
+      title: "Title",
+      summary_card_actions: [
+        {
+          label: "Delete",
+          href: "#1",
+          destructive: true,
+        },
+      ],
+    )
+    assert_select ".govuk-summary-card__title-wrapper h2.govuk-summary-card__title", text: "Title"
+    assert_select '.govuk-summary-card__title-wrapper ul.govuk-summary-card__actions .gem-link--destructive[href="#1"]', text: "Delete Title"
+  end
+
+  it "renders component with row actions" do
+    render_component(
+      title: "Title",
+      rows: [
+        {
+          key: "One",
+          value: "Value 1",
+          actions: [
+            {
+              label: "View",
+              href: "#1",
+            },
+            {
+              label: "Edit",
+              href: "#2",
+            },
+          ],
+        },
+      ],
+    )
+    assert_select ".govuk-summary-card__title-wrapper h2.govuk-summary-card__title", text: "Title"
+    assert_select '.govuk-summary-list__row .govuk-link[href="#1"]', text: "View One"
+    assert_select '.govuk-summary-list__row .govuk-link[href="#2"]', text: "Edit One"
+  end
+
+  it "renders component with row destructive action" do
+    render_component(
+      title: "Title",
+      rows: [
+        {
+          key: "One",
+          value: "Value 1",
+          actions: [
+            {
+              label: "View",
+              href: "#1",
+            },
+            {
+              label: "Edit",
+              href: "#2",
+            },
+            {
+              label: "Delete",
+              href: "#3",
+              destructive: true,
+            },
+          ],
+        },
+      ],
+    )
+    assert_select ".govuk-summary-card__title-wrapper h2.govuk-summary-card__title", text: "Title"
+    assert_select '.govuk-summary-list__row .govuk-link[href="#1"]', text: "View One"
+    assert_select '.govuk-summary-list__row .govuk-link[href="#2"]', text: "Edit One"
+    assert_select '.govuk-summary-list__row .gem-link--destructive[href="#3"]', text: "Delete One"
+  end
+
+  it "renders component with row action that opens in a new tab" do
+    render_component(
+      title: "Title",
+      rows: [
+        {
+          key: "One",
+          value: "Value 1",
+          actions: [
+            {
+              label: "View",
+              href: "#1",
+              opens_in_new_tab: true,
+            },
+          ],
+        },
+      ],
+    )
+    assert_select ".govuk-summary-card__title-wrapper h2.govuk-summary-card__title", text: "Title"
+    assert_select '.govuk-summary-list__row .govuk-link[href="#1"]', text: "View One (opens in new tab)"
+    assert_select '.govuk-summary-list__row .govuk-link[target="_blank"]', text: "View One (opens in new tab)"
+  end
+end