feat(lab-card): horizontal band layout with typed, grouped links

Rework the featured-labs cards on the home page to address two UX issues:

**Link differentiation.** Every link now carries a `kind` of `demo`,
`repo`, or `case-study`, rendered with a recognizable inline icon
(globe, GitHub mark, document). Labels shorten to "Live demo",
"Repository", "Case study" — the icons do the category work.

**Sub-project grouping.** Links accept an optional `group` name. When
set, same-group links render under a small uppercase heading. Forms Lab
now makes its two distinct projects (production Platform vs. the
experiment) visually explicit.

**Horizontal band layout.** The card becomes a two-column grid above
40rem (container query) — intro on the left, grouped link panel on the
right. On narrow viewports it stacks. The home page's featured list is
also capped at 72rem so desktop bands don't stretch edge-to-edge.

Schema: `links: [{label, url, kind, group?}]`. Updated the three content
files, loader, loader tests, LabCard component + styles + examples,
LabCard view tests, and docs/featured-content.md.

Author: danielnaab

content/featured/document-extractor-lab.md

@@ -3,8 +3,10 @@ title: Document Extractor Lab
 tagline: Accurately extract data from PDFs and images for faster application processing.
 order: 3
 links:
-  - label: GitHub repository
+  - label: Repository
     url: https://github.com/flexion/document-extractor
+    kind: repo
   - label: Case study
     url: https://flexion.us/case-study/document-extraction-for-faster-processing/
+    kind: case-study
 ---

content/featured/forms-lab.md

@@ -3,12 +3,20 @@ title: Forms Lab
 tagline: Digitize forms to create modern, accessible experiences for public outreach.
 order: 1
 links:
-  - label: Demo (Forms Platform)
+  - label: Live demo
     url: https://pp4cc7kwbf.us-east-1.awsapprunner.com/
-  - label: GitHub repository — Forms Platform
+    kind: demo
+    group: Forms Platform
+  - label: Repository
     url: https://github.com/flexion/forms
-  - label: Demo (Forms Lab experiment)
+    kind: repo
+    group: Forms Platform
+  - label: Live demo
     url: https://ec2-34-197-222-16.compute-1.amazonaws.com/
-  - label: GitHub repository — Forms Lab (experiment)
+    kind: demo
+    group: Forms Lab (experiment)
+  - label: Repository
     url: https://github.com/flexion/forms-lab
+    kind: repo
+    group: Forms Lab (experiment)
 ---

content/featured/messaging-lab.md

@@ -3,6 +3,7 @@ title: Messaging Lab
 tagline: Text messaging services to deliver critical updates to the people you serve.
 order: 2
 links:
-  - label: GitHub repository
+  - label: Repository
     url: https://github.com/flexion/flexion-notify
+    kind: repo
 ---

docs/featured-content.md

@@ -12,10 +12,14 @@ title: Forms Lab
 tagline: Digitize forms to create modern, accessible experiences for public outreach.
 order: 1
 links:
-  - label: Demo (Forms Platform)
+  - label: Live demo
     url: https://pp4cc7kwbf.us-east-1.awsapprunner.com/
-  - label: GitHub repository — Forms Platform
+    kind: demo
+    group: Forms Platform
+  - label: Repository
     url: https://github.com/flexion/forms
