From 7c37365df0c1531542dfe6b31995d816d0af11a2 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Thu, 24 Sep 2026 22:04:30 -0300
Subject: [PATCH 1/4] feat(webkit): add the content-columns marketing component

---
 .specs/content-columns.md                     | 153 ++++++++++++++++
 .../content-columns/ContentColumns.stories.js | 167 ++++++++++++++++++
 packages/webkit/.size-limit.json              |   5 +
 packages/webkit/catalog.json                  |  71 ++++++++
 packages/webkit/package.json                  |   1 +
 .../content-columns/content-columns.test.ts   | 142 +++++++++++++++
 .../content-columns/content-columns.vue       |  89 ++++++++++
 7 files changed, 628 insertions(+)
 create mode 100644 .specs/content-columns.md
 create mode 100644 apps/storybook/src/stories/components/marketing/content-columns/ContentColumns.stories.js
 create mode 100644 packages/webkit/src/components/marketing/content-columns/content-columns.test.ts
 create mode 100644 packages/webkit/src/components/marketing/content-columns/content-columns.vue

diff --git a/.specs/content-columns.md b/.specs/content-columns.md
new file mode 100644
index 000000000..2787f4e1d
--- /dev/null
+++ b/.specs/content-columns.md
@@ -0,0 +1,153 @@
+---
+name: content-columns
+category: marketing
+structure: monolithic
+status: implemented
+spec_version: 2
+checksum: 4164a7ac1a16b8ed89832e54017508c7a06e2153282c7fd2bc959adbb17d0640
+created: 2026-09-22
+last_updated: 2026-09-23
+---
+
+# Content Columns — Component Spec
+
+## Purpose
+
+A titled band whose body is two or three columns of short copy, drawn in one hairline `card-grid` so the columns read as a single surface. It is the plainest way to state a few parallel points under one section header.
+
+## When to use
+
+- For two or three parallel points that carry equal weight under one section heading.
+- When each point is a short title and a sentence — no icon, no media, no link.
+- As the body of a product or platform section that needs structure but not tiles.
+
+## When NOT to use
+
+- When the points are unequal and one deserves the full width → use `bento-grid`.
+- When each point needs an icon, a link or its own surface → use `feature-card` in a grid the page owns.
+- For measured figures → use `big-numbers`.
+- For one point paired with a picture → use `media-split`.
+
+## Related
+
+- `bento-grid` — the same collapsed-rule grid with unequal, slot-composed cells.
+- `feature-card` — the richer unit when a point needs an icon or a destination.
+- `section-title` — the header this band renders above its columns.
+- `big-numbers` — the numeric sibling of this grid.
+
+## Best practices
+
+- The band draws no frame of its own: the rule and the corner marks belong to the `section-module` or `frame-box` that the page assembles it into, so a band placed in a framed column never lands a second hairline on the column's own.
+
+- Keep every column to a title and one or two sentences; the grid stretches to the tallest, so one long column pads the rest.
+- Use three columns for three peers and two for a contrast; four points want `bento-grid` or a card grid instead.
+- Write the column titles in parallel grammar — they are read across, not down.
+- Leave `title` out when the band sits directly under another header; two headings in a row is one too many.
+
+## Usage
+
+```vue
+<script setup>
+import ContentColumns from '@aziontech/webkit/content-columns'
+</script>
+
+<template>
+  <ContentColumns
+    eyebrow="How it works"
+    title="Three things happen on every request."
+    :columns="3"
+    :items="[
+      { title: 'Routed', description: 'The request lands at the location closest to the user.' },
+      { title: 'Executed', description: 'Your code runs there, with no cold region to warm up.' },
+      { title: 'Cached', description: 'The response is held at that edge for the next request.' }
+    ]"
+  />
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `items` | `ContentColumnItem[]` | `[]` | false | The columns, in reading order; each item is `{ title, description }`. |
+| `title` | `string` | `''` | false | Headline of the band, rendered as its `h2` above the columns. |
+| `description` | `string` | `''` | false | Supporting sentence under the headline. |
+| `eyebrow` | `string` | `''` | false | Short uppercase overline rendered above the headline. |
+| `columns` | `2 \| 3` | `3` | false | How many columns the grid holds from the medium breakpoint up; below it the columns stack. |
+
+## Events
+
+| _none_ | — | — |
+
+## Slots
+
+| _none_ | — | — |
+
+## States
+
+- Visual states: `default`
+- `data-columns` mirrors the `columns` prop and drives the grid from the medium breakpoint up
+- Below `md` the grid is a single column in DOM order, so the points are read in the order they are written
+- Empty: when `items` is empty the band renders no grid and no rules, so an unfilled band leaves no empty frame
+
+## Motion & Animations
+
+_none_
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| typography (column title) | `.text-heading-sm` |
+| typography (column body) | `.text-body-sm` |
+| column title text | `var(--text-default)` |
+| column body text | `var(--text-muted)` |
+| grid rules and marks | `var(--border-default)` |
+| column surface | `var(--bg-surface)` |
+| spacing (column padding) | `var(--spacing-xl)` |
+| spacing (column stack) | `var(--spacing-sm)` |
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| _none_ | — | — |
+
+## Accessibility (WCAG 2.1 AA)
+
+- Visible focus: not applicable — the band is static copy and holds no interactive control.
+- Keyboard map: none of its own; the band contains no focusable element and is skipped by `Tab`.
+- ARIA: the band is a `<section>` labelled by its `h2` when `title` is set; each column title is an `h3`, so the columns nest correctly under the band's heading and the document outline stays honest.
+- Contrast ≥4.5:1 (text) / ≥3:1 (large + icons): column titles are `var(--text-default)`; bodies use `var(--text-muted)`, which clears AA on the dark canvas and is a known theme-level shortfall on the light one (see `big-numbers`).
+- `motion-reduce:transition-none motion-reduce:transform-none` — not applicable, the band is static.
+- Touch target ≥40×40 px — not applicable, no interactive target.
+
+## Stories (Storybook)
+
+- Default
+- Columns — composite story rendering both `columns` values one under the other
+
+## 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/content-columns/ContentColumns.stories.js b/apps/storybook/src/stories/components/marketing/content-columns/ContentColumns.stories.js
new file mode 100644
index 000000000..1fc4faaa9
--- /dev/null
+++ b/apps/storybook/src/stories/components/marketing/content-columns/ContentColumns.stories.js
@@ -0,0 +1,167 @@
+import ContentColumns from '@aziontech/webkit/content-columns'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = "import ContentColumns from '@aziontech/webkit/content-columns'"
+
+const ITEMS = [
+  { title: 'Routed', description: 'The request lands at the location closest to the user.' },
+  {
+    title: 'Executed',
+    description: 'Your code runs at that same location, with no region to warm up.'
+  },
+  { title: 'Cached', description: 'The response is held there, ready for the next request.' }
+]
+
+/** @type {import('@storybook/vue3').Meta<typeof ContentColumns>} */
+const meta = {
+  title: 'Components/Marketing/ContentColumns',
+  component: ContentColumns,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: true }]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'A titled band whose body is two or three columns of short copy, drawn in one collapsed-rule grid so the columns read as a single framed surface. It is the plainest way to state a few parallel points under one section header.'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    items: {
+      control: 'object',
+      description:
+        'The columns, in reading order; each item is `{ title, description }` where `title` is the point and `description` the sentence that develops it.',
+      table: {
+        category: 'props',
+        type: { summary: 'ContentColumnItem[]' },
+        defaultValue: { summary: '[]' }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Headline of the band, rendered as its `h2` above the columns.',
+      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: "''" }
+      }
+    },
+    columns: {
+      control: 'inline-radio',
+      options: [2, 3],
+      description:
+        'How many columns the grid holds from the medium breakpoint up; below it the columns stack.',
+      table: {
+        category: 'props',
+        type: { summary: '2 | 3' },
+        defaultValue: { summary: '3' }
+      }
+    }
+  },
+  args: {
+    items: ITEMS,
+    title: 'Every request is handled at the edge.',
+    description:
+      'One platform runs the routing, the code and the cache in the same place, so a request never leaves the network to be answered.',
+    eyebrow: 'How it works',
+    columns: 3
+  }
+}
+
+export default meta
+
+const Template = (args) => ({
+  components: { ContentColumns },
+  setup() {
+    return { args }
+  },
+  template: '<ContentColumns v-bind="args" />'
+})
+
+const DEFAULT_MARKUP = `<ContentColumns
+  eyebrow="How it works"
+  title="Every request is handled at the edge."
+  description="One platform runs the routing, the code and the cache in the same place, so a request never leaves the network to be answered."
+  :columns="3"
+  :items="[
+    { title: 'Routed', description: 'The request lands at the location closest to the user.' },
+    { title: 'Executed', description: 'Your code runs at that same location, with no region to warm up.' },
+    { title: 'Cached', description: 'The response is held there, ready for the next request.' }
+  ]"
+/>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof ContentColumns>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A header band over three peer points. The column titles are written in parallel grammar because they are read across, not down, and each description stays at one sentence so the grid does not stretch to a single long column. Edit `items` in the Controls panel to see the band grow or shrink — with `items` emptied the band renders its header and no grid at all.'
+      },
+      source: { code: toSfc(IMPORT, DEFAULT_MARKUP) }
+    }
+  }
+}
+
+const COLUMNS_TEMPLATE = `<div class="flex flex-col gap-(--spacing-xxl)">
+  <ContentColumns
+    eyebrow="Where it runs"
+    title="Two places your code can live."
+    :columns="2"
+    :items="[
+      { title: 'At the edge', description: 'Code runs in the location that answered the request.' },
+      { title: 'At the origin', description: 'Code runs where your data is, reached only when the edge cannot answer.' }
+    ]"
+  />
+  <ContentColumns
+    eyebrow="What you get"
+    title="Three properties every deployment inherits."
+    :columns="3"
+    :items="[
+      { title: 'Distributed', description: 'Each deployment is live in every location at once.' },
+      { title: 'Isolated', description: 'Each request runs in its own sandbox, with no shared state.' },
+      { title: 'Observable', description: 'Each request is logged with its latency, status and location.' }
+    ]"
+  />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof ContentColumns>} */
+export const Columns = {
+  render: () => ({ components: { ContentColumns }, template: COLUMNS_TEMPLATE }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          'Both `columns` values, one band under the other, each filled to its own count: two columns for a contrast, three for three peers. The grid only splits from the medium breakpoint up — narrow the canvas and both bands collapse to a single column in DOM order, so the points keep the order they were written in.'
+      },
+      source: { code: toSfc(IMPORT, COLUMNS_TEMPLATE) }
+    }
+  }
+}
diff --git a/packages/webkit/.size-limit.json b/packages/webkit/.size-limit.json
index dbcbf8e11..c5e2f2d4c 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": "content-columns",
+    "path": "src/components/marketing/content-columns/content-columns.vue",
+    "limit": "4 KB"
+  },
   {
     "name": "illustration",
     "path": "src/components/content/illustration/illustration.vue",
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 039f4a19f..f2c41b9f3 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -9930,6 +9930,77 @@
       "parent": "sidebar",
       "treeShakeableImport": "@aziontech/webkit/sidebar-footer"
     },
+    "content-columns": {
+      "import": "@aziontech/webkit/content-columns",
+      "target": "./src/components/marketing/content-columns/content-columns.vue",
+      "kind": "component",
+      "treeShakeableImport": "@aziontech/webkit/content-columns",
+      "category": "marketing",
+      "structure": "monolithic",
+      "status": "implemented",
+      "props": [
+        {
+          "name": "items",
+          "type": "ContentColumnItem[]",
+          "default": "[]",
+          "required": "false",
+          "doc": "The columns, in reading order; each item is `{ title, description }`."
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "default": "''",
+          "required": "false",
+          "doc": "Headline of the band, rendered as its `h2` above the columns."
+        },
+        {
+          "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": "columns",
+          "type": "2 | 3",
+          "default": "3",
+          "required": "false",
+          "doc": "How many columns the grid holds from the medium breakpoint up; below it the columns stack."
+        }
+      ],
+      "purpose": "A titled band whose body is two or three columns of short copy, drawn in one hairline `card-grid` so the columns read as a single surface. It is the plainest way to state a few parallel points under one section header.",
+      "useWhen": [
+        "For two or three parallel points that carry equal weight under one section heading.",
+        "When each point is a short title and a sentence — no icon, no media, no link.",
+        "As the body of a product or platform section that needs structure but not tiles."
+      ],
+      "avoidWhen": [
+        "When the points are unequal and one deserves the full width → use `bento-grid`.",
+        "When each point needs an icon, a link or its own surface → use `feature-card` in a grid the page owns.",
+        "For measured figures → use `big-numbers`.",
+        "For one point paired with a picture → use `media-split`."
+      ],
+      "related": [
+        "bento-grid` — the same collapsed-rule grid with unequal, slot-composed cells.",
+        "feature-card` — the richer unit when a point needs an icon or a destination.",
+        "section-title` — the header this band renders above its columns.",
+        "big-numbers` — the numeric sibling of this grid."
+      ],
+      "bestPractices": [
+        "The band draws no frame of its own: the rule and the corner marks belong to the `section-module` or `frame-box` that the page assembles it into, so a band placed in a framed column never lands a second hairline on the column's own.",
+        "Keep every column to a title and one or two sentences; the grid stretches to the tallest, so one long column pads the rest.",
+        "Use three columns for three peers and two for a contrast; four points want `bento-grid` or a card grid instead.",
+        "Write the column titles in parallel grammar — they are read across, not down.",
+        "Leave `title` out when the band sits directly under another header; two headings in a row is one too many."
+      ]
+    },
     "breadcrumb": {
       "import": "@aziontech/webkit/breadcrumb",
       "target": "./src/components/navigation/breadcrumb/index.js",
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index d69e67e99..192e17b19 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -279,6 +279,7 @@
     "./sidebar-group": "./src/components/layout/sidebar/sidebar-group.vue",
     "./sidebar-header": "./src/components/layout/sidebar/sidebar-header.vue",
     "./sidebar-footer": "./src/components/layout/sidebar/sidebar-footer.vue",
+    "./content-columns": "./src/components/marketing/content-columns/content-columns.vue",
     "./breadcrumb": "./src/components/navigation/breadcrumb/index.js",
     "./breadcrumb-item": "./src/components/navigation/breadcrumb-item/breadcrumb-item.vue",
     "./link": "./src/components/navigation/link/link.vue",
diff --git a/packages/webkit/src/components/marketing/content-columns/content-columns.test.ts b/packages/webkit/src/components/marketing/content-columns/content-columns.test.ts
new file mode 100644
index 000000000..922630eb7
--- /dev/null
+++ b/packages/webkit/src/components/marketing/content-columns/content-columns.test.ts
@@ -0,0 +1,142 @@
+import { render } from '@testing-library/vue'
+import { describe, expect, it } from 'vitest'
+
+import { expectNoA11yViolations } from '../../../test/axe'
+import ContentColumns from './content-columns.vue'
+
+const TESTID = 'marketing-content-columns'
+
+const items = [
+  { title: 'Routed', description: 'The request lands at the location closest to the user.' },
+  { title: 'Executed', description: 'Your code runs there, with no cold region to warm up.' },
+  { title: 'Cached', description: 'The response is held at that edge for the next request.' }
+]
+
+describe('ContentColumns', () => {
+  it('renders the band under the default testid', () => {
+    const { getByTestId } = render(ContentColumns, { props: { items } })
+
+    expect(getByTestId(TESTID)).toBeInTheDocument()
+  })
+
+  it('lets a consumer data-testid win over the fallback', () => {
+    const { getByTestId, queryByTestId } = render(ContentColumns, {
+      props: { items },
+      attrs: { 'data-testid': 'how-it-works' }
+    })
+
+    expect(getByTestId('how-it-works')).toBeInTheDocument()
+    expect(queryByTestId(TESTID)).toBeNull()
+  })
+
+  it('renders one cell per item', () => {
+    const { container } = render(ContentColumns, { props: { items } })
+
+    expect(container.querySelectorAll('h3')).toHaveLength(items.length)
+  })
+
+  it('renders every column title as an h3 and its description alongside', () => {
+    const { container, getByText } = render(ContentColumns, { props: { items } })
+    const titles = [...container.querySelectorAll('h3')].map((el) => el.textContent?.trim())
+
+    expect(titles).toEqual(items.map((item) => item.title))
+
+    for (const item of items) {
+      expect(getByText(item.description)).toBeInTheDocument()
+    }
+  })
+
+  it('renders the title as an h2 that names the section', () => {
+    const { container, getByTestId } = render(ContentColumns, {
+      props: { items, title: 'Three things happen on every request.' }
+    })
+
+    const root = getByTestId(TESTID)
+    const heading = container.querySelector('h2')
+
+    expect(heading?.tagName).toBe('H2')
+    expect(heading).toHaveTextContent('Three things happen on every request.')
+    expect(root).toHaveAttribute('aria-label', 'Three things happen on every request.')
+  })
+
+  it('leaves the section unnamed when no title is set', () => {
+    const { container, getByTestId } = render(ContentColumns, { props: { items } })
+
+    expect(getByTestId(TESTID)).not.toHaveAttribute('aria-label')
+    expect(container.querySelector('h2')).toBeNull()
+  })
+
+  it('renders the eyebrow only when it is set', () => {
+    const { queryByText } = render(ContentColumns, { props: { items } })
+
+    expect(queryByText('How it works')).toBeNull()
+
+    const { getByText } = render(ContentColumns, {
+      props: { items, eyebrow: 'How it works' }
+    })
+
+    expect(getByText('How it works')).toBeInTheDocument()
+  })
+
+  it('renders the description only when it is set', () => {
+    const { container } = render(ContentColumns, { props: { items } })
+
+    expect(container.querySelectorAll('p')).toHaveLength(items.length)
+
+    const band = render(ContentColumns, {
+      props: { items, title: 'Every request', description: 'One sentence of support.' }
+    })
+
+    expect(band.getByText('One sentence of support.')).toBeInTheDocument()
+  })
+
+  it('defaults the column count to three', () => {
+    const { getByTestId } = render(ContentColumns, { props: { items } })
+
+    expect(getByTestId(TESTID)).toHaveAttribute('data-columns', '3')
+  })
+
+  it.each([2, 3] as const)('mirrors the %i column count on the root', (columns) => {
+    const { getByTestId } = render(ContentColumns, { props: { items, columns } })
+
+    expect(getByTestId(TESTID)).toHaveAttribute('data-columns', String(columns))
+  })
+
+  it('renders no cell when items is empty', () => {
+    const { container, getByTestId } = render(ContentColumns, { props: { items: [] } })
+
+    expect(getByTestId(TESTID)).toBeInTheDocument()
+    expect(container.querySelectorAll('h3')).toHaveLength(0)
+  })
+
+  it('renders no cell when items is omitted', () => {
+    const { container } = render(ContentColumns)
+
+    expect(container.querySelectorAll('h3')).toHaveLength(0)
+  })
+
+  it('forwards a consumer class onto the root', () => {
+    const { getByTestId } = render(ContentColumns, {
+      props: { items },
+      attrs: { class: 'max-w-(--container-4xl)' }
+    })
+
+    const root = getByTestId(TESTID)
+
+    expect(root.tagName).toBe('SECTION')
+    expect(root.className).toContain('max-w-(--container-4xl)')
+  })
+
+  it('has no a11y violations with a full band', async () => {
+    const { container } = render(ContentColumns, {
+      props: {
+        items,
+        eyebrow: 'How it works',
+        title: 'Three things happen on every request.',
+        description: 'One sentence of support.'
+      }
+    })
+
+    await expectNoA11yViolations(container)
+  })
+})
diff --git a/packages/webkit/src/components/marketing/content-columns/content-columns.vue b/packages/webkit/src/components/marketing/content-columns/content-columns.vue
new file mode 100644
index 000000000..d13d0beb1
--- /dev/null
+++ b/packages/webkit/src/components/marketing/content-columns/content-columns.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+  import { computed, useAttrs } from 'vue'
+
+  import CardGrid from '../card-grid/card-grid.vue'
+  import SectionTitle from '../section-title/section-title.vue'
+
+  defineOptions({
+    name: 'ContentColumns',
+    inheritAttrs: false
+  })
+
+  /** One column of the band: a short title and the sentence that develops it. */
+  export type ContentColumnItem = {
+    /** The point itself, rendered as the column's `h3`. */
+    title: string
+    /** One or two sentences developing the point, rendered under the column title. */
+    description: string
+  }
+
+  /** How many columns the grid holds from the medium breakpoint up. */
+  export type ContentColumnsCount = 2 | 3
+
+  interface Props {
+    /** The columns, in reading order; each item is a title and a description. */
+    items?: ContentColumnItem[]
+    /** Headline of the band, rendered as its h2 above the columns. */
+    title?: string
+    /** Supporting sentence under the headline. */
+    description?: string
+    /** Short uppercase overline rendered above the headline. */
+    eyebrow?: string
+    /** How many columns the grid holds from the medium breakpoint up; below it the columns stack. */
+    columns?: ContentColumnsCount
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    items: () => [],
+    title: '',
+    description: '',
+    eyebrow: '',
+    columns: 3
+  })
+
+  const attrs = useAttrs()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? 'marketing-content-columns'
+  )
+
+  const hasItems = computed(() => props.items.length > 0)
+
+  const hasHeader = computed(
+    () => props.title.length > 0 || props.description.length > 0 || props.eyebrow.length > 0
+  )
+</script>
+
+<template>
+  <section
+    v-bind="$attrs"
+    :data-testid="testId"
+    :data-columns="columns"
+    :aria-label="title || undefined"
+    class="group flex flex-col gap-(--spacing-xxl)"
+  >
+    <SectionTitle
+      v-if="hasHeader"
+      :framed="false"
+      kind="left"
+      :title="title"
+      :eyebrow="eyebrow"
+      :description="description"
+    />
+
+    <CardGrid
+      v-if="hasItems"
+      kind="divider"
+      :columns="columns"
+    >
+      <div
+        v-for="(item, index) in items"
+        :key="`${item.title}-${index}`"
+        class="flex h-full flex-col gap-(--spacing-sm) bg-(--bg-canvas) p-(--spacing-xl)"
+      >
+        <h3 class="m-0 text-balance text-heading-sm text-(--text-default)">{{ item.title }}</h3>
+        <p class="m-0 text-pretty text-body-sm text-(--text-muted)">{{ item.description }}</p>
+      </div>
+    </CardGrid>
+  </section>
+</template>

