` rather than a `
` for the message which allows HTML as content
+- Hero component caption allows HTML rather than assuming text
- Picture elements have a tinted background, a maximum height for images and break out of the grid on tiny devices
+- Changed hero caption icon text from "Image caption" to "About this image"
- Updated the cookie banner attribute `data-policies-key` to `data-policieskey`
### Deprecated
### Removed
-- Picture elements no longer have `translation` and `transcript` options
+- Picture elements no longer have `translation` and `transcript` options (see "Added" above for alternative)
### Fixed
### Security
diff --git a/src/nationalarchives/components/hero/fixtures.json b/src/nationalarchives/components/hero/fixtures.json
index 004a4bb0..61a1a133 100644
--- a/src/nationalarchives/components/hero/fixtures.json
+++ b/src/nationalarchives/components/hero/fixtures.json
@@ -49,7 +49,7 @@
"imageHeight": 333,
"imageCaption": "An interesting photo by a famous photographer ©2023"
},
- "html": "I mage caption ",
+ "html": "About this i mage An interesting photo by a famous photographer ©2023
",
"hidden": false
},
{
@@ -61,7 +61,7 @@
"imageHeight": 333,
"imageCaption": "An interesting photo by a famous photographer ©2023"
},
- "html": "
I mage caption",
+ "html": "
About this i mage An interesting photo by a famous photographer ©2023
",
"hidden": false
},
{
@@ -85,7 +85,7 @@
"imageType": "image/png",
"imageCaption": "An interesting photo by a famous photographer ©2023"
},
- "html": "
I mage caption",
+ "html": "
About this i mage An interesting photo by a famous photographer ©2023
",
"hidden": false
},
{
@@ -103,7 +103,7 @@
}
]
},
- "html": "
I mage caption",
+ "html": "
About this i mage An interesting photo by a famous photographer ©2023
",
"hidden": false
},
{
@@ -122,7 +122,7 @@
}
]
},
- "html": "
I mage caption",
+ "html": "
About this i mage An interesting photo by a famous photographer ©2023
",
"hidden": false
},
{
@@ -142,7 +142,7 @@
}
]
},
- "html": "
I mage caption",
+ "html": "
About this i mage An interesting photo by a famous photographer ©2023
",
"hidden": false
},
{
@@ -156,7 +156,7 @@
"imageCaption": "An interesting photo by a famous photographer ©2023",
"classes": "hero__test-class"
},
- "html": "
I mage caption",
+ "html": "
About this i mage An interesting photo by a famous photographer ©2023
",
"hidden": false
},
{
@@ -172,7 +172,7 @@
"data-testattribute": "foobar"
}
},
- "html": "
I mage caption",
+ "html": "
About this i mage An interesting photo by a famous photographer ©2023
",
"hidden": false
}
]
diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss
index fb0ac8fd..3b52f49d 100644
--- a/src/nationalarchives/components/hero/hero.scss
+++ b/src/nationalarchives/components/hero/hero.scss
@@ -74,7 +74,7 @@
&__information {
width: 45rem;
max-width: 75vw;
- padding: 0.5rem 3.25rem 0.5rem 1rem;
+ padding: 0.625rem 3.25rem 0.625rem 1rem;
position: absolute;
right: 0;
diff --git a/src/nationalarchives/components/hero/template.njk b/src/nationalarchives/components/hero/template.njk
index c1bbc7f3..a70b6a61 100644
--- a/src/nationalarchives/components/hero/template.njk
+++ b/src/nationalarchives/components/hero/template.njk
@@ -5,11 +5,9 @@
- I mage caption
+ About this i mage
-
+ {{ params.imageCaption | safe }}
{%- endif -%}