@contentrain/astro-kit 0.30.0 → 0.32.0

package/components/steps/meta.json

@@ -8,16 +8,19 @@
     "KitImage.astro",
     "Section.astro",
     "image.ts",
+    "measured.ts",
     "types.ts"
   ],
   "variants": {
     "layout": {
       "options": [
         "list",
-        "row"
+        "row",
+        "rail",
+        "alternate"
       ],
       "default": "list",
-      "description": "A vertical list, or one row across the page on wide screens."
+      "description": "list: a vertical list. row: across the page. rail: one rail on the start side. alternate: items alternate either side of a centre rail from md (one rail on phones); DOM order stays chronological."
     },
     "style": {
       "options": [
@@ -26,6 +29,31 @@
       ],
       "default": "numbered",
       "description": "A number badge before each step, or an accent rule beside it."
+    },
+    "kind": {
+      "options": [
+        "steps",
+        "timeline"
+      ],
+      "default": "steps",
+      "description": "steps: a numbered sequence. timeline: a date per item on a vertical rail (the rail layouts below; without a layout it uses rail)."
+    },
+    "marker": {
+      "options": [
+        "number",
+        "dot"
+      ],
+      "default": "number",
+      "description": "What sits on the rail: the style's number badge, or a plain dot (the timeline default). Not yet: icon and date markers, and a visual emphasis for the current item (it has aria-current and a hidden label only)."
+    },
+    "connector": {
+      "options": [
+        "none",
+        "line",
+        "dashed"
+      ],
+      "default": "line",
+      "description": "The rail between items on the rail layouts."
     }
   },
   "props": {
@@ -72,6 +100,16 @@
             "type": "string",
             "label": "Image description",
             "description": "What the image shows; empty if decorative."
+          },
+          "date": {
+            "type": "string",
+            "label": "Date",
+            "description": "A timeline's date as written (\"2019\", \"Mar 2021\"); marked up as a <time> only when it is an ISO date or a year."
+          },
+          "current": {
+            "type": "boolean",
+            "label": "Current",
+            "description": "Marks the latest item (aria-current=\"step\" and a hidden \"Current\")."
           }
         }
       },
@@ -81,6 +119,122 @@
       "type": "string",
       "content": false,
       "description": "Anchor id of the section; the heading gets `<id>-title`."
+    },
+    "currentLabel": {
+      "type": "string",
+      "default": "Current",
+      "content": false,
+      "description": "Visually hidden text on the current item, so it is not shown by colour alone."
+    },
+    "measured": {
+      "type": "object",
+      "content": false,
+      "description": "The source section's measured style (MeasuredStyle): frame width, padding, fill, image, columns per width, gap, text tone, radius, minimum height — all in pixels. Absent, the site's tokens; present, it wins over tone and columns. Values that are not a number, a colour or a known keyword are dropped.",
+      "fields": {
+        "containerPx": {
+          "type": "integer",
+          "min": 0,
+          "max": 2560,
+          "description": "The frame's content width."
+        },
+        "padY": {
+          "type": "integer",
+          "min": 0,
+          "max": 400,
+          "description": "Top and bottom padding."
+        },
+        "padX": {
+          "type": "integer",
+          "min": 0,
+          "max": 200,
+          "description": "The frame's side padding (gutter)."
+        },
+        "bg": {
+          "type": "object",
+          "description": "The section's background.",
+          "fields": {
+            "color": {
+              "type": "string",
+              "description": "Fill colour: hex, rgb(a) or hsl(a)."
+            },
+            "image": {
+              "type": "string",
+              "description": "Background image address (http(s) or root-relative), drawn behind the content."
+            },
+            "overlay": {
+              "type": "string",
+              "description": "Colour or linear/radial gradient laid over the image or the fill."
+            },
+            "size": {
+              "type": "string",
+              "description": "cover, contain or auto; anything else draws as cover."
+            },
+            "position": {
+              "type": "string",
+              "description": "One or two of center/top/bottom/left/right or percentages."
+            }
+          }
+        },
+        "columns": {
+          "type": "object",
+          "description": "Item columns at 390 (base), 768 (md) and 1280 (lg) px; a missing width follows the narrower one.",
+          "fields": {
+            "390": {
+              "type": "integer",
+              "min": 1,
+              "max": 6,
+              "description": "Phone."
+            },
+            "768": {
+              "type": "integer",
+              "min": 1,
+              "max": 6,
+              "description": "Tablet."
+            },
+            "1280": {
+              "type": "integer",
+              "min": 1,
+              "max": 6,
+              "description": "Desktop."
+            }
+          }
+        },
+        "gap": {
+          "type": "integer",
+          "min": 0,
+          "max": 200,
+          "description": "Gap between items."
+        },
+        "tone": {
+          "type": "select",
+          "options": [
+            "light",
+            "dark"
+          ],
+          "description": "What the text is set for: dark = light text on a dark band. Without it, a fill's own lightness decides."
+        },
+        "align": {
+          "type": "select",
+          "options": [
+            "start",
+            "center",
+            "end"
+          ],
+          "description": "Where the heading and lead sit; read by a component whose own align is not set."
+        },
+        "radius": {
+          "type": "integer",
+          "min": 0,
+          "max": 200,
+          "description": "Card and item corner radius."
+        },
+        "minHeight": {
+          "type": "integer",
+          "min": 0,
+          "max": 2000,
+          "description": "The section's minimum height."
+        }
+      }
     }
   },
   "slots": {},
