From b243396f096094d7d3d87d758dcbb8d2a0d02532 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Thu, 24 Sep 2026 22:04:45 -0300
Subject: [PATCH 1/2] feat(webkit): add the section-module marketing component

---
 .specs/section-module.md                      | 149 +++++++++++++++
 .../section-module/SectionModule.stories.js   | 178 ++++++++++++++++++
 packages/webkit/.size-limit.json              |   5 +
 packages/webkit/catalog.json                  |  94 +++++++++
 packages/webkit/package.json                  |   3 +-
 .../section-module/section-module.test.ts     |  83 ++++++++
 .../section-module/section-module.vue         |  87 +++++++++
 7 files changed, 598 insertions(+), 1 deletion(-)
 create mode 100644 .specs/section-module.md
 create mode 100644 apps/storybook/src/stories/components/marketing/section-module/SectionModule.stories.js
 create mode 100644 packages/webkit/src/components/marketing/section-module/section-module.test.ts
 create mode 100644 packages/webkit/src/components/marketing/section-module/section-module.vue

diff --git a/.specs/section-module.md b/.specs/section-module.md
new file mode 100644
index 000000000..7a9a79d85
--- /dev/null
+++ b/.specs/section-module.md
@@ -0,0 +1,149 @@
+---
+name: section-module
+category: marketing
+structure: monolithic
+status: approved
+spec_version: 1
+checksum: 9d1d5387f6f8ac5c222b7c2a1bc1ff36fe7e502e93c63dabab895ebc0b342c43
+style_seam: true
+created: 2026-09-23
+last_updated: 2026-09-23
+---
+
+# Section Module — Component Spec
+
+## Purpose
+
+The brick of the page column: a section whose header row is divided from its body by a hairline and which is divided from the module above it by another. Stacked inside a `section-container`, a run of modules reads as one continuous frame, because each module draws only its own top rule and hands its sides to the column. It is where a band's header and a band's content are joined, so no page has to re-draw that join.
+
+## When to use
+
+- For every band stacked inside a `section-container`.
+- Whenever a band needs a header row divided from its content by a rule.
+- For a body-only band, by passing no title and no header slot.
+
+## When NOT to use
+
+- For the full-bleed band at the top of a page → use `hero`.
+- For the column the modules stack inside → use `section-container`.
+- For the header alone, with no body → use `section-title`, which this module composes.
+- For a hairline grid of cells → use `card-grid` inside this module's body.
+
+## Related
+
+- `section-container` — the framed column this module stacks inside.
+- `section-title` — the header row this module renders by default.
+- `card-grid` — the edge-to-edge cell grid a module's body commonly holds.
+- `frame-box` — the registration frame a body wraps itself in.
+
+## Best practices
+
+- Pass `divided` as `false` on the first module in a column: its top edge is already the hero's bottom rule, and drawing its own would put two hairlines on one pixel.
+- Pass `padded` as `false` when the body is an edge-to-edge `card-grid`, so the grid's rules meet the frame with no gutter.
+- Use `title` and `eyebrow` for the ordinary header, and reach for the `header` slot only when the row needs markup the default header cannot express.
+
+## Usage
+
+```vue
+<script setup>
+import SectionModule from '@aziontech/webkit/section-module'
+</script>
+
+<template>
+  <SectionModule
+    :divided="false"
+    eyebrow="Platform"
+    title="Build, run, and protect applications"
+  >
+    <p>Everything the band has to say.</p>
+  </SectionModule>
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `title` | `string` | `''` | false | Headline of the module's header row, rendered as its `h2`. |
+| `description` | `string` | `''` | false | Supporting sentence under the headline. |
+| `eyebrow` | `string` | `''` | false | Short uppercase overline rendered above the headline. |
+| `kind` | `SectionModuleKind` | `'left'` | false | Layout of the default header row. |
+| `divided` | `boolean` | `true` | false | Draw the top rule that divides this module from the one above it. |
+| `padded` | `boolean` | `true` | false | Pad the module's body. Leave off for an edge-to-edge grid that owns its cell padding. |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `default` | — | The module's body. |
+| `header` | — | Replaces the default header row entirely. |
+| `actions` | — | Trailing controls inside the default header row. |
+
+## States
+
+- Visual states: `default`
+- `data-kind` carries the header layout
+- `data-divided` present when the top rule is drawn
+- `data-padded` present when the body is padded
+
+## Motion & Animations
+
+_none_
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| module rule | `var(--border-default)` |
+| body padding | `var(--spacing-xl)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| _none_ | — | — |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: not applicable — the module is a container; controls composed into it keep their own `focus-visible:ring-2 focus-visible:ring-(--ring-color)` ring.
+- Keyboard map: none — the module is not focusable; `Tab` order is decided entirely by the slotted content.
+- ARIA: the root renders a `section` and adds no role; the header's heading level comes from `section-title`, so a page's headings stay in order.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons) — the rules are non-informational decoration and the header and body own their own contrast.
+- `motion-reduce:transition-none motion-reduce:transform-none` — not applicable, the component is static.
+- Touch target ≥40×40 px — not applicable, no interactive control of its own.
+
+## Stories (Storybook)
+
+- Default
+- Kinds — composite story rendering the header layouts side-by-side (justified: the layouts differ only in where the copy sits, which is legible only in comparison)
+- Divided — a stack of two modules with the first undivided (justified: a shared edge is invisible on a single module, and the story is what proves the rule is drawn once)
+- Padded — the module with an edge-to-edge body (mutually-exclusive boolean state of the `padded` prop)
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not export composition sub-components without attaching them to the root compound (`index.ts` via `Object.assign`; vue-tsc generates `index.d.ts` — never hand-write it); the root export points at `index.ts`, and a standalone `./<name>-root` export points at the root `.vue` (tree-shaking). Do not invent overlay part names (`Trigger` / `Content`) on a component with no `data-state=open|closed`, and do not collapse a slot-shaped concern into a config-array prop. See `.claude/rules/compound-api.md`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/apps/storybook/src/stories/components/marketing/section-module/SectionModule.stories.js b/apps/storybook/src/stories/components/marketing/section-module/SectionModule.stories.js
new file mode 100644
index 000000000..780211aca
--- /dev/null
+++ b/apps/storybook/src/stories/components/marketing/section-module/SectionModule.stories.js
@@ -0,0 +1,178 @@
+import SectionModule from '@aziontech/webkit/section-module'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = "import SectionModule from '@aziontech/webkit/section-module'"
+
+const BODY = 'text-body-md text-(--text-muted)'
+
+/** @type {import('@storybook/vue3').Meta<typeof SectionModule>} */
+const meta = {
+  title: 'Components/Marketing/SectionModule',
+  component: SectionModule,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: { default: 'dark' },
+    docs: {
+      description: {
+        component:
+          'The brick of the page column: a section whose header row is divided from its body by a hairline and which is divided from the module above it by another. Stacked inside a `SectionContainer`, a run of modules reads as one continuous frame, because each module draws only its own top rule and hands its sides to the column.'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Headline of the module’s header row, rendered as its `h2`.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: "''" } }
+    },
+    description: {
+      control: 'text',
+      description: 'Supporting sentence under the headline.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: "''" } }
+    },
+    eyebrow: {
+      control: 'text',
+      description: 'Short uppercase overline rendered above the headline.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: "''" } }
+    },
+    kind: {
+      control: 'inline-radio',
+      options: ['centered', 'left', 'horizontal'],
+      description: 'Layout of the default header row.',
+      table: {
+        category: 'props',
+        type: { summary: "'centered' | 'left' | 'horizontal'" },
+        defaultValue: { summary: "'left'" }
+      }
+    },
+    divided: {
+      control: 'boolean',
+      description: 'Draw the top rule that divides this module from the one above it.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'true' } }
+    },
+    padded: {
+      control: 'boolean',
+      description:
+        'Pad the module’s body. Leave off for an edge-to-edge grid that owns its cell padding.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'true' } }
+    }
+  },
+  args: {
+    title: 'Build, run, and protect applications',
+    description: 'One sentence naming what the band is about.',
+    eyebrow: 'Platform',
+    kind: 'left',
+    divided: true,
+    padded: true
+  }
+}
+
+export default meta
+
+const Template = (args) => ({
+  components: { SectionModule },
+  setup() {
+    return { args, body: BODY }
+  },
+  template: `
+    <SectionModule v-bind="args">
+      <p class="m-0" :class="body">Everything the band has to say.</p>
+    </SectionModule>
+  `
+})
+
+const DEFAULT_MARKUP = `<SectionModule
+  eyebrow="Platform"
+  title="Build, run, and protect applications"
+  description="One sentence naming what the band is about."
+>
+  <p class="m-0 ${BODY}">Everything the band has to say.</p>
+</SectionModule>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof SectionModule>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A header row divided from the body by one hairline. The header is a `SectionTitle`, so the module never re-implements that anatomy.'
+      },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const KINDS_TEMPLATE = `<div>
+  <SectionModule :divided="false" kind="left" eyebrow="Platform" title="Left">
+    <p class="m-0 ${BODY}">The header sits at the start edge.</p>
+  </SectionModule>
+  <SectionModule kind="centered" eyebrow="Platform" title="Centered">
+    <p class="m-0 ${BODY}">The header is centered.</p>
+  </SectionModule>
+  <SectionModule kind="horizontal" eyebrow="Platform" title="Horizontal" description="The description takes its own column.">
+    <p class="m-0 ${BODY}">The headline and its description share a row.</p>
+  </SectionModule>
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof SectionModule>} */
+export const Kinds = {
+  render: () => ({ components: { SectionModule }, template: KINDS_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story: 'The three header layouts, stacked — they differ only in where the copy sits.'
+      },
+      source: { code: toSfc(IMPORT, KINDS_TEMPLATE) }
+    }
+  }
+}
+
+const DIVIDED_TEMPLATE = `<div>
+  <SectionModule :divided="false" title="First module">
+    <p class="m-0 ${BODY}">Its top edge belongs to the hero above it, so it draws none.</p>
+  </SectionModule>
+  <SectionModule title="Second module">
+    <p class="m-0 ${BODY}">This one draws the rule that divides the two.</p>
+  </SectionModule>
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof SectionModule>} */
+export const Divided = {
+  render: () => ({ components: { SectionModule }, template: DIVIDED_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'Two modules, the first undivided. A shared edge is invisible on a single module — the stack is what proves the rule is drawn once.'
+      },
+      source: { code: toSfc(IMPORT, DIVIDED_TEMPLATE) }
+    }
+  }
+}
+
+const PADDED_TEMPLATE = `<SectionModule :padded="false" title="Edge-to-edge body">
+  <div class="border-t border-(--border-default) p-(--spacing-xl) ${BODY}">
+    The body owns its own padding, so the grid inside it meets the frame with no gutter.
+  </div>
+</SectionModule>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof SectionModule>} */
+export const Padded = {
+  render: () => ({ components: { SectionModule }, template: PADDED_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'With `padded` off the body runs edge to edge, for a grid that owns its cell padding.'
+      },
+      source: { code: toSfc(IMPORT, PADDED_TEMPLATE) }
+    }
+  }
+}
diff --git a/packages/webkit/.size-limit.json b/packages/webkit/.size-limit.json
index dbcbf8e11..76ee520d4 100644
--- a/packages/webkit/.size-limit.json
+++ b/packages/webkit/.size-limit.json
@@ -134,6 +134,11 @@
     "path": "src/components/layout/resizable-panel/resizable-panel.vue",
     "limit": "3 KB"
   },
