diff --git a/app/components/document_list_component.html.erb b/app/components/document_list_component.html.erb
new file mode 100644
index 000000000..6242ab3dc
--- /dev/null
+++ b/app/components/document_list_component.html.erb
@@ -0,0 +1,15 @@
+
diff --git a/app/components/document_list_component.rb b/app/components/document_list_component.rb
new file mode 100644
index 000000000..253370c98
--- /dev/null
+++ b/app/components/document_list_component.rb
@@ -0,0 +1,8 @@
+class DocumentListComponent < ViewComponent::Base
+ attr_reader :items
+
+ def initialize(items:)
+ @items = items
+ super
+ end
+end
diff --git a/app/frontend/styles/_document-list.scss b/app/frontend/styles/_document-list.scss
new file mode 100644
index 000000000..89c547ef6
--- /dev/null
+++ b/app/frontend/styles/_document-list.scss
@@ -0,0 +1,66 @@
+.app-document-list {
+ list-style: none;
+ padding: 0;
+}
+
+.app-document-list__item {
+ margin-bottom: govuk-spacing(4);
+
+ &:last-child {
+ border-bottom: 0;
+ margin-bottom: 0;
+ padding-bottom: 0;
+ }
+}
+
+.app-document-list__item-title {
+ @include govuk-font($size: 16, $weight: "bold");
+ margin: 0 0 govuk-spacing(1);
+}
+
+.app-document-list__item-metadata {
+ padding: 0;
+ margin: 0;
+}
+
+.app-document-list__item-description {
+ @include govuk-font($size: 16);
+ margin: govuk-spacing(1) 0;
+}
+
+.app-document-list__item-metadata {
+ @include govuk-font($size: 16);
+ color: $govuk-secondary-text-colour;
+ margin: 0;
+}
+.app-document-list {
+ list-style: none;
+ padding: 0;
+}
+
+.app-document-list__item {
+ margin-bottom: govuk-spacing(4);
+
+ &:last-child {
+ border-bottom: 0;
+ margin-bottom: 0;
+ padding-bottom: 0;
+ }
+}
+
+.app-document-list__item-title {
+ @include govuk-font($size: 16, $weight: "bold");
+ margin: 0 0 govuk-spacing(1);
+}
+
+.app-document-list__item-description {
+ @include govuk-font($size: 16);
+ margin: govuk-spacing(1) 0;
+}
+
+.app-document-list__item-metadata {
+ @include govuk-font($size: 16);
+ color: $govuk-secondary-text-colour;
+ padding: 0;
+ margin: 0;
+}
diff --git a/app/frontend/styles/application.scss b/app/frontend/styles/application.scss
index 258c21e4d..1c7642374 100644
--- a/app/frontend/styles/application.scss
+++ b/app/frontend/styles/application.scss
@@ -14,6 +14,7 @@ $govuk-global-styles: true;
@import "accessible-autocomplete";
@import "button";
+@import "document-list";
@import "figure";
@import "filter";
@import "filter-layout";
diff --git a/spec/components/document_list_component_spec.rb b/spec/components/document_list_component_spec.rb
new file mode 100644
index 000000000..ee0c32301
--- /dev/null
+++ b/spec/components/document_list_component_spec.rb
@@ -0,0 +1,19 @@
+require "rails_helper"
+
+RSpec.describe DocumentListComponent, type: :component do
+ let(:items) do
+ [{ name: "PDF Form", href: "/forms/form.pdf", description: "An important form", metadata: "4 pages" },
+ { name: "Website", href: "https://example.com" }]
+ end
+
+ context "when rendering tabs" do
+ it "all of the nav tabs specified in the items hash are passed to it" do
+ result = render_inline(described_class.new(items:))
+
+ expect(result.text).to include("PDF Form")
+ expect(result.text).to include("An important form")
+ expect(result.text).to include("4 pages")
+ expect(result.text).to include("Website")
+ end
+ end
+end