diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss index 62735389..3e58c523 100644 --- a/src/nationalarchives/components/card/card.scss +++ b/src/nationalarchives/components/card/card.scss @@ -9,6 +9,9 @@ .tna-card { @include spacing.space-below; + position: relative; + z-index: 1; + &__inner { display: flex; flex-direction: column; @@ -114,11 +117,15 @@ } &--contrast { - @include colour.invert; + .tna-card__inner { + @include colour.invert; + } } &--accent { - @include colour.accent; + .tna-card__inner { + @include colour.accent; + } .tna-hgroup__supertitle { @include colour.invert; @@ -127,6 +134,18 @@ } } + &--contrast#{&}--hero { + .tna-card__inner { + @include colour.invert; + } + } + + &--accent#{&}--hero { + .tna-card__inner { + @include colour.accent; + } + } + &--horizontal { position: relative; @@ -176,8 +195,73 @@ } } - &:not(#{&}--horizontal) { - @include colour.on-high-contrast { + &--hero { + padding-left: #{math.div(100%, 3)}; + + position: relative; + + &::before { + width: 100%; + height: 25vw; + max-height: 20rem; + + display: block; + + content: ""; + } + + .tna-card__inner { + padding: 2rem; + + @include colour.colour-background("page-background"); + } + + .tna-card__image-container { + height: auto; + margin-bottom: 0; + padding-bottom: 0; + + display: block; + + position: absolute; + inset: 0; + z-index: -1; + } + + .tna-card__heading, + .tna-card__body, + .tna-card__actions { + margin-right: 0; + margin-left: 0; + } + + @include media.on-small { + padding-left: 25%; + } + + @include media.on-tiny { + padding-left: 0; + + &::before { + display: none; + } + + .tna-card__inner { + padding: 0; + } + + .tna-card__image-container { + margin-bottom: 2rem; + padding-bottom: 50%; + + position: relative; + z-index: 1; + } + } + } + + @include colour.on-high-contrast { + &:not(#{&}--horizontal) { .tna-card__inner { padding-bottom: 1rem; } @@ -189,9 +273,7 @@ margin-left: 1rem; } } - } - @include colour.on-high-contrast { @include colour.colour-border("keyline-dark", 1px); &__meta { diff --git a/src/nationalarchives/components/card/card.stories.js b/src/nationalarchives/components/card/card.stories.js index 405ca0bf..03a477b4 100644 --- a/src/nationalarchives/components/card/card.stories.js +++ b/src/nationalarchives/components/card/card.stories.js @@ -17,7 +17,7 @@ const argTypes = { body: { control: "text" }, text: { control: "text" }, actions: { control: "object" }, - horizontal: { control: "boolean" }, + layout: { control: "inline-radio", options: ["none", "horizontal", "hero"] }, style: { control: "inline-radio", options: ["none", "boxed", "accent"] }, htmlElement: { control: "text" }, classes: { control: "text" }, @@ -53,7 +53,7 @@ const Template = ({ body, text, actions, - horizontal, + layout, style, htmlElement, classes, @@ -76,7 +76,7 @@ const Template = ({ body, text, actions, - horizontal, + layout, style, htmlElement, classes, @@ -199,7 +199,7 @@ Horizontal.args = { icon: "calendar", }, ], - horizontal: true, + layout: "horizontal", htmlElement: "article", classes: "tna-card--demo", }; @@ -225,7 +225,7 @@ HorizontalBoxed.args = { icon: "calendar", }, ], - horizontal: true, + layout: "horizontal", style: "boxed", htmlElement: "article", classes: "tna-card--demo", @@ -252,12 +252,36 @@ HorizontalAccent.args = { icon: "calendar", }, ], - horizontal: true, + layout: "horizontal", style: "accent", htmlElement: "article", classes: "tna-card--demo", }; +export const Hero = Template.bind({}); +Hero.args = { + supertitle: "Card supertitle", + title: "Card title", + headingLevel: 3, + headingSize: "l", + href: "#", + imageSrc: + "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg", + imageAlt: "The National Archives office", + imageWidth: 1996, + imageHeight: 1331, + label: "New", + meta: [ + { text: "24th September 2023", icon: "calendar" }, + { text: "From £16", icon: "ticket" }, + { text: "Online", icon: "location-dot" }, + ], + body: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.

", + layout: "hero", + htmlElement: "article", + // classes: "tna-card--demo", +}; + export const Sources = Template.bind({}); Sources.args = { supertitle: "Card supertitle", @@ -305,7 +329,8 @@ const GridTemplate = ({ body, text, actions, - horizontal, + layout, + style, htmlElement, classes, attributes, @@ -330,7 +355,8 @@ const GridTemplate = ({ body, text, actions, - horizontal, + layout, + style, htmlElement, classes, attributes, diff --git a/src/nationalarchives/components/card/macro-options.json b/src/nationalarchives/components/card/macro-options.json index a52d27e7..0fdef337 100644 --- a/src/nationalarchives/components/card/macro-options.json +++ b/src/nationalarchives/components/card/macro-options.json @@ -169,10 +169,10 @@ ] }, { - "name": "horizontal", - "type": "boolean", + "name": "layout", + "type": "string", "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": "Change the card layout to either a horizontal layout, placing the image to the left of the content or a hero layout for use at the top of pages. These layouts could change back to vertical on smaller devices." }, { "name": "style", diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk index 1a0b2b65..d09f3910 100644 --- a/src/nationalarchives/components/card/template.njk +++ b/src/nationalarchives/components/card/template.njk @@ -1,7 +1,9 @@ {%- set htmlElement = params.htmlElement if params.htmlElement else 'div' -%} {%- set containerClasses = [params.classes] if params.classes else [] -%} -{%- if params.horizontal -%} +{%- if params.layout == "horizontal" -%} {%- set containerClasses = containerClasses.concat('tna-card--horizontal') -%} +{%- elseif params.layout == "hero" -%} + {%- set containerClasses = containerClasses.concat('tna-card--hero') -%} {%- endif -%} {%- if params.style == "boxed" -%} {%- set containerClasses = containerClasses.concat('tna-card--contrast') -%} 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 f3aa5df9..bd3a6e91 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js @@ -429,7 +429,7 @@ const Template = ({ theme, accent }) => { ${Card({ params: { ...cardDefaultOptions, - horizontal: true, + layout: "horizontal", classes: "tna-!--margin-bottom-m", }, })} @@ -438,7 +438,7 @@ const Template = ({ theme, accent }) => { ${Card({ params: { ...cardDefaultOptions, - horizontal: true, + layout: "horizontal", style: "boxed", classes: "tna-!--margin-bottom-m", }, @@ -448,13 +448,41 @@ const Template = ({ theme, accent }) => { ${Card({ params: { ...cardDefaultOptions, - horizontal: true, + layout: "horizontal", style: "accent", }, })}
+
+
+ ${Card({ + params: { + supertitle: "Card supertitle", + title: "Card title", + headingLevel: 3, + headingSize: "l", + href: "#", + imageSrc: + "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg", + imageAlt: "The National Archives office", + imageWidth: 1996, + imageHeight: 1331, + label: "New", + meta: [ + { text: "24th September 2023", icon: "calendar" }, + { text: "From £16", icon: "ticket" }, + { text: "Online", icon: "location-dot" }, + ], + body: "

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.

", + layout: "hero", + htmlElement: "article", + }, + })} +
+
+
${Tabs({