diff --git a/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx b/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx
index 0909f36672..ebf2627ab0 100644
--- a/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx
+++ b/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx
@@ -5,7 +5,9 @@ import * as Stories from './SubHeadline.stories';
# SubHeadline
-
+
+Use the Headline component in size `s` instead.
+
The SubHeadline component helps break up larger related chunks of content in the same section. It is typically used to separate subsections within a card.
diff --git a/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx b/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx
index a7832923d5..15840419d5 100644
--- a/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx
+++ b/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx
@@ -17,6 +17,7 @@ import { forwardRef, type HTMLAttributes } from 'react';
import { clsx } from '../../styles/clsx.js';
import { CircuitError } from '../../util/errors.js';
+import { deprecate } from '../../util/logger.js';
import classes from './SubHeadline.module.css';
@@ -30,8 +31,7 @@ export interface SubHeadlineProps extends HTMLAttributes {
}
/**
- * A flexible SubHeadline component capable of rendering using any HTML heading
- * element, except h1.
+ * @deprecated Use the Headline component in size `s` instead.
*/
export const SubHeadline = forwardRef(
({ className, as, ...props }, ref) => {
@@ -44,6 +44,13 @@ export const SubHeadline = forwardRef(
throw new CircuitError('SubHeadline', 'The `as` prop is required.');
}
+ if (process.env.NODE_ENV !== 'production') {
+ deprecate(
+ 'SubHeadline',
+ 'The SubHeadline component has been deprecated. Use the Headline component in size `s` instead.',
+ );
+ }
+
const Element = as || 'h2';
return (