prototype for article card with no cover image

src/prototypes/no-cover/example/example.scss

@@ -0,0 +1,73 @@
+@use '../../../compiled/tokens/scss/aspect-ratio';
+@use '../../../compiled/tokens/scss/breakpoint';
+@use '../../../compiled/tokens/scss/brightness';
+@use '../../../compiled/tokens/scss/color';
+@use '../../../compiled/tokens/scss/ease';
+@use '../../../compiled/tokens/scss/size';
+@use '../../../compiled/tokens/scss/transition';
+@use '../../../mixins/border-radius';
+@use '../../../mixins/fluid';
+@use '../../../mixins/focus';
+@use '../../../mixins/headings';
+@use '../../../mixins/media-query';
+@use '../../../mixins/ms';
+@use '../../../mixins/spacing';
+@use '../../../mixins/theme';
+
+/// we won't need either of these defined when the prototype css is added to card.scss
+
+/// We add more space between the cover and text elements simply because it
+/// feels better visually.
+///
+/// @type Number
+/// @access private
+
+$_cover-gap: ms.step(1, 1rem);
+
+/// We can't use `grid-gap` exclusively due to some containers only being
+/// present some of the time, so we re-use this value to define the space
+/// between chunks of content.
+///
+/// @type Number
+/// @access private
+
+$_content-gap: ms.step(-1, 1rem);
+
+
+/**
+ * If there is no cover image, treat the header more like a cover image's
+ * container, with a matching aspect ratio and larger block end margin.
+**/
+
+.c-card:not(:has(.c-card__cover)) .c-card__header {
+  border-radius: size.$border-radius-medium;
+  gap: 0;
+  margin-block-end: $_cover-gap;
+  overflow: hidden;
+}
+
+/**
+ * The heading is treated like a cover image.
+**/
+
+.c-card:not(:has(.c-card__cover)) .c-card__heading {
+  align-content: center;
+  aspect-ratio: aspect-ratio.$wide;
+  grid-area: cover;
+  padding: $_content-gap;
+}
+
+
+.c-card:not(:has(.c-card__cover)) .c-card__link {
+  transition: font-size transition.$prompt ease.$out;
+}
+
+/**
+ * Matches the scale up on the cover image. Scale would be preferable for performance,
+ * however scaling either the heading or the link removes the effect of the entire
+ * card being a selectable target!
+**/
+
+.c-card:not(:has(.c-card__cover)):hover:not(:active) .c-card__link  {
+  font-size: 1.025em;
+}