diff --git a/.github/actions/prototype-kit-test/action.yml b/.github/actions/prototype-kit-test/action.yml
index 7d72bd97..608b652b 100644
--- a/.github/actions/prototype-kit-test/action.yml
+++ b/.github/actions/prototype-kit-test/action.yml
@@ -39,6 +39,7 @@ runs:
echo -e "{% from \"nationalarchives/components/button/macro.njk\" import tnaButton %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/card/macro.njk\" import tnaCard %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/cookie-banner/macro.njk\" import tnaCookieBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+ echo -e "{% from \"nationalarchives/components/featured-records/macro.njk\" import tnaFeaturedRecords %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/filters/macro.njk\" import tnaFilters %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/footer/macro.njk\" import tnaFooter %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
echo -e "{% from \"nationalarchives/components/gallery/macro.njk\" import tnaGallery %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
@@ -61,6 +62,7 @@ runs:
echo "{{ tnaButton({text:\"I am a button\",url:\"#\"}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaCard({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaCookieBanner({}) }}" >> prototype/app/views/index.html &&
+ echo "{{ tnaFeaturedRecords({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaFilters({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaFooter({}) }}" >> prototype/app/views/index.html &&
echo "{{ tnaGallery({}) }}" >> prototype/app/views/index.html &&
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1446960..d3aaf5e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Elements can be hidden on certain devices with `tna-!--hide-on-[large|medium|small|tiny]`
- Allow links to have no visited state with `tna-link--no-visited-state`
- Card supertitles can be made "plain" with no contrasting colour
+- Featured records component
### Changed
diff --git a/src/nationalarchives/components/_index.scss b/src/nationalarchives/components/_index.scss
index f8541a79..4f6b7250 100644
--- a/src/nationalarchives/components/_index.scss
+++ b/src/nationalarchives/components/_index.scss
@@ -2,6 +2,7 @@
@use "button";
@use "card";
@use "cookie-banner";
+@use "featured-records";
@use "filters";
@use "footer";
@use "gallery";
diff --git a/src/nationalarchives/components/featured-records/_index.scss b/src/nationalarchives/components/featured-records/_index.scss
new file mode 100644
index 00000000..6442aaa1
--- /dev/null
+++ b/src/nationalarchives/components/featured-records/_index.scss
@@ -0,0 +1 @@
+@use "featured-records";
diff --git a/src/nationalarchives/components/featured-records/featured-records.scss b/src/nationalarchives/components/featured-records/featured-records.scss
new file mode 100644
index 00000000..d04508cc
--- /dev/null
+++ b/src/nationalarchives/components/featured-records/featured-records.scss
@@ -0,0 +1,95 @@
+@use "../../tools/colour";
+@use "../../tools/media";
+@use "../../tools/spacing";
+@use "../../tools/typography";
+@use "../../variables/typography" as typographyVars;
+@use "../../utilities";
+
+.tna-featured-records {
+ @include spacing.space-above;
+ margin-bottom: 0;
+ padding: 0;
+
+ list-style: none;
+
+ @include colour.colour-border("accent-background", 0.375rem, solid, top);
+
+ &__item {
+ padding: 2rem;
+
+ display: flex;
+ gap: 2rem;
+ justify-content: flex-start;
+ align-items: center;
+
+ @include colour.colour-border("keyline", 1px);
+ border-top-width: 0;
+ }
+
+ &__image {
+ width: 7rem;
+ height: auto;
+ }
+
+ &__details {
+ margin: 0;
+
+ flex: 1;
+ }
+
+ &__title-label,
+ &__date-label {
+ display: none;
+ }
+
+ &__collection-description,
+ &__title-description,
+ &__date-description {
+ width: 100%;
+ margin: 0;
+ }
+
+ &__collection-label,
+ &__collection-description {
+ display: inline-block;
+ }
+
+ &__collection-label {
+ &::after {
+ content: ":";
+ }
+ }
+
+ &__collection-description {
+ }
+
+ &__title-label {
+ }
+
+ &__title-description {
+ padding-bottom: 0.25rem;
+
+ @include typography.detail-font;
+ font-weight: 700;
+ }
+
+ &__date-label {
+ }
+
+ &__date-description {
+ @include colour.colour-font("font-light");
+ @include typography.relative-font-size(
+ typographyVars.$body-font-size-px * 0.85
+ );
+ }
+
+ @include media.on-tiny {
+ &__item {
+ padding: 1rem;
+
+ gap: 1rem;
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ }
+}
diff --git a/src/nationalarchives/components/featured-records/featured-records.stories.js b/src/nationalarchives/components/featured-records/featured-records.stories.js
new file mode 100644
index 00000000..1d21aa74
--- /dev/null
+++ b/src/nationalarchives/components/featured-records/featured-records.stories.js
@@ -0,0 +1,51 @@
+import FeaturedRecords from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+ items: { control: "object" },
+ classes: { control: "text" },
+ attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+ argTypes[argType].description = macroOptions.find(
+ (option) => option.name === argType,
+ )?.description;
+});
+
+export default {
+ title: "Components/Featured records",
+ argTypes,
+};
+
+const Template = ({ items, classes, attributes }) =>
+ FeaturedRecords({
+ params: {
+ items,
+ classes,
+ attributes,
+ },
+ });
+
+export const Standard = Template.bind({});
+Standard.args = {
+ items: [
+ {
+ imageSrc:
+ "https://beta.nationalarchives.gov.uk/media/images/wedderburn-trial.max-832x591.format-webp_i3c9pUH.webp",
+ imageWidth: 576,
+ imageHeight: 591,
+ collection: "TS 11/45/167",
+ title: "Court records relating to Robert Wedderburn's trial",
+ href: "#",
+ date: "1819–1820",
+ },
+ {
+ collection: "HO 42/191",
+ title: "Home office letters",
+ href: "#",
+ date: "1819",
+ },
+ ],
+ classes: "tna-featured-records--demo",
+};
diff --git a/src/nationalarchives/components/featured-records/fixtures.json b/src/nationalarchives/components/featured-records/fixtures.json
new file mode 100644
index 00000000..5f1e1ca7
--- /dev/null
+++ b/src/nationalarchives/components/featured-records/fixtures.json
@@ -0,0 +1,4 @@
+{
+ "component": "featured-records",
+ "fixtures": []
+}
diff --git a/src/nationalarchives/components/featured-records/macro-options.json b/src/nationalarchives/components/featured-records/macro-options.json
new file mode 100644
index 00000000..2f14f1d1
--- /dev/null
+++ b/src/nationalarchives/components/featured-records/macro-options.json
@@ -0,0 +1,70 @@
+[
+ {
+ "name": "items",
+ "type": "array",
+ "required": true,
+ "description": "",
+ "params": [
+ {
+ "name": "imageSrc",
+ "type": "string",
+ "required": false,
+ "description": ""
+ },
+ {
+ "name": "imageAlt",
+ "type": "string",
+ "required": false,
+ "description": ""
+ },
+ {
+ "name": "imageWidth",
+ "type": "number",
+ "required": false,
+ "description": ""
+ },
+ {
+ "name": "imageHeight",
+ "type": "number",
+ "required": false,
+ "description": ""
+ },
+ {
+ "name": "collection",
+ "type": "string",
+ "required": true,
+ "description": ""
+ },
+ {
+ "name": "title",
+ "type": "string",
+ "required": true,
+ "description": ""
+ },
+ {
+ "name": "href",
+ "type": "string",
+ "required": true,
+ "description": ""
+ },
+ {
+ "name": "date",
+ "type": "string",
+ "required": false,
+ "description": ""
+ }
+ ]
+ },
+ {
+ "name": "classes",
+ "type": "string",
+ "required": false,
+ "description": "Classes to add to the filters."
+ },
+ {
+ "name": "attributes",
+ "type": "object",
+ "required": false,
+ "description": "HTML attributes (for example data attributes) to add to the filters."
+ }
+]
diff --git a/src/nationalarchives/components/featured-records/macro.njk b/src/nationalarchives/components/featured-records/macro.njk
new file mode 100644
index 00000000..97a338bd
--- /dev/null
+++ b/src/nationalarchives/components/featured-records/macro.njk
@@ -0,0 +1,3 @@
+{% macro tnaFeaturedRecords(params) %}
+ {%- include "nationalarchives/components/featured-records/template.njk" -%}
+{% endmacro %}
\ No newline at end of file
diff --git a/src/nationalarchives/components/featured-records/template.njk b/src/nationalarchives/components/featured-records/template.njk
new file mode 100644
index 00000000..26ca1b0d
--- /dev/null
+++ b/src/nationalarchives/components/featured-records/template.njk
@@ -0,0 +1,20 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+
+ {%- for item in params.items %}
+ -
+ {%- if item.imageSrc %}
+
+ {%- endif %}
+
+ - From our collection
+ - {{ item.collection }}
+ - Title
+ -
+ {{ item.title }}
+
+ - Date
+ - {{ item.date }}
+
+
+ {%- endfor %}
+
diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
index 06b49a12..c70d66d4 100644
--- a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
+++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -2,6 +2,7 @@ import SkipLink from "../../../components/skip-link/template.njk";
import Breadcrumbs from "../../../components/breadcrumbs/template.njk";
import Button from "../../../components/button/template.njk";
import Card from "../../../components/card/template.njk";
+import FeaturedRecords from "../../../components/featured-records/template.njk";
import Footer from "../../../components/footer/template.njk";
import CookieBanner from "../../../components/cookie-banner/template.njk";
import Gallery from "../../../components/gallery/template.njk";
@@ -394,6 +395,32 @@ const Template = ({ theme, accent }) => {
"Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
},
})}
+
+ Featured records
+
+ ${FeaturedRecords({
+ params: {
+ items: [
+ {
+ imageSrc:
+ "https://beta.nationalarchives.gov.uk/media/images/wedderburn-trial.max-832x591.format-webp_i3c9pUH.webp",
+ imageWidth: 576,
+ imageHeight: 591,
+ collection: "TS 11/45/167",
+ title: "Court records relating to Robert Wedderburn's trial",
+ href: "#",
+ date: "1819–1820",
+ },
+ {
+ collection: "HO 42/191",
+ title: "Home office letters",
+ href: "#",
+ date: "1819",
+ },
+ ],
+ classes: "tna-featured-records--demo",
+ },
+ })}
diff --git a/tasks/test-package.js b/tasks/test-package.js
index 3b4bdb47..694c36fd 100644
--- a/tasks/test-package.js
+++ b/tasks/test-package.js
@@ -56,6 +56,7 @@ const checkExists = [
...componentFiles("button"),
...componentFiles("card"),
...componentFiles("cookie-banner", "CookieBanner"),
+ ...componentFiles("featured-records"),
...componentFiles("filters"),
...componentFiles("footer"),
...componentFiles("gallery", "Gallery"),