@contentrain/astro-kit 0.1.0

package/components/_shared/Button.astro

@@ -0,0 +1,37 @@
+---
+// A link drawn as a button — the kit's call-to-action primitive. Actions in
+// migrated content are links, so this is always an <a>.
+import { tv } from 'tailwind-variants'
+import type { ActionInput } from './types'
+
+const button = tv({
+  base: 'inline-flex items-center justify-center gap-2 rounded-md font-medium no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-2',
+  variants: {
+    style: {
+      primary: 'bg-accent text-accent-ink hover:bg-ink hover:text-surface',
+      secondary: 'bg-ink text-surface hover:bg-accent hover:text-accent-ink',
+      ghost: 'border border-current bg-transparent text-current hover:bg-ink/5',
+    },
+    size: {
+      sm: 'px-3 py-1.5 text-sm',
+      md: 'px-5 py-2.5 text-base',
+      lg: 'px-6 py-3 text-lg',
+    },
+  },
+  defaultVariants: { style: 'primary', size: 'md' },
+})
+
+interface Props {
+  action: ActionInput
+  size?: 'sm' | 'md' | 'lg' | undefined
+  class?: string | undefined
+}
+
+const { action, size, class: className } = Astro.props
+---
+<a
+  href={action.href}
+  target={action.newTab ? '_blank' : undefined}
+  rel={action.newTab ? 'noopener' : undefined}
+  class={button({ style: action.style ?? 'primary', size, class: className })}
+>{action.label}</a>

package/components/_shared/KitImage.astro

@@ -0,0 +1,21 @@
+---
+// An image through astro:assets when its size is known — optimized and
+// sized, so the layout never shifts — and a plain lazy <img> when it is not.
+import { Image } from 'astro:assets'
+import type { ImageInput } from './types'
+
+interface Props {
+  image: ImageInput
+  /** Rendered width in the layout, for srcset selection. */
+  sizes?: string | undefined
+  class?: string | undefined
+  /** The page's largest image: load it first. */
+  priority?: boolean | undefined
+}
+
+const { image, sizes = '100vw', class: className, priority = false } = Astro.props
+const loading = priority ? 'eager' : 'lazy'
+---
+{image.width && image.height
+  ? <Image src={image.src} alt={image.alt} width={image.width} height={image.height} sizes={sizes} class={className} loading={loading} fetchpriority={priority ? 'high' : 'auto'} />
+  : <img src={image.src} alt={image.alt} class={className} loading={loading} decoding="async" />}

package/components/_shared/Section.astro

@@ -0,0 +1,43 @@
+---
+// A page section: background tone, vertical rhythm and the page frame. Every
+// section component renders inside one, so sections stack evenly whatever
+// their order.
+import { tv } from 'tailwind-variants'
+
+const section = tv({
+  base: '',
+  variants: {
+    tone: {
+      default: 'bg-surface text-ink',
+      muted: 'bg-surface-muted text-ink',
+      inverse: 'bg-ink text-surface',
+      accent: 'bg-accent text-accent-ink',
+    },
+    spacing: {
+      none: '',
+      sm: 'py-8 md:py-12',
+      md: 'py-12 md:py-20',
+      lg: 'py-16 md:py-28',
+    },
+  },
+  defaultVariants: { tone: 'default', spacing: 'md' },
+})
+
+export type Tone = 'default' | 'muted' | 'inverse' | 'accent'
+
+interface Props {
+  tone?: Tone | undefined
+  spacing?: 'none' | 'sm' | 'md' | 'lg' | undefined
+  /** `page` is the full frame, `prose` the reading column, `none` for full-bleed content. */
+  width?: 'page' | 'prose' | 'none' | undefined
+  as?: 'section' | 'div' | 'aside' | undefined
+  id?: string | undefined
+  class?: string | undefined
+  'aria-labelledby'?: string | undefined
+}
+
+const { tone, spacing, width = 'page', as: Tag = 'section', id, class: className, 'aria-labelledby': labelledBy } = Astro.props
+---
+<Tag id={id} aria-labelledby={labelledBy} class={section({ tone, spacing, class: className })} data-tone={tone ?? 'default'}>
+  {width === 'none' ? <slot /> : <div class={width === 'prose' ? 'container-prose' : 'container-page'}><slot /></div>}
+</Tag>

