feat(lab-card): rework as title-on-top with one column per link

Replace the horizontal-band layout with a column-per-link design:

- Title and tagline sit on top; a horizontal row of columns sits below,
  separated by a subtle top border on the columns row.
- Each column heads with an uppercase kind label ("Demo", "Repository",
  "Case study"), followed by the icon-prefixed link itself.
- Columns flow responsively via container queries: 1 column → 2 at
  32rem → 4 at 56rem. This keeps Forms Lab's four links on a single
  row on desktop while single-link cards remain compact.
- The link `label` is now the project/repo identifier (what you're
  linking to) rather than the action, since the action is carried by
  the column heading.
- Drop the now-unneeded `group` field from the content schema and
  loader. Labels absorb the sub-project identity ("Forms Platform",
  "Forms Lab (experiment)") without a separate grouping construct.

Author: danielnaab

content/featured/document-extractor-lab.md

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

content/featured/forms-lab.md

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

content/featured/messaging-lab.md

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

docs/featured-content.md

@@ -12,14 +12,12 @@ title: Forms Lab
 tagline: Digitize forms to create modern, accessible experiences for public outreach.
 order: 1
 links:
-  - label: Live demo
+  - label: Forms Platform
     url: https://pp4cc7kwbf.us-east-1.awsapprunner.com/
     kind: demo
-    group: Forms Platform
-  - label: Repository
+  - label: flexion/forms
     url: https://github.com/flexion/forms
     kind: repo
-    group: Forms Platform
 ---
 ```
 
@@ -29,18 +27,17 @@ links:
 - `tagline` — one-sentence summary (string, required)
 - `order` — display order ascending (integer, required)
 - `links` — list of link objects (array, required). Each link has:
-  - `label` — visible link text (string, required)
+  - `label` — visible link text (string, required). This is the identifier of what you're linking to — a repo name, a project name, or the target resource.
   - `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).
+  - `kind` — one of `demo`, `repo`, or `case-study` (required). Drives the column heading ("Demo", "Repository", or "Case study") and the icon shown before the label.
 
 ## 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. 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.
+The home page renders one `<LabCard />` per lab. Each card places the title and tagline on top, with a horizontal row of columns below it — one column per link. Each column has a small uppercase kind heading ("Demo", "Repository", or "Case study") and the link itself, prefixed with an icon (globe for `demo`, GitHub mark for `repo`, document for `case-study`). Columns flow from 1 → 2 → 4 based on card width via container queries at 32rem and 56rem. The home page's featured list is constrained to `72rem` to keep cards at a readable width on wide displays.
 
 ## Adding a featured lab
 

src/build/featured.ts