@@ -97,7 +251,7 @@
       "divi/et_pb_blurb"
     ]
   },
-  "a11y": "Steps are an <ol>, so their order and count are announced; the visible numbers are CSS counters, not text. Each title is an <h3> under the section's <h2>, or an <h2> when the section has no heading. The section is labelled by its heading when it has one.",
+  "a11y": "Steps are an <ol>, so their order and count are announced; the visible numbers are CSS counters, not text. Each title is an <h3> under the section's <h2>, or an <h2> when the section has no heading. The section is labelled by its heading when it has one. A timeline is the same <ol>; a date is a <time datetime> only when machine-readable; the rail and dots are CSS and not in the accessibility tree.",
   "pattern": {
     "summary": "ordered sequence: numbered title + short text units",
     "signals": [

package/components/tabs/Tabs.astro

@@ -5,6 +5,7 @@
 // the same markup into tabs.
 import { tv } from 'tailwind-variants'
 import Section from '../_shared/Section.astro'
+import type { MeasuredStyle } from '../_shared/types'
 
 export interface TabItem {
   label: string
@@ -47,9 +48,11 @@ interface Props {
   orientation?: 'horizontal' | 'vertical' | undefined
   tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
   id?: string | undefined
+  /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
+  measured?: MeasuredStyle | undefined
 }
 
-const { items, heading, label, style, orientation = 'horizontal', tone, id = 'tabs' } = Astro.props
+const { items, heading, label, style, orientation = 'horizontal', tone, id = 'tabs', measured } = Astro.props
 const s = tabs({ style, orientation, tone })
 const headingId = heading ? `${id}-title` : undefined
 // One level under the section heading, or the section's heading when there is none.
@@ -57,7 +60,7 @@ const PanelHeading = heading ? 'h3' : 'h2'
 const value = (i: number) => `tab-${i + 1}`
 ---
 {items.length > 0 && (
-  <Section tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
+  <Section measured={measured} tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
     {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
     <div class={s.root()} data-kit-tabs={id} data-orientation={orientation} data-label={label ?? heading ?? undefined}>
       <div class={s.list()} data-part="list">

package/components/tabs/meta.json

@@ -4,13 +4,14 @@
   "description": "Tabbed panels with the WAI-ARIA tabs pattern from Zag.js (arrow keys, Home/End, roving focus). Without script every panel shows in turn under its own title, so no content is ever hidden from a reader or a crawler.",
   "category": "content",
   "uses": [],
-  "shared": ["Section.astro"],
+  "shared": ["Section.astro", "measured.ts", "types.ts"],
   "variants": {
     "style": { "options": ["underline", "pills"], "default": "underline", "description": "underline: a rule under the list, the selected tab underlined in accent. pills: the selected tab filled with accent." },
     "orientation": { "options": ["horizontal", "vertical"], "default": "horizontal", "description": "vertical: the tab list beside the panel on wide screens (Elementor vertical tabs)." },
     "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "default", "description": "Section background." }
   },
   "props": {
+    "measured": {"type": "object", "content": false, "description": "The source section's measured style (MeasuredStyle): frame width, padding, fill, image, columns per width, gap, text tone, radius, minimum height — all in pixels. Absent, the site's tokens; present, it wins over tone and columns. Values that are not a number, a colour or a known keyword are dropped.", "fields": {"containerPx": {"type": "integer", "min": 0, "max": 2560, "description": "The frame's content width."}, "padY": {"type": "integer", "min": 0, "max": 400, "description": "Top and bottom padding."}, "padX": {"type": "integer", "min": 0, "max": 200, "description": "The frame's side padding (gutter)."}, "bg": {"type": "object", "description": "The section's background.", "fields": {"color": {"type": "string", "description": "Fill colour: hex, rgb(a) or hsl(a)."}, "image": {"type": "string", "description": "Background image address (http(s) or root-relative), drawn behind the content."}, "overlay": {"type": "string", "description": "Colour or linear/radial gradient laid over the image or the fill."}, "size": {"type": "string", "description": "cover, contain or auto; anything else draws as cover."}, "position": {"type": "string", "description": "One or two of center/top/bottom/left/right or percentages."}}}, "columns": {"type": "object", "description": "Item columns at 390 (base), 768 (md) and 1280 (lg) px; a missing width follows the narrower one.", "fields": {"390": {"type": "integer", "min": 1, "max": 6, "description": "Phone."}, "768": {"type": "integer", "min": 1, "max": 6, "description": "Tablet."}, "1280": {"type": "integer", "min": 1, "max": 6, "description": "Desktop."}}}, "gap": {"type": "integer", "min": 0, "max": 200, "description": "Gap between items."}, "tone": {"type": "select", "options": ["light", "dark"], "description": "What the text is set for: dark = light text on a dark band. Without it, a fill's own lightness decides."}, "align": {"type": "select", "options": ["start", "center", "end"], "description": "Where the heading and lead sit; read by a component whose own align is not set."}, "radius": {"type": "integer", "min": 0, "max": 200, "description": "Card and item corner radius."}, "minHeight": {"type": "integer", "min": 0, "max": 2000, "description": "The section's minimum height."}}},
     "items": { "type": "array", "required": true, "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "content": { "type": "richtext", "required": true } } }, "description": "Tabs in order (Elementor tabs tab_title/tab_content, Divi tab title + content)." },
     "heading": { "type": "string", "description": "Section heading; also names the tab list." },
     "label": { "type": "string", "description": "Accessible name of the tab list when there is no heading." },

package/components/team/Team.astro

@@ -4,7 +4,10 @@
 import { tv } from 'tailwind-variants'
 import KitImage from '../_shared/KitImage.astro'
 import Section from '../_shared/Section.astro'
+import { measuredGrid } from '../_shared/measured'
+import type { MeasuredStyle } from '../_shared/types'
 import { imageOf, type ImageSource } from '../_shared/image'
+import { profile } from './team'
 
 const team = tv({
   slots: {
@@ -12,6 +15,9 @@ const team = tv({
     heading: 'text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl',
     intro: 'text-lg opacity-80',
     list: 'grid gap-6 sm:grid-cols-2 md:gap-8',
+    socials: 'relative z-10 mt-1 flex flex-wrap gap-3 text-sm',
+    social: 'rounded text-accent-text underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent',
+    more: 'text-pretty opacity-80 [&>summary]:text-sm [&>summary]:font-medium [&>summary]:text-accent-text',
     member: 'group relative flex flex-col gap-3',
     portrait: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
     name: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)]',
@@ -23,7 +29,16 @@ const team = tv({
       '2': {},
       '3': { list: 'md:grid-cols-3' },
       '4': { list: 'lg:grid-cols-4' },
+      '5': { list: 'md:grid-cols-3 lg:grid-cols-5' },
     },
+    // How the members are laid out: a grid, one stacked row each (photo beside text), or the first member large over a grid.
+    layout: {
+      grid: {},
+      list: { list: 'grid-cols-1 sm:grid-cols-1', member: 'sm:flex-row sm:items-start sm:gap-6', portrait: 'sm:w-48 sm:shrink-0' },
+      featured: { list: '[&>li:first-child]:col-span-full [&>li:first-child]:sm:flex-row [&>li:first-child]:sm:gap-8 [&>li:first-child_.kit-portrait]:sm:w-1/2' },
+    },
+    imageShape: { square: {}, rounded: { portrait: 'rounded-[var(--radius-image,1rem)]' }, circle: { portrait: 'rounded-full' } },
+    align: { start: {}, center: { member: 'items-center text-center', socials: 'justify-center' } },
     style: {
       card: { member: 'rounded-card border border-line p-6', portrait: '-mx-6 -mt-6 mb-2 rounded-b-none' },
       plain: {},
@@ -31,7 +46,7 @@ const team = tv({
     // accent: a small accent line. plain: body-size text in the text colour, as a byline.
     roleStyle: { accent: {}, plain: { role: 'text-[length:var(--text-body,1rem)] font-normal text-current' } },
   },
-  defaultVariants: { columns: '3', style: 'card', roleStyle: 'accent' },
+  defaultVariants: { columns: '3', layout: 'grid', imageShape: 'square', align: 'start', style: 'card', roleStyle: 'accent' },
 })
 
 interface Member {
@@ -42,44 +57,73 @@ interface Member {
   image?: ImageSource | undefined
   imageAlt?: string | undefined
   href?: string | undefined
+  /** Profile addresses (the contract's `links[]`); each is labelled by the network its host names, never an invented one. */
+  links?: string[] | undefined
 }
 
 interface Props {
   heading?: string | undefined
   intro?: string | undefined
   items: Member[]
-  columns?: '2' | '3' | '4' | undefined
+  columns?: '2' | '3' | '4' | '5' | undefined
+  layout?: 'grid' | 'list' | 'featured' | undefined
+  imageShape?: 'square' | 'rounded' | 'circle' | undefined
+  align?: 'start' | 'center' | undefined
+  /** Clamp a long bio to this many lines with the rest in a native `<details>` ("Read more"). */
+  bioClamp?: 2 | 3 | 4 | undefined
+  readMoreLabel?: string | undefined
+  /** The accessible name of a profile link; `{name}` and `{network}` are replaced ("{name} on {network}"). */
+  socialLabel?: string | undefined
   style?: 'card' | 'plain' | undefined
   roleStyle?: 'accent' | 'plain' | undefined
+  /** The source section's measured style (`MeasuredStyle`): frame, padding, fill, background image, columns per width, gap. Absent, the site's tokens; present, it wins over tone and columns. */
+  measured?: MeasuredStyle | undefined
   id?: string | undefined
 }
 
-const { heading, intro, items, columns, style, roleStyle, id } = Astro.props
-const s = team({ columns, style, roleStyle })
+const { heading, intro, items, columns, layout, imageShape, align, bioClamp, readMoreLabel = 'Read more', socialLabel = '{name} on {network}', style, roleStyle, measured, id } = Astro.props
+const s = team({ columns, layout, imageShape, align, style, roleStyle })
+const clamp = { 2: 'line-clamp-2', 3: 'line-clamp-3', 4: 'line-clamp-4' } as const
+// A bio that fits the clamp needs no disclosure: short means about 160 characters per two lines, a rough, build-time guess.
+const longBio = (bio: string) => bioClamp !== undefined && bio.length > bioClamp * 80
 const headingId = heading && id ? `${id}-title` : undefined
 // One level under the section heading, or the section's heading when there is none.
 const NameHeading = heading ? 'h3' : 'h2'
 ---
 {items.length > 0 && (
-  <Section id={id} aria-labelledby={headingId}>
+  <Section measured={measured} id={id} aria-labelledby={headingId}>
     {(heading || intro) && (
       <header class={s.header()}>
         {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
         {intro && <p class={s.intro()} data-kit-text>{intro}</p>}
       </header>
     )}
-    <ul class={s.list()}>
+    <ul class={s.list({ class: measuredGrid(measured) })}>
       {items.map(member => (
         <li class={s.member()}>
           {/* The portrait's text defaults to the name: a photo of a named person is not decoration. */}
-          {imageOf(member.image, member.imageAlt ?? member.name) && <div class={s.portrait()}><KitImage image={imageOf(member.image, member.imageAlt ?? member.name)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
+          {imageOf(member.image, member.imageAlt ?? member.name) && <div class={`${s.portrait()} kit-portrait`}><KitImage image={imageOf(member.image, member.imageAlt ?? member.name)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
           <NameHeading class={s.name()}>
             {member.href
               ? <a href={member.href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{member.name}</a>
               : member.name}
           </NameHeading>
           {member.role && <p class={s.role()}>{member.role}</p>}
-          {member.bio && <p class={s.bio()} data-kit-text>{member.bio}</p>}
+          {member.bio && (longBio(member.bio)
+            ? (
+                <div class="[&:has(details[open])>p]:hidden">
+                  <p class={`${s.bio()} ${clamp[bioClamp!]}`} data-kit-text>{member.bio}</p>
+                  <details class={s.more()}><summary>{readMoreLabel}</summary><p class={s.bio()} data-kit-text>{member.bio}</p></details>
+                </div>
+              )
+            : <p class={s.bio()} data-kit-text>{member.bio}</p>)}
+          {member.links && member.links.length > 0 && (
+            <ul class={s.socials()}>
+              {member.links.map(profile).map(link => (
+                <li><a href={link.href} class={s.social()} aria-label={socialLabel.replace('{name}', member.name).replace('{network}', link.label)}>{link.label}</a></li>
+              ))}
+            </ul>
+          )}
         </li>
       ))}
     </ul>

package/components/team/fixtures.json

@@ -1,6 +1,219 @@
 [
-  {"name": "three-card", "props": {"id": "team", "heading": "The team", "intro": "Small, senior, and in the same room.", "items": [{"name": "Mira Kovač", "role": "Editor", "bio": "Keeps every page honest and every sentence short.", "image": "/kit-fixtures/avatar-1.svg", "href": "/team/mira/"}, {"name": "Jon Ade", "role": "Engineer", "bio": "Builds the sites and keeps them fast.", "image": "/kit-fixtures/avatar-2.svg", "href": "/team/jon/"}, {"name": "Lea Park", "role": "Designer", "bio": "Draws the systems the sites are made of.", "image": "/kit-fixtures/avatar-3.svg"}]}},
-  {"name": "two-plain", "props": {"columns": "2", "style": "plain", "heading": "Founders", "items": [{"name": "Mira Kovač", "role": "Co-founder", "image": "/kit-fixtures/avatar-1.svg", "imageAlt": "Mira Kovač, smiling"}, {"name": "Jon Ade", "role": "Co-founder", "image": "/kit-fixtures/avatar-2.svg"}]}},
-  {"name": "four-card-no-photos", "props": {"columns": "4", "items": [{"name": "Mira Kovač", "role": "Editor"}, {"name": "Jon Ade", "role": "Engineer"}, {"name": "Lea Park", "role": "Designer"}, {"name": "Sam Ortiz", "role": "Producer", "bio": "Keeps the schedule."}]}},
-  {"name": "three-plain-role", "props": {"heading": "Our team", "style": "plain", "roleStyle": "plain", "items": [{"name": "Mira Kovač", "role": "Editor"}, {"name": "Jon Ade", "role": "Photographer"}, {"name": "Lea Park", "role": "Route planner"}]}}
+  {
+    "name": "three-card",
+    "props": {
+      "id": "team",
+      "heading": "The team",
+      "intro": "Small, senior, and in the same room.",
+      "items": [
+        {
+          "name": "Mira Kovač",
+          "role": "Editor",
+          "bio": "Keeps every page honest and every sentence short.",
+          "image": "/kit-fixtures/avatar-1.svg",
+          "href": "/team/mira/"
+        },
+        {
+          "name": "Jon Ade",
+          "role": "Engineer",
+          "bio": "Builds the sites and keeps them fast.",
+          "image": "/kit-fixtures/avatar-2.svg",
+          "href": "/team/jon/"
+        },
+        {
+          "name": "Lea Park",
+          "role": "Designer",
+          "bio": "Draws the systems the sites are made of.",
+          "image": "/kit-fixtures/avatar-3.svg"
+        }
+      ]
+    }
+  },
+  {
+    "name": "two-plain",
+    "props": {
+      "columns": "2",
+      "style": "plain",
+      "heading": "Founders",
+      "items": [
+        {
+          "name": "Mira Kovač",
+          "role": "Co-founder",
+          "image": "/kit-fixtures/avatar-1.svg",
+          "imageAlt": "Mira Kovač, smiling"
+        },
+        {
+          "name": "Jon Ade",
+          "role": "Co-founder",
+          "image": "/kit-fixtures/avatar-2.svg"
+        }
+      ]
+    }
+  },
+  {
+    "name": "four-card-no-photos",
+    "props": {
+      "columns": "4",
+      "items": [
+        {
+          "name": "Mira Kovač",
+          "role": "Editor"
+        },
+        {
+          "name": "Jon Ade",
+          "role": "Engineer"
+        },
+        {
+          "name": "Lea Park",
+          "role": "Designer"
+        },
+        {
+          "name": "Sam Ortiz",
+          "role": "Producer",
+          "bio": "Keeps the schedule."
+        }
+      ]
+    }
+  },
+  {
+    "name": "three-plain-role",
+    "props": {
+      "heading": "Our team",
+      "style": "plain",
+      "roleStyle": "plain",
+      "items": [
+        {
+          "name": "Mira Kovač",
+          "role": "Editor"
+        },
+        {
+          "name": "Jon Ade",
+          "role": "Photographer"
+        },
+        {
+          "name": "Lea Park",
+          "role": "Route planner"
+        }
+      ]
+    }
+  },
+  {
+    "name": "five-circle",
+    "props": {
+      "columns": "5",
+      "imageShape": "circle",
+      "align": "center",
+      "style": "plain",
+      "items": [
+        {
+          "name": "Mira Kovač",
+          "role": "Editor",
+          "bio": "Keeps every page honest and every sentence short.",
+          "image": "/kit-fixtures/avatar-1.svg",
+          "href": "/team/mira/"
+        },
+        {
+          "name": "Jon Ade",
+          "role": "Engineer",
+          "bio": "Builds the sites and keeps them fast.",
+          "image": "/kit-fixtures/avatar-2.svg",
+          "href": "/team/jon/"
+        },
+        {
+          "name": "Lea Park",
+          "role": "Designer",
+          "bio": "Draws the systems the sites are made of.",
+          "image": "/kit-fixtures/avatar-3.svg"
+        },
+        {
+          "name": "Ana Ruiz",
+          "role": "Editor",
+          "bio": "Keeps every page honest and every sentence short.",
+          "image": "/kit-fixtures/avatar-1.svg"
+        },
+        {
+          "name": "Kai Berg",
+          "role": "Engineer",
+          "bio": "Builds the sites and keeps them fast.",
+          "image": "/kit-fixtures/avatar-2.svg"
+        }
+      ]
+    }
+  },
+  {
+    "name": "list-rounded",
+    "props": {
+      "layout": "list",
+      "imageShape": "rounded",
+      "items": [
+        {
+          "name": "Mira Kovač",
+          "role": "Editor",
+          "bio": "Keeps every page honest and every sentence short.",
+          "image": "/kit-fixtures/avatar-1.svg",
+          "href": "/team/mira/"
+        },
+        {
+          "name": "Jon Ade",
+          "role": "Engineer",
+          "bio": "Builds the sites and keeps them fast.",
+          "image": "/kit-fixtures/avatar-2.svg",
+          "href": "/team/jon/"
+        }
+      ]
+    }
+  },
+  {
+    "name": "featured-socials",
+    "props": {
+      "layout": "featured",
+      "items": [
+        {
+          "name": "Mira Kovač",
+          "role": "Editor",
+          "bio": "Keeps every page honest and every sentence short.",
+          "image": "/kit-fixtures/avatar-1.svg",
+          "href": "/team/mira/",
+          "links": [
+            "https://www.linkedin.com/in/mira",
+            "https://github.com/mira",
+            "https://mira.example"
+          ]
+        },
+        {
+          "name": "Jon Ade",
+          "role": "Engineer",
+          "bio": "Builds the sites and keeps them fast.",
+          "image": "/kit-fixtures/avatar-2.svg",
+          "href": "/team/jon/"
+        },
+        {
+          "name": "Lea Park",
+          "role": "Designer",
+          "bio": "Draws the systems the sites are made of.",
+          "image": "/kit-fixtures/avatar-3.svg"
+        }
+      ]
+    }
+  },
+  {
+    "name": "bio-clamp",
+    "props": {
+      "bioClamp": 2,
+      "items": [
+        {
+          "name": "Mira Kovač",
+          "role": "Editor",
+          "bio": "Spent twelve years editing a daily paper before moving to the web, where she keeps every page honest, every sentence short and every headline checked twice against the story under it.",
+          "image": "/kit-fixtures/avatar-1.svg"
+        },
+        {
+          "name": "Jon Ade",
+          "role": "Engineer",
+          "bio": "Builds the sites and keeps them fast.",
+          "image": "/kit-fixtures/avatar-2.svg"
+        }
+      ]
+    }
+  }
 ]