diff --git a/src/__tests__/cover-hero-test.tsx b/src/__tests__/cover-hero-test.tsx
index 2d9ea5231..bce8fc7f0 100644
--- a/src/__tests__/cover-hero-test.tsx
+++ b/src/__tests__/cover-hero-test.tsx
@@ -5,8 +5,8 @@ import {makeTheme} from './test-utils';
 import {render, screen} from '@testing-library/react';
 import ThemeContextProvider from '../theme-context-provider';
 
-const pretitleFirst = 'HeadlinePretitleTitleDescription';
-const titleFirst = 'HeadlineTitlePretitleDescription';
+const pretitleFirst = 'PretitleHeadlineTitleDescription';
+const titleFirst = 'TitleHeadlinePretitleDescription';
 
 test.each`
     pretitleAs   | titleAs      | expectedOrder
diff --git a/src/__tests__/header-test.tsx b/src/__tests__/header-test.tsx
index 5926475f3..31de0a8f6 100644
--- a/src/__tests__/header-test.tsx
+++ b/src/__tests__/header-test.tsx
@@ -4,8 +4,8 @@ import {makeTheme} from './test-utils';
 import {render, screen} from '@testing-library/react';
 import ThemeContextProvider from '../theme-context-provider';
 
-const pretitleFirst = 'HeadlinePretitleTitleDescription';
-const titleFirst = 'HeadlineTitlePretitleDescription';
+const pretitleFirst = 'PretitleHeadlineTitleDescription';
+const titleFirst = 'TitleHeadlinePretitleDescription';
 
 test.each`
     pretitleAs   | titleAs      | expectedOrder
diff --git a/src/__tests__/hero-test.tsx b/src/__tests__/hero-test.tsx
index 491b71ac1..c93a08832 100644
--- a/src/__tests__/hero-test.tsx
+++ b/src/__tests__/hero-test.tsx
@@ -5,8 +5,8 @@ import {makeTheme} from './test-utils';
 import {render, screen} from '@testing-library/react';
 import ThemeContextProvider from '../theme-context-provider';
 
-const pretitleFirst = 'HeadlinePretitleTitleDescription';
-const titleFirst = 'HeadlineTitlePretitleDescription';
+const pretitleFirst = 'PretitleHeadlineTitleDescription';
+const titleFirst = 'TitleHeadlinePretitleDescription';
 
 test.each`
     pretitleAs   | titleAs      | expectedOrder
diff --git a/src/cover-hero.tsx b/src/cover-hero.tsx
index 154d3e80d..d2096ca0f 100644
--- a/src/cover-hero.tsx
+++ b/src/cover-hero.tsx
@@ -123,7 +123,7 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
             </Text3>
         ) : undefined;
 
-        const titleContent = (
+        const titleContent = title ? (
             <Text8
                 as={titleAs}
                 truncate={titleLinesMax}
@@ -132,24 +132,28 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
             >
                 {title}
             </Text8>
-        );
+        ) : undefined;
+
+        const headlineContent = headline ? (
+            <div style={{order: -1}}>
+                <Box
+                    dataAttributes={{testid: 'headline'}}
+                    paddingBottom={{desktop: 8, tablet: 8, mobile: 16}}
+                >
+                    {headline}
+                </Box>
+            </div>
+        ) : undefined;
 
         const mainContent = (
             <div className={styles.mainContent}>
-                {headline && (
-                    <Box
-                        dataAttributes={{testid: 'headline'}}
-                        paddingBottom={{desktop: 8, tablet: 8, mobile: 16}}
-                    >
-                        {headline}
-                    </Box>
-                )}
                 <Stack space={16}>
                     {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
                     <div className={styles.flexColumn}>
                         {isBiggerHeading(titleAs, pretitleAs) ? (
                             <>
                                 {titleContent}
+                                {headlineContent}
                                 {pretitleContent && (
                                     <div
                                         className={styles.sixColumns}
@@ -166,6 +170,7 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
                                         {pretitleContent}
                                     </div>
                                 )}
+                                {headlineContent}
                                 {titleContent}
                             </>
                         )}
diff --git a/src/header.tsx b/src/header.tsx
index 1efbf329a..149e05b1a 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -87,30 +87,29 @@ export const Header = ({
         )
     ) : undefined;
 
+    const headlineContent = headline ? (
+        // assuming that the headline will always be followed by one of: pretitle, title, description
+        <div style={{paddingBottom: 8, order: -1}} data-testid="headline">
+            {headline}
+        </div>
+    ) : undefined;
+
     return (
         <Stack space={{mobile: 24, desktop: 32}} dataAttributes={{testid: 'Header', ...dataAttributes}}>
             {(title || pretitle || description) && (
                 <Box paddingRight={16}>
                     {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
                     <div className={styles.flexColumn}>
-                        {headline && (
-                            <div
-                                style={{paddingBottom: pretitle || title || description ? 8 : 0}}
-                                data-testid="headline"
-                            >
-                                {headline}
-                            </div>
-                        )}
-
                         {isBiggerHeading(titleAs, pretitleAs) ? (
                             <>
                                 {titleContent && (
-                                    <div style={{paddingBottom: pretitle || description ? 8 : 0, order: 1}}>
-                                        {titleContent}
-                                    </div>
+                                    <div style={{paddingBottom: description ? 8 : 0}}>{titleContent}</div>
                                 )}
+                                {headlineContent}
                                 {pretitleContent && (
-                                    <div style={{paddingBottom: description ? 8 : 0}}>{pretitleContent}</div>
+                                    <div style={{paddingBottom: pretitle || description ? 8 : 0, order: -1}}>
+                                        {pretitleContent}
+                                    </div>
                                 )}
                             </>
                         ) : (
@@ -120,6 +119,7 @@ export const Header = ({
                                         {pretitleContent}
                                     </div>
                                 )}
+                                {headlineContent}
                                 {titleContent && (
                                     <div style={{paddingBottom: description ? 8 : 0}}>{titleContent}</div>
                                 )}
diff --git a/src/hero.tsx b/src/hero.tsx
index d5cc221a6..3fdaee344 100644
--- a/src/hero.tsx
+++ b/src/hero.tsx
@@ -91,17 +91,23 @@ const HeroContent = ({
         </Text3>
     ) : undefined;
 
+    const headlineContent = headline ? (
+        // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
+        <div data-testid="headline" style={{paddingBottom: 16, order: -1}}>
+            {headline}
+        </div>
+    ) : undefined;
+
     return (
         <section className={styles.contentContainer}>
             <div>
                 <Stack space={16}>
-                    {headline && <div data-testid="headline">{headline}</div>}
-
                     {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
                     <div className={styles.flexColumn}>
                         {isBiggerHeading(titleAs, pretitleAs) ? (
                             <>
                                 {titleContent}
+                                {headlineContent}
                                 {pretitleContent && (
                                     <div style={{paddingBottom: title ? 8 : 0, order: -1}}>
                                         {pretitleContent}
@@ -113,6 +119,7 @@ const HeroContent = ({
                                 {pretitleContent && (
                                     <div style={{paddingBottom: title ? 8 : 0}}>{pretitleContent}</div>
                                 )}
+                                {headlineContent}
                                 {titleContent}
                             </>
                         )}