@@ -8,7 +8,6 @@ export type FeaturedLink = {
   label: string
   url: string
   kind: FeaturedLinkKind
-  group?: string
 }
 
 const LINK_KINDS: ReadonlySet<FeaturedLinkKind> = new Set([
@@ -71,15 +70,11 @@ function parseLinks(file: string, value: unknown): FeaturedLink[] {
         `content/featured/${file}: links[${i}].kind must be one of ${[...LINK_KINDS].join(', ')}`,
       )
     }
-    const link: FeaturedLink = {
+    return {
       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

@@ -6,10 +6,10 @@ const multiProject: FeaturedLab = {
   tagline: 'Digitize forms to create modern, accessible experiences for public outreach.',
   order: 1,
   links: [
-    { 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)' },
+    { label: 'Forms Platform', url: 'https://example.com/platform', kind: 'demo' },
+    { label: 'flexion/forms', url: 'https://github.com/flexion/forms', kind: 'repo' },
+    { label: 'Forms Lab (experiment)', url: 'https://example.com/lab', kind: 'demo' },
+    { label: 'flexion/forms-lab', url: 'https://github.com/flexion/forms-lab', kind: 'repo' },
   ],
 }
 
@@ -18,7 +18,7 @@ const singleLink: FeaturedLab = {
   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' },
+    { label: 'flexion/flexion-notify', url: 'https://github.com/flexion/flexion-notify', kind: 'repo' },
   ],
 }
 
@@ -27,8 +27,8 @@ const withCaseStudy: FeaturedLab = {
   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' },
+    { label: 'flexion/document-extractor', url: 'https://github.com/flexion/document-extractor', kind: 'repo' },
+    { label: 'Flexion case study', url: 'https://flexion.us/case-study/document-extraction-for-faster-processing/', kind: 'case-study' },
   ],
 }
 
@@ -37,10 +37,9 @@ export function LabCardExamples() {
     <section id="lab-card">
       <h2>Lab card</h2>
       <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).
+        Featured-lab card on the home page. Title and tagline sit on top; each link becomes
+        its own column below, titled with the link kind (Demo, Repository, or Case study).
+        Columns flow from 1 → 2 → 4 based on card width.
       </p>
       <div class="l-stack" data-space="md">
         <LabCard lab={multiProject} />

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

@@ -1,58 +1,37 @@
-import type { FeaturedLab, FeaturedLink, FeaturedLinkKind } from '../../../build/featured'
+import type { FeaturedLab, FeaturedLinkKind } from '../../../build/featured'
+
+const KIND_HEADING: Record<FeaturedLinkKind, string> = {
+  demo: 'Demo',
+  repo: 'Repository',
+  'case-study': 'Case study',
+}
 
 export function LabCard({ lab }: { lab: FeaturedLab }) {
-  const groups = groupLinks(lab.links)
   return (
     <article class="lab-card">
       <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 class="lab-card__columns">
+        {lab.links.map((link) => (
+          <li class="lab-card__column">
+            <p class="lab-card__column-heading">{KIND_HEADING[link.kind]}</p>
+            <a
+              class="lab-card__column-link"
+              href={link.url}
+              rel="noopener external"
+            >
+              <LinkIcon kind={link.kind} />
+              <span>{link.label}</span>
+            </a>
+          </li>
         ))}
-      </div>
+      </ul>
     </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':

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

@@ -5,7 +5,8 @@
     border-radius: var(--radius-sm);
     background: var(--color-surface);
     box-shadow: var(--shadow-card);
-    display: grid;
+    display: flex;
+    flex-direction: column;
     gap: var(--space-5);
     container-type: inline-size;
   }
@@ -14,7 +15,6 @@
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
-    min-inline-size: 0;
   }
 
   .lab-card__title {
@@ -31,20 +31,25 @@
     margin: 0;
   }
 
-  .lab-card__links {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-    min-inline-size: 0;
+  .lab-card__columns {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    padding-block-start: var(--space-4);
+    border-block-start: 1px solid var(--color-surface-alt);
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-5);
   }
 
-  .lab-card__group {
+  .lab-card__column {
     display: flex;
     flex-direction: column;
     gap: var(--space-2);
+    min-inline-size: 0;
   }
 
-  .lab-card__group-name {
+  .lab-card__column-heading {
     font-size: var(--step--1);
     font-weight: 600;
     text-transform: uppercase;
@@ -53,28 +58,19 @@
     margin: 0;
   }
 
-  .lab-card__link-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-
-  .lab-card__link-anchor {
+  .lab-card__column-link {
     display: inline-flex;
     align-items: center;
     gap: var(--space-2);
     font-size: var(--step-0);
     font-weight: 500;
     color: var(--color-link);
     text-decoration: none;
-    padding-block: var(--space-1);
+    word-break: break-word;
   }
 
-  .lab-card__link-anchor:hover,
-  .lab-card__link-anchor:focus-visible {
+  .lab-card__column-link:hover,
+  .lab-card__column-link:focus-visible {
     color: var(--color-link-hover);
     text-decoration: underline;
     text-underline-offset: 3px;
@@ -85,24 +81,22 @@
     color: var(--color-ink-subtle);
   }
 
-  .lab-card__link-anchor:hover .lab-card__icon,
-  .lab-card__link-anchor:focus-visible .lab-card__icon {
+  .lab-card__column-link:hover .lab-card__icon,
+  .lab-card__column-link:focus-visible .lab-card__icon {
     color: var(--color-link-hover);
   }
 
-  /* Wide enough for a horizontal band — intro on the left, links on the right. */
-  @container (min-width: 40rem) {
-    .lab-card {
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
-      gap: var(--space-6);
-      align-items: start;
+  /* Flow to 2 columns once the card is wide enough to host them cleanly. */
+  @container (min-width: 32rem) {
+    .lab-card__columns {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-    .lab-card__group {
-      align-items: flex-end;
-      text-align: end;
-    }
-    .lab-card__link-list {
-      align-items: flex-end;
+  }
+
+  /* And to a row of 4 on wide cards, so Forms Lab's four links sit side-by-side. */
+  @container (min-width: 56rem) {
+    .lab-card__columns {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
 }

tests/build/featured.test.ts

@@ -13,31 +13,28 @@ describe('loadFeatured', () => {
     ])
   })
 
-  test('Forms Lab carries sub-project groups and typed links', async () => {
+  test('Forms Lab has four typed links in document order', async () => {
     const labs = await loadFeatured(ROOT)
     const forms = labs.find((l) => l.title === 'Forms Lab')!
     expect(forms.tagline).toBe(
       'Digitize forms to create modern, accessible experiences for public outreach.',
     )
     expect(forms.order).toBe(1)
     expect(forms.links).toHaveLength(4)
+    expect(forms.links.map((l) => l.kind)).toEqual(['demo', 'repo', 'demo', 'repo'])
     expect(forms.links[0]).toEqual({
-      label: 'Live demo',
+      label: 'Forms Platform',
       url: 'https://pp4cc7kwbf.us-east-1.awsapprunner.com/',
       kind: 'demo',
-      group: 'Forms Platform',
     })
-    // All four links belong to one of two groups
-    const groups = new Set(forms.links.map((l) => l.group))
-    expect(groups).toEqual(new Set(['Forms Platform', 'Forms Lab (experiment)']))
   })
 
-  test('Messaging Lab has a single typed link, no group', async () => {
+  test('Messaging Lab has a single repo link', async () => {
     const labs = await loadFeatured(ROOT)
     const messaging = labs.find((l) => l.title === 'Messaging Lab')!
     expect(messaging.links).toEqual([
       {
-        label: 'Repository',
+        label: 'flexion/flexion-notify',
         url: 'https://github.com/flexion/flexion-notify',
         kind: 'repo',
       },