+    kind: repo
+    group: Forms Platform
 ---
 ```
 
@@ -24,15 +28,19 @@ links:
 - `title` — card heading (string, required)
 - `tagline` — one-sentence summary (string, required)
 - `order` — display order ascending (integer, required)
-- `links` — list of `{ label, url }` pairs rendered as external links (array, required)
+- `links` — list of link objects (array, required). Each link has:
+  - `label` — visible link text (string, required)
+  - `url` — destination URL (string, required)
+  - `kind` — one of `demo`, `repo`, or `case-study` (required). Drives the icon shown before the label.
+  - `group` — optional sub-project name (string). When multiple links share a `group`, they render together under a small heading; ungrouped links render without one. Use this for a lab that contains more than one distinct project (e.g., a production and an experiment variant).
 
 ## Loader
 
 `src/build/featured.ts` exports `loadFeatured(rootDir)` which reads every `.md` file in `content/featured/`, parses front-matter, validates the schema, and returns labs sorted by `order`.
 
 ## Rendering
 
-The home page renders one `<LabCard />` per lab. The card shows the title (not linked), the tagline, and a vertical list of external links. Cards stack on narrow viewports and flow into a grid on wider viewports via the existing `.home-featured__list` composition.
+The home page renders one `<LabCard />` per lab. Each card is a horizontal band — title and tagline on the left, grouped link list on the right — that collapses to a stacked layout on narrow viewports via a `@container (min-width: 40rem)` rule. Links are prefixed with an icon (globe for `demo`, GitHub mark for `repo`, document for `case-study`) and grouped under a small heading when a `group` is set. The home page's featured list is constrained to `72rem` to keep the bands at a readable width on wide displays.
 
 ## Adding a featured lab
 

src/build/featured.ts

@@ -2,11 +2,21 @@ import { parse as parseYaml } from 'yaml'
 import { readdir } from 'node:fs/promises'
 import { join } from 'node:path'
 
+export type FeaturedLinkKind = 'demo' | 'repo' | 'case-study'
+
 export type FeaturedLink = {
   label: string
   url: string
+  kind: FeaturedLinkKind
+  group?: string
 }
 
+const LINK_KINDS: ReadonlySet<FeaturedLinkKind> = new Set([
+  'demo',
+  'repo',
+  'case-study',
+])
+
 export type FeaturedLab = {
   title: string
   tagline: string
@@ -55,10 +65,21 @@ function parseLinks(file: string, value: unknown): FeaturedLink[] {
       throw new Error(`content/featured/${file}: links[${i}] must be an object`)
     }
     const o = item as Record<string, unknown>
-    return {
+    const kindRaw = requireString(file, `links[${i}].kind`, o.kind)
+    if (!LINK_KINDS.has(kindRaw as FeaturedLinkKind)) {
+      throw new Error(
+        `content/featured/${file}: links[${i}].kind must be one of ${[...LINK_KINDS].join(', ')}`,
+      )
+    }
+    const link: FeaturedLink = {
       label: requireString(file, `links[${i}].label`, o.label),
       url: requireString(file, `links[${i}].url`, o.url),
+      kind: kindRaw as FeaturedLinkKind,
+    }
+    if (typeof o.group === 'string' && o.group.length > 0) {
+      link.group = o.group
     }
+    return link
   })
 }
 

src/design/components/lab-card/examples.tsx

@@ -1,22 +1,52 @@
 import { LabCard } from './index'
+import type { FeaturedLab } from '../../../build/featured'
 
-const example = {
+const multiProject: FeaturedLab = {
   title: 'Forms Lab',
   tagline: 'Digitize forms to create modern, accessible experiences for public outreach.',
   order: 1,
   links: [
-    { label: 'Demo (Forms Platform)', url: 'https://example.com/demo' },
-    { label: 'GitHub repository — Forms Platform', url: 'https://github.com/flexion/forms' },
-    { label: 'GitHub repository — Forms Lab (experiment)', url: 'https://github.com/flexion/forms-lab' },
+    { label: 'Live demo', url: 'https://example.com/demo', kind: 'demo', group: 'Forms Platform' },
+    { label: 'Repository', url: 'https://github.com/flexion/forms', kind: 'repo', group: 'Forms Platform' },
+    { label: 'Live demo', url: 'https://example.com/lab', kind: 'demo', group: 'Forms Lab (experiment)' },
+    { label: 'Repository', url: 'https://github.com/flexion/forms-lab', kind: 'repo', group: 'Forms Lab (experiment)' },
+  ],
+}
+
+const singleLink: FeaturedLab = {
+  title: 'Messaging Lab',
+  tagline: 'Text messaging services to deliver critical updates to the people you serve.',
+  order: 2,
+  links: [
+    { label: 'Repository', url: 'https://github.com/flexion/flexion-notify', kind: 'repo' },
+  ],
+}
+
+const withCaseStudy: FeaturedLab = {
+  title: 'Document Extractor Lab',
+  tagline: 'Accurately extract data from PDFs and images for faster application processing.',
+  order: 3,
+  links: [
+    { label: 'Repository', url: 'https://github.com/flexion/document-extractor', kind: 'repo' },
+    { label: 'Case study', url: 'https://flexion.us/case-study/document-extraction-for-faster-processing/', kind: 'case-study' },
   ],
 }
 
 export function LabCardExamples() {
   return (
     <section id="lab-card">
       <h2>Lab card</h2>
-      <p>Featured-lab card on the home page. Title is not a link; each link inside the card is an external link.</p>
-      <LabCard lab={example} />
+      <p>
+        Featured-lab card on the home page. Cards read as a horizontal band on wide containers
+        and stack vertically on narrow ones. Links are grouped by sub-project when a card has
+        more than one, and each link is prefixed with an icon that signals its type (demo,
+        repository, or case study).
+      </p>
+      <div class="l-stack" data-space="md">
+        <LabCard lab={multiProject} />
+        <LabCard lab={singleLink} />
+        <LabCard lab={withCaseStudy} />
+      </div>
     </section>
   )
 }

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

@@ -1,18 +1,127 @@
-import { Link } from '../link'
-import type { FeaturedLab } from '../../../build/featured'
+import type { FeaturedLab, FeaturedLink, FeaturedLinkKind } from '../../../build/featured'
 
 export function LabCard({ lab }: { lab: FeaturedLab }) {
+  const groups = groupLinks(lab.links)
   return (
     <article class="lab-card">
-      <h3 class="lab-card__title">{lab.title}</h3>
-      <p class="lab-card__tagline">{lab.tagline}</p>
-      <ul class="lab-card__links">
-        {lab.links.map((link) => (
-          <li class="lab-card__link">
-            <Link href={link.url} external>{link.label}</Link>
-          </li>
+      <div class="lab-card__intro">
+        <h3 class="lab-card__title">{lab.title}</h3>
+        <p class="lab-card__tagline">{lab.tagline}</p>
+      </div>
+      <div class="lab-card__links">
+        {groups.map((group) => (
+          <div class="lab-card__group">
+            {group.name ? (
+              <p class="lab-card__group-name">{group.name}</p>
+            ) : null}
+            <ul class="lab-card__link-list">
+              {group.links.map((link) => (
+                <li class="lab-card__link">
+                  <a
+                    class="lab-card__link-anchor"
+                    href={link.url}
+                    rel="noopener external"
+                  >
+                    <LinkIcon kind={link.kind} />
+                    <span>{link.label}</span>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
         ))}
-      </ul>
+      </div>
     </article>
   )
 }
+
+type LinkGroup = { name: string | null; links: FeaturedLink[] }
+
+function groupLinks(links: FeaturedLink[]): LinkGroup[] {
+  const groups: LinkGroup[] = []
+  const byName = new Map<string | null, LinkGroup>()
+  for (const link of links) {
+    const name = link.group ?? null
+    let group = byName.get(name)
+    if (!group) {
+      group = { name, links: [] }
+      byName.set(name, group)
+      groups.push(group)
+    }
+    group.links.push(link)
+  }
+  return groups
+}
+
+function LinkIcon({ kind }: { kind: FeaturedLinkKind }) {
+  switch (kind) {
+    case 'demo':
+      return <DemoIcon />
+    case 'repo':
+      return <RepoIcon />
+    case 'case-study':
+      return <CaseStudyIcon />
+  }
+}
+
+function DemoIcon() {
+  // Globe / launch — signals "visit a running thing"
+  return (
+    <svg
+      class="lab-card__icon"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="9" />
+      <path d="M3 12h18" />
+      <path d="M12 3a14 14 0 0 1 0 18" />
+      <path d="M12 3a14 14 0 0 0 0 18" />
+    </svg>
+  )
+}
+
+function RepoIcon() {
+  // GitHub mark
+  return (
+    <svg
+      class="lab-card__icon"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path d="M12 1.5a10.5 10.5 0 0 0-3.32 20.47c.53.1.72-.23.72-.51v-1.8c-2.93.64-3.55-1.41-3.55-1.41-.48-1.22-1.17-1.55-1.17-1.55-.96-.65.07-.64.07-.64 1.06.07 1.62 1.09 1.62 1.09.94 1.61 2.47 1.14 3.07.87.1-.68.37-1.14.67-1.4-2.34-.27-4.8-1.17-4.8-5.2 0-1.15.41-2.09 1.08-2.82-.11-.27-.47-1.35.1-2.81 0 0 .88-.28 2.89 1.07a10 10 0 0 1 5.26 0c2-1.35 2.88-1.07 2.88-1.07.58 1.46.22 2.54.11 2.81.67.73 1.08 1.67 1.08 2.82 0 4.04-2.47 4.93-4.82 5.19.38.33.72.97.72 1.96v2.91c0 .28.19.62.73.51A10.5 10.5 0 0 0 12 1.5z" />
+    </svg>
+  )
+}
+
+function CaseStudyIcon() {
+  // Document with horizontal lines
+  return (
+    <svg
+      class="lab-card__icon"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" />
+      <path d="M14 3v5h5" />
+      <path d="M9 13h6" />
+      <path d="M9 17h6" />
+    </svg>
+  )
+}