diff --git a/CHANGELOG.md b/CHANGELOG.md
index c2916c95..cd767058 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
- Added `itemHeadingLevel` to file list component and changed file titles to headings
- Ordered and unordered lists can be spaced out with `.tna-ul--spaced` and `.tna-ol--spaced`
- The contents of the details element can be [called in Nunjucks](https://mozilla.github.io/nunjucks/templating.html#call)
+- Cards can be made entirely clickable using the `fullAreaClick` property
### Changed
@@ -23,6 +24,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Deprecated
### Removed
+
+- Cards can no longer have plain supertitles
+
### Fixed
- Fixed spacing in nested lists
diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss
index 263b51f9..ef7ce101 100644
--- a/src/nationalarchives/components/card/card.scss
+++ b/src/nationalarchives/components/card/card.scss
@@ -7,6 +7,8 @@
.tna-card {
@include spacing.space-above;
+ position: relative;
+
&__inner {
display: flex;
flex-direction: column;
@@ -35,6 +37,16 @@
}
}
+ &--full-click &__heading-link {
+ &::before {
+ content: "";
+
+ position: absolute;
+ inset: 0;
+ z-index: 3;
+ }
+ }
+
&__image-container {
height: 0;
margin-bottom: spacing.space(1);
@@ -47,6 +59,7 @@
&__image {
position: absolute;
inset: 0;
+ z-index: 1;
img {
width: 100%;
@@ -62,6 +75,7 @@
position: absolute;
top: spacing.space(0.5);
left: spacing.space(0.5);
+ z-index: 2;
.tna-background-accent &:not(.tna-chip--plain) {
@include colour.accent;
@@ -135,6 +149,7 @@
position: absolute;
inset: 0 50% 0 0;
+ z-index: 1;
}
.tna-card__heading,
diff --git a/src/nationalarchives/components/card/card.stories.js b/src/nationalarchives/components/card/card.stories.js
index 27ecbc6f..9a267e09 100644
--- a/src/nationalarchives/components/card/card.stories.js
+++ b/src/nationalarchives/components/card/card.stories.js
@@ -26,12 +26,12 @@ const argTypes = {
body: { control: "text" },
text: { control: "text" },
actions: { control: "object" },
+ fullAreaClick: { control: "boolean" },
horizontal: { control: "boolean" },
style: {
control: "inline-radio",
options: ["none", "contrast", "tint", "accent"],
},
- plainSupertitle: { control: "boolean" },
htmlElement: { control: "text" },
classes: { control: "text" },
attributes: { control: "object" },
@@ -71,9 +71,9 @@ const Template = ({
body,
text,
actions,
+ fullAreaClick,
horizontal,
style,
- plainSupertitle,
htmlElement,
classes,
attributes,
@@ -100,9 +100,9 @@ const Template = ({
body,
text,
actions,
+ fullAreaClick,
horizontal,
style,
- plainSupertitle,
htmlElement,
classes,
attributes,
@@ -166,24 +166,6 @@ Meta.args = {
classes: "tna-card--demo",
};
-export const PlainSupertitle = Template.bind({});
-PlainSupertitle.args = {
- supertitle: "Card supertitle",
- title: "Card title",
- headingLevel: 3,
- headingSize: "m",
- href: "#",
- imageSrc:
- "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
- imageAlt: "The National Archives office",
- imageWidth: 499,
- imageHeight: 333,
- body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.
",
- htmlElement: "article",
- plainSupertitle: true,
- classes: "tna-card--demo",
-};
-
export const Contrast = Template.bind({});
Contrast.args = {
supertitle: "Card supertitle",
@@ -380,6 +362,25 @@ HorizontalContrastMobile.args = {
classes: "tna-card--demo",
};
+export const FullClick = Template.bind({});
+FullClick.args = {
+ supertitle: "Card supertitle",
+ title: "Card title",
+ href: "#",
+ headingLevel: 3,
+ headingSize: "l",
+ imageSrc:
+ "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+ imageAlt: "The National Archives office",
+ imageWidth: 499,
+ imageHeight: 333,
+ label: "New",
+ body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.
",
+ fullAreaClick: true,
+ htmlElement: "article",
+ classes: "tna-card--demo",
+};
+
export const Sources = Template.bind({});
Sources.args = {
supertitle: "Card supertitle",
diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json
index b0ef97da..6f66b0a1 100644
--- a/src/nationalarchives/components/card/fixtures.json
+++ b/src/nationalarchives/components/card/fixtures.json
@@ -285,6 +285,44 @@
},
"html": ""
},
+ {
+ "name": "fully clickable",
+ "options": {
+ "title": "Card title",
+ "href": "#",
+ "headingLevel": 3,
+ "body": "Card body
",
+ "fullAreaClick": true
+ },
+ "html": ""
+ },
+ {
+ "name": "fully clickable without href",
+ "options": {
+ "title": "Card title",
+ "headingLevel": 3,
+ "body": "Card body
",
+ "fullAreaClick": true
+ },
+ "html": ""
+ },
+ {
+ "name": "fully clickable with actions",
+ "options": {
+ "title": "Card title",
+ "href": "#",
+ "headingLevel": 3,
+ "body": "Card body
",
+ "fullAreaClick": true,
+ "actions": [
+ {
+ "text": "Card action",
+ "href": "#"
+ }
+ ]
+ },
+ "html": ""
+ },
{
"name": "with a different element",
"options": {
diff --git a/src/nationalarchives/components/card/macro-options.json b/src/nationalarchives/components/card/macro-options.json
index f9186df9..5e2cedba 100644
--- a/src/nationalarchives/components/card/macro-options.json
+++ b/src/nationalarchives/components/card/macro-options.json
@@ -204,11 +204,17 @@
}
]
},
+ {
+ "name": "fullAreaClick",
+ "type": "boolean",
+ "required": false,
+ "description": "If true, `href` is set and there are no actions, allow users to click anywhere on the card to follow the link."
+ },
{
"name": "horizontal",
"type": "boolean",
"required": false,
- "description": "Change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices."
+ "description": "If true, change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices."
},
{
"name": "style",
@@ -216,12 +222,6 @@
"required": false,
"description": "The style of card to use which can be either `contrast` for an inverted card, `tint` for a tinted one or `accent` for a card that matches the page’s accent colour."
},
- {
- "name": "plainSupertitle",
- "type": "boolean",
- "required": false,
- "description": "Use a plain supertitle, removing the accented background colour."
- },
{
"name": "htmlElement",
"type": "string",
diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk
index 52564067..d748eb18 100644
--- a/src/nationalarchives/components/card/template.njk
+++ b/src/nationalarchives/components/card/template.njk
@@ -1,5 +1,8 @@
{%- set htmlElement = params.htmlElement if params.htmlElement else 'article' -%}
{%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- if params.fullAreaClick and params.href and not params.actions -%}
+ {%- set containerClasses = containerClasses.concat('tna-card--full-click') -%}
+{%- endif -%}
{%- if params.horizontal -%}
{%- set containerClasses = containerClasses.concat('tna-card--horizontal') -%}
{%- endif -%}
@@ -15,7 +18,7 @@
diff --git a/src/nationalarchives/utilities/typography/_index.scss b/src/nationalarchives/utilities/typography/_index.scss
index 1ead4e07..ececbab1 100644
--- a/src/nationalarchives/utilities/typography/_index.scss
+++ b/src/nationalarchives/utilities/typography/_index.scss
@@ -197,16 +197,23 @@ small {
width: 0.3125em;
height: 0.3125em;
+ margin-bottom: 0.1em;
margin-left: 0.375em;
display: inline-block;
vertical-align: middle;
+ transform: rotate(45deg);
+
@include colour.colour-border("link", 0.125em, solid, top);
@include colour.colour-border("link", 0.125em, solid, right);
+ }
- transform: rotate(45deg);
+ &:visited {
+ &::after {
+ @include colour.colour-border("link-visited");
+ }
}
}
@@ -244,6 +251,7 @@ small {
&::after {
width: 0.275em;
height: 0.275em;
+ margin-bottom: 0;
margin-left: 0.25em;
border-top-width: 0.1em;