feat: add image support to featured cards and refine layout

- Add image/imageAlt fields to overlay content model
- Forms card now shows the phone mockup screenshot from solutions site
- Cards with images use a sidebar layout (content left, image right)
- Add section intro text framing the featured work
- Refine card structure: title → summary → excerpt → tags → CTA

Author: danielnaab

content/work/forms.md

@@ -5,6 +5,8 @@ highlights:
   - WCAG 2.1 AA conformant
   - Multi-step with save and resume
   - Agency-agnostic, works with any back-end
+image: /assets/forms-phone.png
+imageAlt: A mobile phone displaying an accessible government form built with Flexion Forms
 related:
   - forms-lab
 ---

src/catalog/overlays.ts

@@ -21,6 +21,8 @@ export async function loadOverlay(path: string): Promise<Overlay | null> {
     summary: stringOrUndefined(frontMatter.summary),
     highlights: stringArrayOrUndefined(frontMatter.highlights),
     related: stringArrayOrUndefined(frontMatter.related),
+    image: stringOrUndefined(frontMatter.image),
+    imageAlt: stringOrUndefined(frontMatter.imageAlt),
     body: body ? (marked.parse(body, { async: false }) as string) : undefined,
   }
 }

src/catalog/types.ts

@@ -36,6 +36,8 @@ export type Overlay = {
   summary?: string
   highlights?: string[]
   related?: string[]
+  image?: string
+  imageAlt?: string
   body?: string
 }
 

src/design/assets/forms-phone.png

@@ -14,26 +14,36 @@ export function FeaturedCard({ entry, basePath }: { entry: CatalogEntry; basePat
   const summary = entry.overlay?.summary ?? entry.description ?? ''
   const highlights = entry.overlay?.highlights
   const excerpt = entry.overlay?.body ? firstParagraph(entry.overlay.body) : null
+  const image = entry.overlay?.image
+    ? url(entry.overlay.image, basePath)
+    : null
+  const imageAlt = entry.overlay?.imageAlt ?? ''
+  const hasImage = Boolean(image)
 
   return (
-    <article class="featured-card">
-      <div class="featured-card__header">
+    <article class={`featured-card${hasImage ? ' featured-card--has-image' : ''}`}>
+      <div class="featured-card__content">
         <h3 class="featured-card__title">
           <a href={href}>{title}</a>
         </h3>
+        <p class="featured-card__summary">{summary}</p>
+        {excerpt ? <p class="featured-card__excerpt">{raw(excerpt)}</p> : null}
         {highlights ? (
           <ul class="featured-card__tags">
             {highlights.map((h) => <li>{h}</li>)}
           </ul>
         ) : null}
+        <p class="featured-card__cta">
+          <a href={href}>Explore {title} &rarr;</a>
+        </p>
       </div>
-      <div class="featured-card__body">
-        <p class="featured-card__summary">{summary}</p>
-        {excerpt ? <p class="featured-card__excerpt">{raw(excerpt)}</p> : null}
-      </div>
-      <p class="featured-card__cta">
-        <a href={href}>Explore {title} &rarr;</a>
-      </p>
+      {image ? (
+        <div class="featured-card__image">
+          <a href={href} tabindex={-1} aria-hidden="true">
+            <img src={image} alt={imageAlt} loading="lazy" />
+          </a>
+        </div>
+      ) : null}
     </article>
   )
 }

src/design/components/featured-card/index.tsx

@@ -1,18 +1,27 @@
 .featured-card {
   display: grid;
-  gap: var(--space-4);
-  padding: var(--space-5) var(--space-6);
+  gap: var(--space-5);
+  padding: var(--space-6);
   border-inline-start: 3px solid var(--color-accent);
   border-radius: var(--radius-sm);
   background: var(--color-surface);
   box-shadow: var(--shadow-card);
+  container-type: inline-size;
 }
 
-.featured-card__header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
+@container (min-width: 40rem) {
+  .featured-card--has-image {
+    grid-template-columns: 1fr 12rem;
+    align-items: start;
+  }
+}
+
+/* ---- Content column ---- */
+
+.featured-card__content {
+  display: grid;
   gap: var(--space-3);
+  align-content: start;
 }
 
 .featured-card__title {
@@ -29,6 +38,20 @@
   color: var(--color-link-hover);
 }
 
+.featured-card__summary {
+  font-size: var(--step-0);
+  color: var(--color-ink-subtle);
+  font-weight: 500;
+  max-inline-size: var(--measure-prose);
+}
+
+.featured-card__excerpt {
+  font-size: var(--step--1);
+  color: var(--color-ink-subtle);
+  line-height: 1.6;
+  max-inline-size: var(--measure-prose);
+}
+
 .featured-card__tags {
   display: flex;
   flex-wrap: wrap;
@@ -47,25 +70,8 @@
   white-space: nowrap;
 }
 
-.featured-card__body {
-  display: grid;
-  gap: var(--space-3);
-  max-inline-size: var(--measure-prose);
-}
-
-.featured-card__summary {
-  font-size: var(--step-0);
-  color: var(--color-ink-subtle);
-  font-weight: 500;
-}
-
-.featured-card__excerpt {
-  font-size: var(--step--1);
-  color: var(--color-ink-subtle);
-  line-height: 1.6;
-}
-
 .featured-card__cta {
+  margin-block-start: var(--space-2);
   font-size: var(--step--1);
 }
 
@@ -79,3 +85,16 @@
   color: var(--color-link-hover);
   text-decoration: underline;
 }
+
+/* ---- Image column ---- */
+
+.featured-card__image {
+  justify-self: center;
+}
+
+.featured-card__image img {
+  display: block;
+  max-block-size: 20rem;
+  inline-size: auto;
+  border-radius: var(--radius-sm);
+}

src/design/components/featured-card/styles.css

@@ -66,10 +66,19 @@
     margin-inline: calc(-1 * var(--space-5));
     border-radius: var(--radius-md);
   }
+  .home-featured__header {
+    display: grid;
+    gap: var(--space-2);
+  }
+  .home-featured__intro {
+    font-size: var(--step-0);
+    color: var(--color-ink-subtle);
+  }
   .home-featured__list {
     display: flex;
     flex-direction: column;
     gap: var(--space-5);
+    margin-block-start: var(--space-4);
   }
   .home-stats__grid,
   .work-index__list {

src/design/layout.css

@@ -37,7 +37,12 @@ export function Home({
       </section>
 
       <section class="home-featured" aria-labelledby="featured-heading">
-        <h2 id="featured-heading">Featured</h2>
+        <div class="home-featured__header">
+          <h2 id="featured-heading">Featured</h2>
+          <p class="home-featured__intro">
+            Products and tools we actively steward — built for government, shared with everyone.
+          </p>
+        </div>
         <div class="home-featured__list">
           {featured.map((entry) => (
             <FeaturedCard entry={entry} basePath={config.basePath} />