+  {
+    "name": "section-module",
+    "path": "src/components/marketing/section-module/section-module.vue",
+    "limit": "3 KB"
+  },
   {
     "name": "illustration",
     "path": "src/components/content/illustration/illustration.vue",
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 039f4a19f..631854f34 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -11324,6 +11324,100 @@
       "target": "./src/vite/index.js",
       "kind": "other",
       "treeShakeableImport": "@aziontech/webkit/vite"
+    },
+    "section-module": {
+      "import": "@aziontech/webkit/section-module",
+      "target": "./src/components/marketing/section-module/section-module.vue",
+      "kind": "component",
+      "treeShakeableImport": "@aziontech/webkit/section-module",
+      "category": "marketing",
+      "structure": "monolithic",
+      "status": "approved",
+      "props": [
+        {
+          "name": "title",
+          "type": "string",
+          "default": "''",
+          "required": "false",
+          "doc": "Headline of the module's header row, rendered as its `h2`."
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "default": "''",
+          "required": "false",
+          "doc": "Supporting sentence under the headline."
+        },
+        {
+          "name": "eyebrow",
+          "type": "string",
+          "default": "''",
+          "required": "false",
+          "doc": "Short uppercase overline rendered above the headline."
+        },
+        {
+          "name": "kind",
+          "type": "SectionModuleKind",
+          "default": "'left'",
+          "required": "false",
+          "doc": "Layout of the default header row."
+        },
+        {
+          "name": "divided",
+          "type": "boolean",
+          "default": "true",
+          "required": "false",
+          "doc": "Draw the top rule that divides this module from the one above it."
+        },
+        {
+          "name": "padded",
+          "type": "boolean",
+          "default": "true",
+          "required": "false",
+          "doc": "Pad the module's body. Leave off for an edge-to-edge grid that owns its cell padding."
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "scope": "—",
+          "notes": "The module's body."
+        },
+        {
+          "name": "header",
+          "scope": "—",
+          "notes": "Replaces the default header row entirely."
+        },
+        {
+          "name": "actions",
+          "scope": "—",
+          "notes": "Trailing controls inside the default header row."
+        }
+      ],
+      "purpose": "The brick of the page column: a section whose header row is divided from its body by a hairline and which is divided from the module above it by another. Stacked inside a `section-container`, a run of modules reads as one continuous frame, because each module draws only its own top rule and hands its sides to the column. It is where a band's header and a band's content are joined, so no page has to re-draw that join.",
+      "useWhen": [
+        "For every band stacked inside a `section-container`.",
+        "Whenever a band needs a header row divided from its content by a rule.",
+        "For a body-only band, by passing no title and no header slot."
+      ],
+      "avoidWhen": [
+        "For the full-bleed band at the top of a page → use `hero`.",
+        "For the column the modules stack inside → use `section-container`.",
+        "For the header alone, with no body → use `section-title`, which this module composes.",
+        "For a hairline grid of cells → use `card-grid` inside this module's body."
+      ],
+      "related": [
+        "section-container` — the framed column this module stacks inside.",
+        "section-title` — the header row this module renders by default.",
+        "card-grid` — the edge-to-edge cell grid a module's body commonly holds.",
+        "frame-box` — the registration frame a body wraps itself in."
+      ],
+      "bestPractices": [
+        "Pass `divided` as `false` on the first module in a column: its top edge is already the hero's bottom rule, and drawing its own would put two hairlines on one pixel.",
+        "Pass `padded` as `false` when the body is an edge-to-edge `card-grid`, so the grid's rules meet the frame with no gutter.",
+        "Use `title` and `eyebrow` for the ordinary header, and reach for the `header` slot only when the row needs markup the default header cannot express."
+      ],
+      "styleSeam": true
     }
   }
 }
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index d69e67e99..fbb3bc6b2 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -346,6 +346,7 @@
     "./use-focus-trap": "./src/composables/use-focus-trap/index.js",
     "./use-heading-nav": "./src/composables/use-heading-nav/index.ts",
     "./use-placement": "./src/composables/use-placement/index.ts",