package/components/_shared/types.ts

@@ -0,0 +1,26 @@
+// Value shapes the kit components share. Plain data — what a Contentrain
+// entry resolves to — so a page passes content straight through.
+
+/** An image with the text that replaces it. Dimensions let astro:assets size it. */
+export interface ImageInput {
+  src: string
+  alt: string
+  width?: number | undefined
+  height?: number | undefined
+}
+
+export interface LinkInput {
+  label: string
+  href: string
+  newTab?: boolean | undefined
+}
+
+/** A call to action: a link drawn as a button. */
+export interface ActionInput extends LinkInput {
+  style?: 'primary' | 'secondary' | 'ghost' | undefined
+}
+
+/** A menu entry, possibly with children (one level shown in the kit's navigation). */
+export interface NavItem extends LinkInput {
+  children?: NavItem[] | undefined
+}

package/components/breadcrumb/Breadcrumb.astro

@@ -0,0 +1,56 @@
+---
+// Where the page sits: its ancestors as links, then the page itself. Can emit
+// the matching BreadcrumbList JSON-LD.
+import { tv } from 'tailwind-variants'
+import type { LinkInput } from '../_shared/types'
+
+const breadcrumb = tv({
+  slots: {
+    list: 'flex flex-wrap items-center gap-2 text-sm text-ink-muted',
+    link: 'text-ink-muted no-underline hover:text-ink hover:underline',
+  },
+  variants: {
+    separator: { slash: {}, chevron: {}, dot: {} },
+  },
+  defaultVariants: { separator: 'slash' },
+})
+
+const MARKS = { slash: '/', chevron: '›', dot: '·' } as const
+
+interface Props {
+  /** Ancestors, root first. */
+  items: LinkInput[]
+  /** The current page's title. */
+  current: string
+  /** Accessible name ("Breadcrumb"). */
+  label?: string | undefined
+  /** Emit schema.org BreadcrumbList JSON-LD. Leave off when the page's SEO graph already has one. */
+  schema?: boolean | undefined
+  separator?: 'slash' | 'chevron' | 'dot' | undefined
+}
+
+const { items, current, label = 'Breadcrumb', schema = false, separator = 'slash' } = Astro.props
+const slots = breadcrumb({ separator })
+const origin = Astro.site ?? Astro.url
+const jsonLd = schema
+  ? JSON.stringify({
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: [...items, { label: current, href: Astro.url.pathname }].map((item, index) => ({
+      '@type': 'ListItem', position: index + 1, name: item.label, item: new URL(item.href, origin).href,
+    })),
+  }).replace(/</g, '\\u003c')
+  : undefined
+---
+<nav aria-label={label}>
+  <ol class={slots.list()}>
+    {items.map(item => (
+      <li class="flex items-center gap-2">
+        <a href={item.href} class={slots.link()}>{item.label}</a>
+        <span aria-hidden="true">{MARKS[separator]}</span>
+      </li>
+    ))}
+    <li aria-current="page" class="text-ink">{current}</li>
+  </ol>
+</nav>
+{jsonLd && <script type="application/ld+json" is:inline set:html={jsonLd} />}

package/components/breadcrumb/fixtures.json

@@ -0,0 +1,5 @@
+[
+  { "name": "slash", "props": { "items": [{ "label": "Home", "href": "/" }, { "label": "About", "href": "/about/" }], "current": "Team" } },
+  { "name": "chevron", "props": { "separator": "chevron", "items": [{ "label": "Home", "href": "/" }, { "label": "Guides", "href": "/category/guides/" }], "current": "What a careful migration keeps" } },
+  { "name": "dot-schema", "props": { "separator": "dot", "schema": true, "items": [{ "label": "Home", "href": "/" }], "current": "Contact" } }
+]

package/components/breadcrumb/meta.json

