diff --git a/projects/js-packages/components/changelog/update-placement-card-shared-component b/projects/js-packages/components/changelog/update-placement-card-shared-component
new file mode 100644
index 000000000000..e9a50391a870
--- /dev/null
+++ b/projects/js-packages/components/changelog/update-placement-card-shared-component
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add a CheckboxCard component.
diff --git a/projects/js-packages/components/components/checkbox-card/index.tsx b/projects/js-packages/components/components/checkbox-card/index.tsx
new file mode 100644
index 000000000000..d16028fe72f3
--- /dev/null
+++ b/projects/js-packages/components/components/checkbox-card/index.tsx
@@ -0,0 +1,79 @@
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Card, Checkbox, Field, Link, Stack, Text } from '@wordpress/ui';
+import clsx from 'clsx';
+import './style.scss';
+import type { CheckboxCardGridProps, CheckboxCardProps } from './types.ts';
+import type { JSX } from 'react';
+
+/**
+ * Lays out checkbox cards in two columns, or one on narrow screens.
+ *
+ * @param {CheckboxCardGridProps} props - Component props.
+ * @return {JSX.Element} The grid.
+ */
+export function CheckboxCardGrid( { children, className }: CheckboxCardGridProps ): JSX.Element {
+	return <div className={ clsx( 'jp-checkbox-card-grid', className ) }>{ children }</div>;
+}
+
+/**
+ * A card with a checkbox, toggled by a click on its illustration.
+ *
+ * @param {CheckboxCardProps} props - Component props.
+ * @return {JSX.Element} The card.
+ */
+export default function CheckboxCard( {
+	id,
+	name,
+	title,
+	illustration,
+	checked,
+	onChange,
+	previewUrl,
+	onPreviewClick,
+	disabled,
+}: CheckboxCardProps ): JSX.Element {
+	const titleId = `${ id }__title`;
+
+	const handleChange = useCallback(
+		( next: boolean ) => onChange( name, next ),
+		[ name, onChange ]
+	);
+
+	const handlePreviewClick = useCallback( () => {
+		onPreviewClick?.( name );
+	}, [ name, onPreviewClick ] );
+
+	return (
+		<Field.Root disabled={ disabled }>
+			<Card.Root className="jp-checkbox-card" data-checked={ checked }>
+				<Card.Content>
+					<Card.FullBleed className="jp-checkbox-card__surface">
+						{ /* Only the illustration toggles: the title and link sit outside the label. */ }
+						<Field.Label className="jp-checkbox-card__illustration">{ illustration }</Field.Label>
+						<Checkbox
+							id={ id }
+							className="jp-checkbox-card__checkbox"
+							checked={ checked }
+							onCheckedChange={ handleChange }
+							aria-labelledby={ titleId }
+						/>
+					</Card.FullBleed>
+				</Card.Content>
+			</Card.Root>
+			<Stack gap="xs" direction="column">
+				<Text id={ titleId } variant="body-sm">
+					{ title }
+				</Text>
+				{ previewUrl && (
+					<Link href={ previewUrl } onClick={ handlePreviewClick }>
+						{ __( 'Preview and edit', 'jetpack-components' ) }
+					</Link>
+				) }
+			</Stack>
+		</Field.Root>
+	);
+}
+
+export { CheckboxCard };
+export type { CheckboxCardProps, CheckboxCardGridProps };
diff --git a/projects/js-packages/components/components/checkbox-card/stories/index.stories.tsx b/projects/js-packages/components/components/checkbox-card/stories/index.stories.tsx
new file mode 100644
index 000000000000..bab83dc42ccf
--- /dev/null
+++ b/projects/js-packages/components/components/checkbox-card/stories/index.stories.tsx
@@ -0,0 +1,90 @@
+import { useCallback, useState } from 'react';
+import CheckboxCard, { CheckboxCardGrid } from '../index.tsx';
+import type { Meta, StoryFn } from '@storybook/react';
+
+const meta: Meta< typeof CheckboxCard > = {
+	title: 'JS Packages/Components/Checkbox Card',
+	component: CheckboxCard,
+	argTypes: {
+		illustration: { table: { disable: true } },
+		onChange: { table: { disable: true } },
+		onPreviewClick: { table: { disable: true } },
+	},
+};
+
+export default meta;
+
+const Wireframe = ( { before }: { before?: boolean } ) => {
+	const top = before ? 56 : 24;
+	return (
+		<svg viewBox="0 0 294 192" aria-hidden="true">
+			<rect x="40" y={ top } width="214" height="12" rx="2" fill="#dcdcde" />
+			<rect x="40" y={ top + 24 } width="214" height="80" rx="2" fill="#f0f0f1" />
+			<rect x="40" y={ before ? 24 : 140 } width="120" height="20" rx="4" fill="#3858e9" />
+		</svg>
+	);
+};
+
+const Template: StoryFn< typeof CheckboxCard > = args => {
+	const [ checked, setChecked ] = useState( args.checked );
+	const handleChange = useCallback( ( _name: string, next: boolean ) => setChecked( next ), [] );
+
+	return (
+		<div style={ { maxWidth: 360 } }>
+			<CheckboxCard { ...args } checked={ checked } onChange={ handleChange } />
+		</div>
+	);
+};
+
+export const _default = Template.bind( {} );
+_default.args = {
+	id: 'placement-after-content',
+	name: 'after_content',
+	title: 'After the post content',
+	illustration: <Wireframe />,
+	checked: false,
+};
+
+export const WithPreviewLink = Template.bind( {} );
+WithPreviewLink.args = {
+	..._default.args,
+	checked: true,
+	previewUrl: '#',
+};
+
+export const Disabled = Template.bind( {} );
+Disabled.args = {
+	..._default.args,
+	disabled: true,
+};
+
+export const Grid: StoryFn< typeof CheckboxCard > = () => {
+	const [ selected, setSelected ] = useState< Record< string, boolean > >( {
+		before_content: true,
+	} );
+	const handleChange = useCallback(
+		( name: string, next: boolean ) => setSelected( prev => ( { ...prev, [ name ]: next } ) ),
+		[]
+	);
+
+	return (
+		<CheckboxCardGrid>
+			<CheckboxCard
+				id="placement-before-content"
+				name="before_content"
+				title="Before the post content"
+				illustration={ <Wireframe before /> }
+				checked={ Boolean( selected.before_content ) }
+				onChange={ handleChange }
+			/>
+			<CheckboxCard
+				id="placement-after-content"
+				name="after_content"
+				title="After the post content"
+				illustration={ <Wireframe /> }
+				checked={ Boolean( selected.after_content ) }
+				onChange={ handleChange }
+			/>
+		</CheckboxCardGrid>
+	);
+};
diff --git a/projects/js-packages/components/components/checkbox-card/style.scss b/projects/js-packages/components/components/checkbox-card/style.scss
new file mode 100644
index 000000000000..015741a4e540
--- /dev/null
+++ b/projects/js-packages/components/components/checkbox-card/style.scss
@@ -0,0 +1,54 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+.jp-checkbox-card-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	column-gap: var(--wpds-dimension-gap-md);
+	row-gap: var(--wpds-dimension-gap-2xl);
+
+	@media (max-width: 720px) {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
+.jp-checkbox-card {
+
+	&[data-checked="true"] {
+		border-color: var(--wpds-color-stroke-interactive-brand-active);
+	}
+
+	&:hover:not([data-checked="true"]) {
+		border-color: var(--wpds-color-stroke-surface-neutral-strong);
+	}
+
+	&:has(:focus-visible) {
+
+		@include gb.outset-ring__focus();
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		transition: border-color 0.15s ease-out;
+	}
+}
+
+.jp-checkbox-card__surface {
+	position: relative;
+}
+
+.jp-checkbox-card__illustration {
+	display: flex;
+	aspect-ratio: 294 / 192;
+	background: var(--wpds-color-background-surface-neutral-weak);
+	cursor: var(--wpds-cursor-control);
+
+	> svg {
+		inline-size: 100%;
+		block-size: 100%;
+	}
+}
+
+.jp-checkbox-card__checkbox {
+	position: absolute;
+	inset-block-start: var(--wpds-dimension-padding-md);
+	inset-inline-start: var(--wpds-dimension-padding-md);
+}
diff --git a/projects/js-packages/components/components/checkbox-card/test/component.tsx b/projects/js-packages/components/components/checkbox-card/test/component.tsx
new file mode 100644
index 000000000000..1e2567d53306
--- /dev/null
+++ b/projects/js-packages/components/components/checkbox-card/test/component.tsx
@@ -0,0 +1,73 @@
+import { jest } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import CheckboxCard from '../index.tsx';
+import type { CheckboxCardProps } from '../types.ts';
+
+const renderCard = ( props: Partial< CheckboxCardProps > = {} ) => {
+	const onChange = jest.fn();
+	const onPreviewClick = jest.fn();
+	render(
+		<CheckboxCard
+			id="placement-after-content"
+			name="after_content"
+			title="After the post content"
+			illustration={ <span>Wireframe</span> }
+			checked={ false }
+			onChange={ onChange }
+			onPreviewClick={ onPreviewClick }
+			{ ...props }
+		/>
+	);
+	return { onChange, onPreviewClick };
+};
+
+describe( 'CheckboxCard', () => {
+	// Catches the title id and `aria-labelledby` drifting apart, which leaves the checkbox unnamed.
+	it( 'names the checkbox with the title', () => {
+		renderCard( { checked: true } );
+
+		expect( screen.getByRole( 'checkbox', { name: 'After the post content' } ) ).toBeChecked();
+	} );
+
+	// Catches the label's `htmlFor` no longer matching the checkbox, or `onChange` losing the name.
+	it.each( [
+		[ 'ticks', false, true ],
+		[ 'unticks', true, false ],
+	] )( '%s the card when the illustration is clicked', async ( _, checked, next ) => {
+		const { onChange } = renderCard( { checked } );
+
+		await userEvent.click( screen.getByText( 'Wireframe' ) );
+
+		expect( onChange ).toHaveBeenCalledWith( 'after_content', next );
+	} );
+
+	// Catches the title moving inside the label, where a click meant for the link toggles the card.
+	it( 'does not toggle when the title is clicked', async () => {
+		const { onChange } = renderCard();
+
+		await userEvent.click( screen.getByText( 'After the post content' ) );
+
+		expect( onChange ).not.toHaveBeenCalled();
+	} );
+
+	// Catches the link rendering without a `previewUrl`, or going missing when one is passed.
+	it.each( [
+		[ 'shows', 'https://example.com/wp-admin/site-editor.php', 1 ],
+		[ 'hides', undefined, 0 ],
+	] )( '%s the preview link', ( _, previewUrl, count ) => {
+		renderCard( { previewUrl } );
+
+		// By text: without an `href` the anchor has no link role, so a role query would miss it.
+		expect( screen.queryAllByText( 'Preview and edit' ) ).toHaveLength( count );
+	} );
+
+	// Catches the preview handler losing the name the parent uses to tell cards apart.
+	it( 'passes its name to the preview handler', async () => {
+		const { onPreviewClick } = renderCard( { previewUrl: '#preview' } );
+
+		await userEvent.click( screen.getByRole( 'link', { name: 'Preview and edit' } ) );
+
+		expect( onPreviewClick ).toHaveBeenCalledWith( 'after_content' );
+	} );
+} );
diff --git a/projects/js-packages/components/components/checkbox-card/types.ts b/projects/js-packages/components/components/checkbox-card/types.ts
new file mode 100644
index 000000000000..eb6beb325de2
--- /dev/null
+++ b/projects/js-packages/components/components/checkbox-card/types.ts
@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+
+export type CheckboxCardProps = {
+	/**
+	 * Id of the checkbox; the title's id is built from it.
+	 */
+	id: string;
+	/**
+	 * Passed back to `onChange` and `onPreviewClick`, so one handler can serve every card.
+	 */
+	name: string;
+	/**
+	 * Caption under the card, and the checkbox's accessible name.
+	 */
+	title: string;
+	/**
+	 * Picture filling the card, drawn at a 294×192 aspect ratio.
+	 */
+	illustration?: ReactNode;
+	/**
+	 * Whether the card is checked.
+	 */
+	checked: boolean;
+	/**
+	 * Called with the card's `name` and the next checked value.
+	 */
+	onChange: ( name: string, next: boolean ) => void;
+	/**
+	 * Shows a "Preview and edit" link to this URL under the title.
+	 */
+	previewUrl?: string;
+	/**
+	 * Called with the card's `name` when the "Preview and edit" link is clicked.
+	 */
+	onPreviewClick?: ( name: string ) => void;
+	/**
+	 * Disables the checkbox.
+	 */
+	disabled?: boolean;
+};
+
+export type CheckboxCardGridProps = {
+	/**
+	 * The `CheckboxCard`s to lay out.
+	 */
+	children: ReactNode;
+	/**
+	 * Extra class for the grid.
+	 */
+	className?: string;
+};
diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts
index 96fe8a3f0620..8b32e6bf4396 100644
--- a/projects/js-packages/components/index.ts
+++ b/projects/js-packages/components/index.ts
@@ -24,6 +24,8 @@ export { default as AutomatticForAgenciesLogo } from './components/automattic-fo
 export { default as JetpackFooter } from './components/jetpack-footer/index.tsx';
 export { default as Gravatar } from './components/gravatar/index.tsx';
 export type { GravatarProps } from './components/gravatar/index.tsx';
+export { default as CheckboxCard, CheckboxCardGrid } from './components/checkbox-card/index.tsx';
+export type { CheckboxCardProps, CheckboxCardGridProps } from './components/checkbox-card/types.ts';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
 export { default as ActionButton } from './components/action-button/index.tsx';
 export { default as PricingCard } from './components/pricing-card/index.tsx';
diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
index 21fed2ae8173..6fc5aadd8ff4 100644
--- a/projects/js-packages/components/package.json
+++ b/projects/js-packages/components/package.json
@@ -33,6 +33,11 @@
 			"types": "./build/components/button/index.d.ts",
 			"default": "./build/components/button/index.js"
 		},