From 4e2b52488df4be902bbe9564357dc288e968319c Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Fri, 25 Sep 2026 06:20:41 -0300
Subject: [PATCH 2/4] chore(webkit): re-approve the content-columns spec
 checksum

The spec body was edited after approval and the checksum was never refreshed, so enforce-spec-exists hard-blocked every Write to the component's .vue. The body passes the full spec-validate battery and the .vue matches it 1-to-1, so only the stamp is restamped; the body is untouched.
---
 .specs/content-columns.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.specs/content-columns.md b/.specs/content-columns.md
index 2787f4e1d..6b5b6cd92 100644
--- a/.specs/content-columns.md
+++ b/.specs/content-columns.md
@@ -4,9 +4,9 @@ category: marketing
 structure: monolithic
 status: implemented
 spec_version: 2
-checksum: 4164a7ac1a16b8ed89832e54017508c7a06e2153282c7fd2bc959adbb17d0640
+checksum: ad0e33278aa3adc108d03d744ddac337a3d96d14f159c93ebd69eac75f3f34f0
 created: 2026-09-22
-last_updated: 2026-09-23
+last_updated: 2026-09-25
 ---
 
 # Content Columns — Component Spec

From c7615535b6258e0057afec2c03fc926028110765 Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Mon, 28 Sep 2026 07:20:55 -0300
Subject: [PATCH 3/4] feat(webkit): update content-columns to the current
 design