@@ -0,0 +1,27 @@
+{
+  "id": "breadcrumb",
+  "name": "Breadcrumb",
+  "description": "The page's ancestors as links followed by the page itself; optionally emits BreadcrumbList JSON-LD.",
+  "category": "content",
+  "uses": [],
+  "shared": ["types.ts"],
+  "variants": {
+    "separator": { "options": ["slash", "chevron", "dot"], "default": "slash", "description": "Mark between items." }
+  },
+  "props": {
+    "items": { "type": "array", "required": true, "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "href": { "type": "url", "required": true } } }, "description": "Ancestors, root first (pages.parent chain, or Home → category)." },
+    "current": { "type": "string", "required": true, "description": "Current page title." },
+    "label": { "type": "string", "description": "Accessible name (ui-strings nav.breadcrumb)." },
+    "schema": { "type": "boolean", "default": false, "description": "Emit BreadcrumbList JSON-LD (off when the SEO graph has one)." }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": ["yoast-seo/breadcrumbs", "rank-math/breadcrumb"],
+    "elementor": ["elementor/breadcrumbs"],
+    "divi": ["divi/et_pb_breadcrumbs"],
+    "classic": ["classic/yoast-breadcrumb", "classic/rank-math-breadcrumb"]
+  },
+  "a11y": "A labelled <nav> with an ordered list; the current page is aria-current=page and not a link; separators are aria-hidden."
+}

package/components/card-grid/CardGrid.astro

@@ -0,0 +1,82 @@
+---
+// A grid of cards — features, services, team members, linked pages — with an
+// optional heading and intro above it.
+import { tv } from 'tailwind-variants'
+import KitImage from '../_shared/KitImage.astro'
+import Section, { type Tone } from '../_shared/Section.astro'
+import type { ImageInput } from '../_shared/types'
+
+const grid = tv({
+  slots: {
+    list: 'grid items-start gap-6 md:gap-8',
+    card: 'group relative flex flex-col gap-3 rounded-[var(--radius-card)]',
+    media: 'overflow-hidden rounded-[var(--radius-card)]',
+    title: 'text-lg leading-snug font-semibold text-balance',
+    text: 'opacity-80',
+  },
+  variants: {
+    columns: {
+      '2': { list: 'sm:grid-cols-2' },
+      '3': { list: 'sm:grid-cols-2 md:grid-cols-3' },
+      '4': { list: 'sm:grid-cols-2 lg:grid-cols-4' },
+    },
+    style: {
+      plain: {},
+      bordered: { card: 'border border-line p-6', media: '-mx-6 -mt-6 mb-2 rounded-b-none' },
+      elevated: { card: 'bg-surface p-6 text-ink shadow-md ring-1 ring-line/60', media: '-mx-6 -mt-6 mb-2 rounded-b-none' },
+    },
+    align: { start: { card: 'text-left' }, center: { card: 'items-center text-center' } },
+  },
+  defaultVariants: { columns: '3', style: 'plain', align: 'start' },
+})
+
+interface Item {
+  title: string
+  text?: string | undefined
+  href?: string | undefined
+  image?: ImageInput | undefined
+  eyebrow?: string | undefined
+}
+
+interface Props {
+  title?: string | undefined
+  intro?: string | undefined
+  items: Item[]
+  /** Heading level of the section title; card titles are one level below. */
+  headingLevel?: 2 | 3 | undefined
+  columns?: '2' | '3' | '4' | undefined
+  style?: 'plain' | 'bordered' | 'elevated' | undefined
+  align?: 'start' | 'center' | undefined
+  tone?: Tone | undefined
+}
+
+const { title, intro, items, headingLevel = 2, columns, style, align, tone } = Astro.props
+const { list, card, media, title: cardTitle, text } = grid({ columns, style, align })
+// Accent backgrounds have the least contrast headroom: text on them is never dimmed.
+const dim = tone === 'accent' ? 'opacity-100' : undefined
+const Heading = `h${headingLevel}` as 'h2' | 'h3'
+const CardHeading = `h${headingLevel + 1}` as 'h3' | 'h4'
+const headingId = title ? `cards-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}` : undefined
+---
+<Section tone={tone} aria-labelledby={headingId}>
+  {(title || intro) && (
+    <header class:list={['mb-10 flex max-w-2xl flex-col gap-3', align === 'center' && 'mx-auto items-center text-center']}>
+      {title && <Heading id={headingId} class="text-3xl font-bold tracking-tight text-balance md:text-4xl">{title}</Heading>}
+      {intro && <p class:list={['text-lg', tone === 'accent' ? undefined : 'opacity-80']}>{intro}</p>}
+    </header>
+  )}
+  <ul class={list()}>
+    {items.map(item => (
+      <li class={card()}>
+        {item.image && <div class={media()}><KitImage image={item.image} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
+        {item.eyebrow && <p class="text-sm font-medium text-accent">{item.eyebrow}</p>}
+        <CardHeading class={cardTitle()}>
+          {item.href
+            ? <a href={item.href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent">{item.title}</a>
+            : item.title}
+        </CardHeading>
+        {item.text && <p class={text({ class: dim })}>{item.text}</p>}
+      </li>
+    ))}
+  </ul>
+</Section>

package/components/card-grid/fixtures.json

@@ -0,0 +1,6 @@
+[
+  { "name": "three-plain", "props": { "title": "What we do", "intro": "Three things, done carefully.", "items": [{ "title": "Design systems", "text": "Tokens, components and documentation your team keeps using.", "href": "/services/design/", "image": { "src": "/kit-fixtures/photo-1.svg", "alt": "", "width": 1200, "height": 800 } }, { "title": "Migrations", "text": "WordPress to Astro without losing an address or a ranking.", "href": "/services/migrations/", "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "", "width": 1200, "height": 800 } }, { "title": "Performance", "text": "Measured, budgeted and kept fast after launch.", "href": "/services/performance/", "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "", "width": 1200, "height": 800 } }] } },
+  { "name": "two-bordered-center", "props": { "columns": "2", "style": "bordered", "align": "center", "tone": "muted", "title": "Plans", "items": [{ "eyebrow": "Starter", "title": "One site", "text": "Everything you need for a single site." }, { "eyebrow": "Team", "title": "Many sites", "text": "Shared components across a portfolio." }] } },
+  { "name": "four-elevated-inverse", "props": { "columns": "4", "style": "elevated", "tone": "inverse", "headingLevel": 3, "title": "Team", "items": [{ "title": "Mira Kovač", "text": "Editor", "image": { "src": "/kit-fixtures/avatar-1.svg", "alt": "Mira Kovač", "width": 96, "height": 96 } }, { "title": "Jon Ade", "text": "Engineer", "image": { "src": "/kit-fixtures/avatar-2.svg", "alt": "Jon Ade", "width": 96, "height": 96 } }, { "title": "Lea Park", "text": "Designer", "image": { "src": "/kit-fixtures/avatar-3.svg", "alt": "Lea Park", "width": 96, "height": 96 } }, { "title": "Sam Ortiz", "text": "Producer" }] } },
+  { "name": "accent", "props": { "tone": "accent", "columns": "3", "items": [{ "title": "Fast", "text": "Static HTML, one stylesheet." }, { "title": "Editable", "text": "Content in Contentrain Studio." }, { "title": "Kept", "text": "Every address survives." }] } }
+]

package/components/card-grid/meta.json

@@ -0,0 +1,123 @@
+{
+  "id": "card-grid",
+  "name": "Card grid",
+  "description": "A grid of cards (features, services, team, linked pages) with an optional section heading and intro. A card with a link is clickable as a whole.",
+  "category": "section",
+  "uses": [],
+  "shared": [
+    "KitImage.astro",
+    "Section.astro",
+    "types.ts"
+  ],
+  "variants": {
+    "columns": {
+      "options": [
+        "2",
+        "3",
+        "4"
+      ],
+      "default": "3",
+      "description": "Columns on wide screens; one on phones, two on tablets."
+    },
+    "style": {
+      "options": [
+        "plain",
+        "bordered",
+        "elevated"
+      ],
+      "default": "plain",
+      "description": "Card chrome: none, a border, or a raised surface."
+    },
+    "align": {
+      "options": [
+        "start",
+        "center"
+      ],
+      "default": "start",
+      "description": "Text alignment inside cards and of the header."
+    },
+    "tone": {
+      "options": [
+        "default",
+        "muted",
+        "inverse",
+        "accent"
+      ],
+      "default": "default",
+      "description": "Section background."
+    }
+  },
+  "props": {
+    "title": {
+      "type": "string",
+      "description": "Section heading."
+    },
+    "intro": {
+      "type": "text",
+      "description": "Paragraph under the heading."
+    },
+    "items": {
+      "type": "array",
+      "required": true,
+      "items": {
+        "type": "object",
+        "fields": {
+          "title": {
+            "type": "string",
+            "required": true
+          },
+          "text": {
+            "type": "text"
+          },
+          "href": {
+            "type": "url"
+          },
+          "image": {
+            "type": "object",
+            "fields": {
+              "src": { "type": "image", "required": true },
+              "alt": { "type": "string", "required": true },
+              "width": { "type": "integer" },
+              "height": { "type": "integer" }
+            }
+          },
+          "eyebrow": {
+            "type": "string"
+          }
+        }
+      },
+      "description": "The cards. image is an ImageInput ({ src, alt, width?, height? })."
+    },
+    "headingLevel": {
+      "type": "integer",
+      "min": 2,
+      "max": 3,
+      "default": 2,
+      "description": "Level of the section heading; card titles are one below."
+    }
+  },
+  "slots": {},
+  "js": "none",
+  "dependencies": {},
+  "sources": {
+    "gutenberg": [
+      "core/columns",
+      "core/media-text"
+    ],
+    "elementor": [
+      "elementor/icon-box",
+      "elementor/image-box",
+      "elementor/call-to-action",
+      "elementor/posts"
+    ],
+    "divi": [
+      "divi/et_pb_blurb",
+      "divi/et_pb_team_member",
+      "divi/et_pb_pricing_tables"
+    ],
+    "classic": [
+      "classic/widget-area"
+    ]
+  },
+  "a11y": "A list of cards; the whole card is clickable through a stretched link on its title, so screen readers hear one link per card. The section is labelled by its heading."
+}

package/components/contact-form/ContactForm.astro

@@ -0,0 +1,79 @@
+---
+// The contact section: heading, a line of introduction, the ways to reach you
+// and the form. The form is a Contentrain Studio form (the starter's
+// StudioForm): its fields, spam protection and notifications live in Studio,
+// and submissions arrive there for review — no form plugin, no mail server.
+// Until the site is bound to a Studio project the form renders nothing and the
+// contact details still show.
+import { tv } from 'tailwind-variants'
+import Section from '../_shared/Section.astro'
+import StudioForm from '../../studio/StudioForm.astro'
+import { siteConfig } from '../../../site.config'
+
+export interface ContactDetail {
+  label: string
+  value: string
+  /** `mailto:`, `tel:` or a map link. */
+  href?: string | undefined
+}
+
+const contact = tv({
+  slots: {
+    grid: 'grid gap-10',
+    copy: 'flex flex-col gap-4',
+    heading: 'text-2xl font-bold tracking-tight text-balance md:text-3xl',
+    intro: 'max-w-xl text-pretty opacity-85',
+    details: 'mt-2 flex flex-col gap-4',
+    term: 'text-sm font-semibold opacity-75',
+    value: 'text-current',
+    form: 'rounded-card',
+  },
+  variants: {
+    layout: {
+      split: { grid: 'md:grid-cols-[2fr_3fr] md:items-start' },
+      stacked: { grid: 'mx-auto max-w-2xl' },
+    },
+    // accent/accent-ink is only ~5:1 — dimming text on it drops body copy under 4.5:1 (WCAG 1.4.3), so accent keeps it at full strength.
+    tone: { default: { form: 'border border-line bg-surface p-6 md:p-8' }, muted: { form: 'bg-surface p-6 text-ink md:p-8' }, inverse: { form: 'bg-surface p-6 text-ink md:p-8' }, accent: { form: 'bg-surface p-6 text-ink md:p-8', intro: 'opacity-100', term: 'opacity-100' } },
+  },
+  defaultVariants: { layout: 'split', tone: 'default' },
+})
+
+interface Props {
+  /** The Studio model submissions are saved to (e.g. `contact-submissions`). */
+  model: string
+  heading?: string | undefined
+  intro?: string | undefined
+  details?: ContactDetail[] | undefined
+  layout?: 'split' | 'stacked' | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  id?: string | undefined
+}
+
+const { model, heading, intro, details = [], layout, tone, id = 'contact' } = Astro.props
+// No Studio project bound: no form renders, so a split would leave an empty column — the details stand alone.
+const formShown = Boolean(siteConfig.studio)
+const s = contact({ layout: formShown ? layout : 'stacked', tone })
+const headingId = heading ? `${id}-title` : undefined
+---
+<Section tone={tone} spacing="md" id={id} aria-labelledby={headingId}>
+  <div class={s.grid()}>
+    {(heading || intro || details.length > 0) && (
+      <div class={s.copy()}>
+        {heading && <h2 id={headingId} class={s.heading()}>{heading}</h2>}
+        {intro && <p class={s.intro()}>{intro}</p>}
+        {details.length > 0 && (
+          <dl class={s.details()}>
+            {details.map(detail => (
+              <div>
+                <dt class={s.term()}>{detail.label}</dt>
+                <dd class={s.value()}>{detail.href ? <a href={detail.href} class="underline decoration-line underline-offset-4 hover:decoration-current">{detail.value}</a> : detail.value}</dd>
+              </div>
+            ))}
+          </dl>
+        )}
+      </div>
+    )}
+    {formShown && <StudioForm model={model} class={s.form()} />}
+  </div>
+</Section>

package/components/contact-form/fixtures.json

@@ -0,0 +1,18 @@
+[
+  {
+    "name": "split",
+    "props": {
+      "model": "contact-submissions",
+      "heading": "Get in touch",
+      "intro": "Questions, corrections and invitations are all welcome. We answer within two working days.",
+      "details": [
+        { "label": "Email", "value": "hello@northwind.example", "href": "mailto:hello@northwind.example" },
+        { "label": "Phone", "value": "+351 21 000 0000", "href": "tel:+351210000000" },
+        { "label": "Studio", "value": "Rua das Flores 12, Lisbon" }
+      ]
+    }
+  },
+  { "name": "stacked-muted", "props": { "model": "contact-submissions", "heading": "Write to us", "layout": "stacked", "tone": "muted", "id": "write" } },
+  { "name": "split-inverse", "props": { "model": "contact-submissions", "heading": "Press", "tone": "inverse", "id": "press", "details": [{ "label": "Press office", "value": "press@northwind.example", "href": "mailto:press@northwind.example" }] } },
+  { "name": "stacked-accent", "props": { "model": "newsletter-requests", "heading": "Request a print copy", "layout": "stacked", "tone": "accent", "id": "print" } }
+]

package/components/contact-form/meta.json

@@ -0,0 +1,28 @@
+{
+  "id": "contact-form",
+  "name": "Contact form",
+  "description": "The contact section: heading, introduction, contact details (email, phone, address) and a Contentrain Studio form — fields, spam protection and notifications set in Studio, submissions reviewed there. Replaces form plugins; renders the details alone until the site is bound to a Studio project.",
+  "category": "section",
+  "uses": [],
+  "shared": ["Section.astro"],
+  "variants": {
+    "layout": { "options": ["split", "stacked"], "default": "split", "description": "split: details beside the form on wide screens. stacked: one centred column." },
+    "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "default", "description": "Section background; the form always sits on a surface card." }
+  },
+  "props": {
+    "model": { "type": "string", "required": true, "description": "The Studio model submissions are saved to — the form's fields are that model's form settings (from the plugin form's fields at migration)." },
+    "heading": { "type": "string", "description": "Section heading." },
+    "intro": { "type": "text", "description": "A line or two above the details." },
+    "details": { "type": "array", "items": { "type": "object", "fields": { "label": { "type": "string", "required": true }, "value": { "type": "string", "required": true }, "href": { "type": "url" } } }, "description": "Ways to reach you, in order (Email → mailto:, Phone → tel:, Address → map link)." },
+    "id": { "type": "string", "description": "Section id; the heading gets `<id>-title`." }
+  },
+  "slots": {},
+  "js": "studio",
+  "dependencies": {},
+  "sources": {
+    "elementor": ["elementor/form"],
+    "divi": ["divi/et_pb_contact_form"],
+    "classic": ["classic/contact-form-7", "classic/wpforms", "classic/gravityforms", "classic/ninja-forms"]
+  },
+  "a11y": "Contact details are a description list; links say what they open. The form's labels, errors and focus handling are Studio's form runtime (FormMount). The section is labelled by its heading."
+}

package/components/cta/Cta.astro

@@ -0,0 +1,64 @@
+---
+// A call to action: a short heading, a line of text and one or two buttons —
+// across the full section, or as a card inside it.
+import { tv } from 'tailwind-variants'
+import Button from '../_shared/Button.astro'
+import Section from '../_shared/Section.astro'
+import type { ActionInput } from '../_shared/types'
+
+const cta = tv({
+  slots: {
+    box: 'flex flex-col gap-6',
+    copy: 'flex flex-col gap-3',
+    heading: 'text-2xl font-bold tracking-tight text-balance md:text-3xl',
+    body: 'max-w-2xl text-pretty opacity-85',
+    actions: 'flex flex-wrap gap-3',
+  },
+  variants: {
+    layout: {
+      inline: { box: 'md:flex-row md:items-center md:justify-between', actions: 'md:shrink-0' },
+      centered: { box: 'items-center text-center', body: 'mx-auto', actions: 'justify-center' },
+    },
+    frame: {
+      full: {},
+      card: { box: 'rounded-card border border-line p-8 md:p-12' },
+    },
+    // accent/accent-ink is only ~5:1 — dimming text on it drops body copy under 4.5:1 (WCAG 1.4.3), so accent keeps it at full strength.
+    tone: { default: {}, muted: {}, inverse: {}, accent: { body: 'opacity-100' } },
+  },
+  compoundVariants: [
+    // A card carries the tone itself, on a plain section; a plain card still needs a surface to read as one.
+    { frame: 'card', tone: 'default', class: { box: 'bg-surface-muted text-ink' } },
+    { frame: 'card', tone: 'muted', class: { box: 'border-transparent bg-surface-muted text-ink' } },
+    { frame: 'card', tone: 'inverse', class: { box: 'border-transparent bg-ink text-surface' } },
+    { frame: 'card', tone: 'accent', class: { box: 'border-transparent bg-accent text-accent-ink' } },
+  ],
+  defaultVariants: { layout: 'inline', frame: 'full', tone: 'accent' },
+})
+
+interface Props {
+  heading: string
+  body?: string | undefined
+  actions: ActionInput[]
+  layout?: 'inline' | 'centered' | undefined
+  frame?: 'full' | 'card' | undefined
+  tone?: 'default' | 'muted' | 'inverse' | 'accent' | undefined
+  id?: string | undefined
+}
+
+const { heading, body, actions, layout, frame, tone = 'accent', id } = Astro.props
+const s = cta({ layout, frame, tone })
+const headingId = id ? `${id}-title` : undefined
+// On the accent background the primary button (accent) would vanish: it is drawn as the secondary style there.
+const onAccent = (action: ActionInput): ActionInput => ({ label: action.label, href: action.href, newTab: action.newTab, style: 'secondary' })
+const shown = actions.map(action => (tone === 'accent' && (action.style ?? 'primary') === 'primary' ? onAccent(action) : action))
+---
+<Section tone={frame === 'card' ? 'default' : tone} spacing="md" id={id} aria-labelledby={headingId}>
+  <div class={s.box()}>
+    <div class={s.copy()}>
+      <h2 id={headingId} class={s.heading()}>{heading}</h2>
+      {body && <p class={s.body()}>{body}</p>}
+    </div>
+    {shown.length > 0 && <div class={s.actions()}>{shown.map(action => <Button action={action} size="lg" />)}</div>}
+  </div>
+</Section>

package/components/cta/fixtures.json

@@ -0,0 +1,6 @@
+[
+  { "name": "inline-accent", "props": { "heading": "Get the next issue in your inbox", "body": "One email a month. No tracking, unsubscribe any time.", "actions": [{ "label": "Subscribe", "href": "/subscribe/" }] } },
+  { "name": "centered-inverse", "props": { "heading": "Planning a trip?", "body": "Start with the guides readers use most.", "layout": "centered", "tone": "inverse", "actions": [{ "label": "Popular guides", "href": "/guides/" }, { "label": "Ask a question", "href": "/contact/", "style": "ghost" }] } },
+  { "name": "card-default", "props": { "heading": "Write for the journal", "body": "We publish reader essays every season.", "frame": "card", "tone": "default", "actions": [{ "label": "Pitch an essay", "href": "/pitch/" }] } },
+  { "name": "card-muted", "props": { "heading": "Support independent travel writing", "frame": "card", "tone": "muted", "layout": "centered", "actions": [{ "label": "Become a member", "href": "/members/" }] } }
+]