-    "./vite": "./src/vite/index.js"
+    "./vite": "./src/vite/index.js",
+    "./section-module": "./src/components/marketing/section-module/section-module.vue"
   }
 }
diff --git a/packages/webkit/src/components/marketing/section-module/section-module.test.ts b/packages/webkit/src/components/marketing/section-module/section-module.test.ts
new file mode 100644
index 000000000..ec345f7e9
--- /dev/null
+++ b/packages/webkit/src/components/marketing/section-module/section-module.test.ts
@@ -0,0 +1,83 @@
+import { render } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+
+import { expectNoA11yViolations } from '../../../test/axe'
+import SectionModule from './section-module.vue'
+
+const TESTID = 'marketing-section-module'
+
+describe('SectionModule', () => {
+  it('renders with the default testid and the default brick configuration', () => {
+    const { getByTestId } = render(SectionModule)
+    const root = getByTestId(TESTID)
+
+    expect(root).toBeInTheDocument()
+    expect(root.tagName).toBe('SECTION')
+    expect(root).toHaveAttribute('data-kind', 'left')
+    expect(root).toHaveAttribute('data-divided')
+    expect(root).toHaveAttribute('data-padded')
+  })
+
+  it('lets a consumer-supplied data-testid win', () => {
+    const { getByTestId } = render(SectionModule, {
+      attrs: { 'data-testid': 'custom-module' }
+    })
+    expect(getByTestId('custom-module')).toBeInTheDocument()
+  })
+
+  it('drops its top rule when divided is false', () => {
+    const { getByTestId } = render(SectionModule, { props: { divided: false } })
+    expect(getByTestId(TESTID)).not.toHaveAttribute('data-divided')
+  })
+
+  it('drops its body padding when padded is false', () => {
+    const { getByTestId } = render(SectionModule, { props: { padded: false } })
+    expect(getByTestId(TESTID)).not.toHaveAttribute('data-padded')
+  })
+
+  it('renders the default header from title, eyebrow and description', () => {
+    const { getByRole, getByText } = render(SectionModule, {
+      props: { title: 'Platform', eyebrow: 'Build', description: 'One sentence.' }
+    })
+
+    expect(getByRole('heading', { level: 2, name: 'Platform' })).toBeInTheDocument()
+    expect(getByText('Build')).toBeInTheDocument()
+    expect(getByText('One sentence.')).toBeInTheDocument()
+  })
+
+  it('renders no header row when there is no title and no header slot', () => {
+    const { queryByRole } = render(SectionModule, { slots: { default: '<p>body</p>' } })
+    expect(queryByRole('heading')).toBeNull()
+  })
+
+  it('lets the header slot replace the default header row', () => {
+    const { getByText, queryByRole } = render(SectionModule, {
+      props: { title: 'Platform' },
+      slots: { header: '<div>custom header</div>' }
+    })
+
+    expect(getByText('custom header')).toBeInTheDocument()
+    expect(queryByRole('heading', { name: 'Platform' })).toBeNull()
+  })
+
+  it('renders the actions slot inside the default header row', () => {
+    const { getByText } = render(SectionModule, {
+      props: { title: 'Platform' },
+      slots: { actions: '<button>Docs</button>' }
+    })
+    expect(getByText('Docs')).toBeInTheDocument()
+  })
+
+  it('renders its body', () => {
+    const { getByText } = render(SectionModule, { slots: { default: '<p>body</p>' } })
+    expect(getByText('body')).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(SectionModule, {
+      props: { title: 'Platform', eyebrow: 'Build' },
+      slots: { default: '<p>body</p>' }
+    })
+    await expectNoA11yViolations(container)
+  })
+})
diff --git a/packages/webkit/src/components/marketing/section-module/section-module.vue b/packages/webkit/src/components/marketing/section-module/section-module.vue
new file mode 100644
index 000000000..5b55f71e0
--- /dev/null
+++ b/packages/webkit/src/components/marketing/section-module/section-module.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+
+  import SectionTitle from '../section-title/section-title.vue'
+
+  defineOptions({
+    name: 'SectionModule',
+    inheritAttrs: false
+  })
+
+  /** Layout of the default header row. */
+  export type SectionModuleKind = 'centered' | 'left' | 'horizontal'
+
+  interface Props {
+    /** Headline of the module's header row, rendered as its `h2`. */
+    title?: string
+    /** Supporting sentence under the headline. */
+    description?: string
+    /** Short uppercase overline rendered above the headline. */
+    eyebrow?: string
+    /** Layout of the default header row. */
+    kind?: SectionModuleKind
+    /** Draw the top rule that divides this module from the one above it. */
+    divided?: boolean
+    /** Pad the module's body. Leave off for an edge-to-edge grid that owns its cell padding. */
+    padded?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    title: '',
+    description: '',
+    eyebrow: '',
+    kind: 'left',
+    divided: true,
+    padded: true
+  })
+
+  const slots = defineSlots<{
+    /** The module's body. */
+    default?(): unknown
+    /** Replaces the default header row entirely. */
+    header?(): unknown
+    /** Trailing controls inside the default header row. */
+    actions?(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const testId = computed(() => (attrs['data-testid'] as string) ?? 'marketing-section-module')
+  const hasHeader = computed(() => Boolean(slots.header || props.title))
+</script>
+
+<template>
+  <section
+    v-bind="$attrs"
+    :data-testid="testId"
+    :data-kind="kind"
+    :data-divided="props.divided || null"
+    :data-padded="props.padded || null"
+    class="w-full data-[divided]:border-t data-[divided]:border-(--border-default)"
+  >
+    <slot
+      v-if="hasHeader"
+      name="header"
+    >
+      <SectionTitle
+        :kind="kind"
+        :title="title"
+        :description="description"
+        :eyebrow="eyebrow"
+      >
+        <template
+          v-if="slots.actions"
+          #actions
+        >
+          <slot name="actions" />
+        </template>
+      </SectionTitle>
+    </slot>
+
+    <div
+      :data-padded="props.padded || null"
+      class="data-[padded]:p-(--spacing-xl)"
+    >
+      <slot />
+    </div>
+  </section>
+</template>

From 74cd0b5868d0134b26f0adf50937a8f5bfe5c0cd Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Mon, 28 Sep 2026 07:29:41 -0300
Subject: [PATCH 2/2] fix(webkit): set section-module's first budget from the
 integrated measure

Measured with section-title and card-grid present: the component composes them, so its own branch could not measure it.
---
 packages/webkit/.size-limit.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webkit/.size-limit.json b/packages/webkit/.size-limit.json
index 76ee520d4..5f4ce6223 100644
--- a/packages/webkit/.size-limit.json
+++ b/packages/webkit/.size-limit.json
@@ -137,7 +137,7 @@
   {
     "name": "section-module",
     "path": "src/components/marketing/section-module/section-module.vue",
-    "limit": "3 KB"
+    "limit": "4.25 KB"
   },
   {
     "name": "illustration",