---
 .specs/content-columns.md    | 8 ++++----
 packages/webkit/catalog.json | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.specs/content-columns.md b/.specs/content-columns.md
index 6b5b6cd92..7db02c658 100644
--- a/.specs/content-columns.md
+++ b/.specs/content-columns.md
@@ -4,9 +4,9 @@ category: marketing
 structure: monolithic
 status: implemented
 spec_version: 2
-checksum: ad0e33278aa3adc108d03d744ddac337a3d96d14f159c93ebd69eac75f3f34f0
+checksum: d674e4f3cf780f09fcd9b1c370e5172249697cd6df5d0c45fb1a673a1c579d44
 created: 2026-09-22
-last_updated: 2026-09-25
+last_updated: 2026-09-26
 ---
 
 # Content Columns — Component Spec
@@ -24,14 +24,14 @@ A titled band whose body is two or three columns of short copy, drawn in one hai
 ## When NOT to use
 
 - When the points are unequal and one deserves the full width → use `bento-grid`.
-- When each point needs an icon, a link or its own surface → use `feature-card` in a grid the page owns.
+- When each point needs an icon, a link or its own surface → use `topic` in a `card-grid`.
 - For measured figures → use `big-numbers`.
 - For one point paired with a picture → use `media-split`.
 
 ## Related
 
 - `bento-grid` — the same collapsed-rule grid with unequal, slot-composed cells.