+		"./checkbox-card": {
+			"jetpack:src": "./components/checkbox-card/index.tsx",
+			"types": "./build/components/checkbox-card/index.d.ts",
+			"default": "./build/components/checkbox-card/index.js"
+		},
 		"./global-notices": {
 			"jetpack:src": "./components/global-notices/index.ts",
 			"types": "./build/components/global-notices/index.d.ts",
diff --git a/projects/packages/newsletter/changelog/update-placement-card-shared-component b/projects/packages/newsletter/changelog/update-placement-card-shared-component
new file mode 100644
index 000000000000..6bd2d6bb951b
--- /dev/null
+++ b/projects/packages/newsletter/changelog/update-placement-card-shared-component
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Settings: Use the shared CheckboxCard component for subscription placements.
diff --git a/projects/packages/newsletter/src/settings/sections/placement-card.scss b/projects/packages/newsletter/src/settings/sections/placement-card.scss
deleted file mode 100644
index 746b9a32d92a..000000000000
--- a/projects/packages/newsletter/src/settings/sections/placement-card.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-// PlacementCard — selected / hover / focus states layered on top of the
-// `Card.Root` primitive. The card surface itself (border, radius, background,
-// overflow:clip, flex column) comes from `Card.Root`; this file only carries
-// the interactive-state colours and the absolute checkbox positioning.
-
-.jetpack-newsletter-placements-grid {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	// Tighter horizontal gap between the two columns; more breathing room
-	// between rows so the second row reads as a separate band.
-	column-gap: var(--wpds-dimension-gap-md);
-	row-gap: var(--wpds-dimension-gap-2xl);
-
-	@media (max-width: 720px) {
-		grid-template-columns: minmax(0, 1fr);
-	}
-}
-
-.jetpack-newsletter-placement__card {
-	// Position context for the absolute-positioned checkbox below.
-	position: relative;
-
-	// Selected state: brand-toned active stroke (the WPDS primary blue).
-	&[data-checked="true"] {
-		border-color: var(--wpds-color-stroke-interactive-brand-active);
-	}
-
-	&:hover:not([data-checked="true"]) {
-		border-color: var(--wpds-color-stroke-surface-neutral-strong);
-	}
-
-	// Focus ring on the card itself (not the checkbox input), using the
-	// canonical brand focus token.
-	&:has(input:focus-visible) {
-		outline:
-			var(--wpds-border-width-focus) solid
-			var(--wpds-color-stroke-focus);
-		outline-offset: 2px;
-	}
-
-	// Only animate the border-color when the user hasn't asked to reduce
-	// motion — respects `prefers-reduced-motion: reduce`.
-	@media (prefers-reduced-motion: no-preference) {
-		transition: border-color 0.15s ease-out;
-	}
-}
-
-.jetpack-newsletter-placement__surface {
-	display: block;
-	cursor: var(--wpds-cursor-control);
-}
-
-.jetpack-newsletter-placement__illustration {
-	// Match the v2 SVG's intrinsic 294×192 aspect so the wireframe
-	// fills the card surface edge-to-edge.
-	aspect-ratio: 294 / 192;
-	background: var(--wpds-color-background-surface-neutral-weak);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	overflow: hidden;
-
-	> svg {
-		display: block;
-		inline-size: 100%;
-		block-size: 100%;
-	}
-}
-
-.jetpack-newsletter-placement__checkbox {
-	position: absolute;
-	inset-block-start: var(--wpds-dimension-padding-md);
-	inset-inline-start: var(--wpds-dimension-padding-md);
-
-	// CheckboxControl from `@wordpress/components` wraps the native input in
-	// BaseControl chrome (margin/padding from `__field` + `__input-container`).
-	// `@wordpress/ui` doesn't yet ship a Form.Checkbox primitive, so until it
-	// does we zero the chrome here. Revisit once WP UI exposes a checkbox.
-	.components-base-control,
-	.components-base-control__field,
-	.components-checkbox-control,
-	.components-checkbox-control__input-container {
-		margin: 0;
-		padding: 0;
-	}
-
-	.components-checkbox-control__input {
-		margin: 0;
-	}
-
-	// The empty fallback <label> CheckboxControl renders is hidden — the
-	// visible title sits below the card.
-	.components-checkbox-control__label {
-		display: none;
-	}
-}
diff --git a/projects/packages/newsletter/src/settings/sections/placement-card.tsx b/projects/packages/newsletter/src/settings/sections/placement-card.tsx
deleted file mode 100644
index 5dda02c06542..000000000000
--- a/projects/packages/newsletter/src/settings/sections/placement-card.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import { CheckboxControl } from '@wordpress/components';
-import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { Card, Link, Stack, Text } from '@wordpress/ui';
-import './placement-card.scss';
-import type { JSX, ReactNode } from 'react';
-
-interface PlacementCardProps {
-	/**
-	 * Stable id used to bind the visible card to the underlying checkbox via
-	 * `<label htmlFor>` and `aria-labelledby` — letting screen readers
-	 * announce the card title as the checkbox name and giving the whole
-	 * preview surface a native click-to-toggle target.
-	 */
-	id: string;
-	/**
-	 * Stable name passed back to the parent's `onChange` so a single
-	 * change handler can be shared across the whole grid without binding a
-	 * closure per row in render.
-	 */
-	name: string;
-	/** Caption rendered below the card. Also used as the checkbox's accessible name. */
-	title: string;
-	/** Slot for the placement illustration (16:9-ish wireframe / mock). */
-	illustration?: ReactNode;
-	/** When true, the card border + checkbox both pick up the selected state. */
-	checked: boolean;
-	/** Called with the placement `name` and the next checked value. */
-	onChange: ( name: string, next: boolean ) => void;
-	/**
-	 * Optional editor URL — when present, renders a "Preview and edit"
-	 * link below the title that opens the corresponding template / part in
-	 * the Site Editor.
-	 */
-	previewUrl?: string;
-	/**
-	 * Optional callback fired when the "Preview and edit" link is clicked.
-	 * Receives the same `name` the change handler does so the parent can
-	 * fire a per-placement Tracks event without binding closures per row.
-	 */
-	onPreviewClick?: ( name: string ) => void;
-	/** Disable the whole card (parent section gates on `data.subscriptions`). */
-	disabled?: boolean;
-}
-
-/**
- * Selectable card for a subscribe-placement option (Image #5). Built on the
- * WPDS `Card.Root` primitive: the card surface + border + radius + background
- * come from Card; selected/hover/focus states are layered on via a small SCSS
- * file. `<label htmlFor>` makes the illustration a click target and
- * `aria-labelledby` borrows the visible title (rendered outside the label, in
- * the caption Stack) as the checkbox's accessible name.
- *
- * @param props                - Component props.
- * @param props.id             - Stable id used to bind the checkbox to the visual surface.
- * @param props.name           - Stable name passed back to the parent's `onChange`.
- * @param props.title          - Caption rendered below the card; also the checkbox's accessible name.
- * @param props.illustration   - Slot for the placement preview wireframe.
- * @param props.checked        - Whether this placement is currently selected.
- * @param props.onChange       - Called with `(name, next)` when the user toggles.
- * @param props.previewUrl     - Optional Site Editor URL that backs the "Preview and edit" link.
- * @param props.onPreviewClick - Optional callback fired when the "Preview and edit" link is clicked.
- * @param props.disabled       - Disables the whole card (gated by the section's `data.subscriptions`).
- * @return Selectable placement card.
- */
-export function PlacementCard( {
-	id,
-	name,
-	title,
-	illustration,
-	checked,
-	onChange,
-	previewUrl,
-	onPreviewClick,
-	disabled,
-}: PlacementCardProps ): JSX.Element {
-	const titleId = `${ id }__title`;
-
-	const handleChange = useCallback(
-		( next: boolean ) => onChange( name, next ),
-		[ name, onChange ]
-	);
-
-	const handlePreviewClick = useCallback( () => {
-		onPreviewClick?.( name );
-	}, [ name, onPreviewClick ] );
-
-	return (
-		<Stack gap="sm" direction="column">
-			<Card.Root className="jetpack-newsletter-placement__card" data-checked={ checked }>
-				{ /* The label wraps only the preview surface so clicking
-				     anywhere on the illustration toggles the checkbox.
-				     The title and link sit OUTSIDE so they don't toggle on
-				     accidental click. */ }
-				<label htmlFor={ id } className="jetpack-newsletter-placement__surface">
-					<div className="jetpack-newsletter-placement__illustration">{ illustration }</div>
-				</label>
-				<div className="jetpack-newsletter-placement__checkbox">
-					<CheckboxControl
-						__nextHasNoMarginBottom
-						id={ id }
-						checked={ checked }
-						onChange={ handleChange }
-						disabled={ disabled }
-						aria-labelledby={ titleId }
-						/* The visible label is the title rendered below; this
-						   inline label exists only as a fallback name for AT
-						   if `aria-labelledby` doesn't resolve. */
-						label=""
-					/>
-				</div>
-			</Card.Root>
-			<Stack gap="xs" direction="column">
-				<Text id={ titleId } variant="body-sm">
-					{ title }
-				</Text>
-				{ previewUrl && (
-					<Link href={ previewUrl } onClick={ handlePreviewClick }>
-						{ __( 'Preview and edit', 'jetpack-newsletter' ) }
-					</Link>
-				) }
-			</Stack>
-		</Stack>
-	);
-}
diff --git a/projects/packages/newsletter/src/settings/sections/placement-illustrations.tsx b/projects/packages/newsletter/src/settings/sections/placement-illustrations.tsx
index c52fb93f2bed..6866a8e30d4d 100644
--- a/projects/packages/newsletter/src/settings/sections/placement-illustrations.tsx
+++ b/projects/packages/newsletter/src/settings/sections/placement-illustrations.tsx
@@ -9,9 +9,9 @@
  * stripped and replaced with a flat WPDS-tone gray circle so the
  * illustrations stay pure vector and render crisply at any size.
  *
- * The SVGs use a viewBox of 294×192 and fill edge-to-edge — the placement
- * card's `.jetpack-newsletter-placement__illustration` surface sets the
- * matching aspect-ratio so they sit flush against the card border.
+ * The SVGs use a viewBox of 294×192 and fill edge-to-edge — the
+ * `CheckboxCard` illustration surface from `@automattic/jetpack-components`
+ * sets the matching aspect-ratio so they sit flush against the card border.
  *
  * Built on `@wordpress/primitives` so the outer `<SVG>` automatically gets
  * `aria-hidden="true"` + `focusable="false"` (decorative-illustration
diff --git a/projects/packages/newsletter/src/settings/sections/subscriptions-section.tsx b/projects/packages/newsletter/src/settings/sections/subscriptions-section.tsx
index 996b9df4cb0d..515b1d422a9f 100644
--- a/projects/packages/newsletter/src/settings/sections/subscriptions-section.tsx
+++ b/projects/packages/newsletter/src/settings/sections/subscriptions-section.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import analytics from '@automattic/jetpack-analytics';
+import CheckboxCard, { CheckboxCardGrid } from '@automattic/jetpack-components/checkbox-card';
 import { getAdminUrl, getSiteType, isSimpleSite } from '@automattic/jetpack-script-data';
 import { ToggleControl } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
@@ -13,7 +14,6 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import { SUBSCRIPTIONS_SECTION_ID } from '../anchors';
 import { getNewsletterScriptData } from '../script-data';
-import { PlacementCard } from './placement-card';
 import {
 	OverlayIllustration,
 	PopupIllustration,
@@ -62,7 +62,7 @@ interface SubscriptionsSectionProps {
  * Subscriptions Section Component
  *
  * Renders the four "Homepage and posts" placements as a 2×2 grid of
- * `PlacementCard`s, plus inline Navigation / Comments toggle subgroups
+ * `CheckboxCard`s, plus inline Navigation / Comments toggle subgroups
  * inside the same card. Per-placement Tracks events fire alongside the
  * state update so we can see toggle activity before any save.
  *
@@ -246,7 +246,7 @@ export function SubscriptionsSection( {
 								<Text variant="heading-sm" render={ <h3 /> }>
 									{ __( 'Homepage and posts', 'jetpack-newsletter' ) }
 								</Text>
-								<div className="jetpack-newsletter-placements-grid">
+								<CheckboxCardGrid>
 									{ placements.map( placement => {
 										// Surface "Preview and edit" only when the placement is
 										// enabled in the SAVED state AND still shown as checked —
@@ -259,7 +259,7 @@ export function SubscriptionsSection( {
 										const isEnabledAndSaved =
 											Boolean( data[ placement.key ] ) && Boolean( savedData?.[ placement.key ] );
 										return (
-											<PlacementCard
+											<CheckboxCard
 												key={ placement.key }
 												id={ `placement-${ placement.key }` }
 												name={ String( placement.key ) }
@@ -273,7 +273,7 @@ export function SubscriptionsSection( {
 											/>
 										);
 									} ) }
-								</div>
+								</CheckboxCardGrid>
 							</Stack>
 
 							<Stack gap="sm" direction="column">
diff --git a/projects/packages/newsletter/src/settings/style.scss b/projects/packages/newsletter/src/settings/style.scss
index ed8f4dd2687b..3c14d1f62a7a 100644
--- a/projects/packages/newsletter/src/settings/style.scss
+++ b/projects/packages/newsletter/src/settings/style.scss
@@ -18,7 +18,6 @@
 // The DataViews CSS is required, not decorative: the sections below render
 // `DataForm`, which needs it for layout and spacing on both pages.
 @include meta.load-css("@wordpress/dataviews/build-style/style.css");
-@include meta.load-css("./sections/placement-card");
 
 body.jetpack_page_jetpack-newsletter {
 
diff --git a/tools/eslint-excludelist.json b/tools/eslint-excludelist.json
index 78844b4cf650..e1adbfb1ed6d 100644
--- a/tools/eslint-excludelist.json
+++ b/tools/eslint-excludelist.json
@@ -119,7 +119,6 @@
 	"projects/packages/newsletter/src/settings/components/toggle.tsx",
 	"projects/packages/newsletter/src/settings/sections/email-defaults-section.tsx",
 	"projects/packages/newsletter/src/settings/sections/newsletter-section.tsx",
-	"projects/packages/newsletter/src/settings/sections/placement-card.tsx",
 	"projects/packages/newsletter/src/settings/sections/subscriptions-section.tsx",
 	"projects/packages/paypal-payments/src/block/controls.jsx",
 	"projects/packages/paypal-payments/src/block/deprecated/v2/edit.jsx",