Flatten the template parameters for cards

.storybook/preview.js

@@ -29,4 +29,7 @@ export const parameters = {
       cellAmount: 4,
     },
   },
+  controls: {
+    expanded: true,
+  },
 };

CHANGELOG.md

@@ -15,12 +15,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Button elements can be `<a>` or `<button>` with `buttonElement: true`
 - Small button option
 - Tabs also respond to the up/down keys on keyboard navigation as well as left/right
+- Allow other image sources in a card image using a `<picture>` element
 
 ### Changed
 
 - Updated social icons in footer to use Font Awesome icons
 - Consolidated markup for "opens in new tab" in external footer links#
 - Columns have margin removed by default
+- Flatten the template parameters for cards (e.g. `image.src` -> `imageSrc`)
 
 ### Deprecated
 ### Removed

src/nationalarchives/components/card/card.scss

@@ -18,17 +18,7 @@
     order: 2;
   }
 
-  &__supertitle {
-  }
-
-  &__title {
-    order: 2;
-
-    // @include typography.main-font;
-    // @include typography.main-font-weight-bold;
-  }
-
-  &__title-link {
+  &__heading-link {
     &::after {
       display: none !important;
     }
@@ -45,13 +35,15 @@
   }
 
   &__image {
-    width: 100%;
-    height: 100%;
-
     position: absolute;
     inset: 0;
 
-    object-fit: cover;
+    img {
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+    }
   }
 
   &__image-label {
@@ -103,10 +95,10 @@
 
   &--accent {
     @include colour.accent;
-  }
 
-  &--accent &__supertitle {
-    @include colour.invert;
+    .tna-hgroup__supertitle {
+      @include colour.invert;
+    }
   }
 
   &--horizontal {
@@ -175,16 +167,5 @@
 
   @include colour.on-high-contrast {
     @include colour.colour-border("keyline-dark", 1px);
-
-    .tna-card__inner {
-      // padding-bottom: 1rem;
-    }
-
-    .tna-card__heading,
-    .tna-card__body,
-    .tna-card__actions {
-      // margin-right: 1rem;
-      // margin-left: 1rem;
-    }
   }
 }