-- `feature-card` — the richer unit when a point needs an icon or a destination.
+- `topic` — the richer unit when a point needs an icon or a destination.
 - `section-title` — the header this band renders above its columns.
 - `big-numbers` — the numeric sibling of this grid.
 
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index f2c41b9f3..f29dc1f45 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -9983,13 +9983,13 @@
       ],
       "avoidWhen": [
         "When the points are unequal and one deserves the full width → use `bento-grid`.",
-        "When each point needs an icon, a link or its own surface → use `feature-card` in a grid the page owns.",
+        "When each point needs an icon, a link or its own surface → use `topic` in a `card-grid`.",
         "For measured figures → use `big-numbers`.",
         "For one point paired with a picture → use `media-split`."
       ],
       "related": [
         "bento-grid` — the same collapsed-rule grid with unequal, slot-composed cells.",
-        "feature-card` — the richer unit when a point needs an icon or a destination.",
+        "topic` — the richer unit when a point needs an icon or a destination.",
         "section-title` — the header this band renders above its columns.",
         "big-numbers` — the numeric sibling of this grid."
       ],

From 0c67181232898dc233163047bc2d2ae3f545f34d Mon Sep 17 00:00:00 2001
From: Gab <gabriel.mendonca@azion.com>
Date: Mon, 28 Sep 2026 07:29:41 -0300
Subject: [PATCH 4/4] fix(webkit): set content-columns'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 c5e2f2d4c..3ece37062 100644
--- a/packages/webkit/.size-limit.json
+++ b/packages/webkit/.size-limit.json
@@ -137,7 +137,7 @@
   {
     "name": "content-columns",
     "path": "src/components/marketing/content-columns/content-columns.vue",
-    "limit": "4 KB"
+    "limit": "4.75 KB"
   },
   {
     "name": "illustration",