diff --git a/src/card.tsx b/src/card.tsx
index 5c2f570df..7733afc06 100644
--- a/src/card.tsx
+++ b/src/card.tsx
@@ -424,10 +424,12 @@ const CardContent = ({
                             </div>
                         )}
                         {headline && (
-                            // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
                             <div
                                 ref={headlineRef}
-                                style={{order: -2, paddingBottom: 8}}
+                                style={{
+                                    order: -2,
+                                    paddingBottom: pretitle || title || subtitle || description ? 8 : 0,
+                                }}
                                 data-testid="headline"
                             >
                                 {typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
@@ -452,10 +454,12 @@ const CardContent = ({
                                 </div>
                             )}
                             {headline && (
-                                // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
                                 <div
                                     ref={headlineRef}
-                                    style={{order: -1, paddingBottom: 8}}
+                                    style={{
+                                        order: -1,
+                                        paddingBottom: pretitle || title || subtitle || description ? 8 : 0,
+                                    }}
                                     data-testid="headline"
                                 >
                                     {typeof headline === 'string' ? (
@@ -1246,8 +1250,14 @@ const DisplayCardContent = ({
                         </div>
                     )}
                     {headline && (
-                        // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
-                        <div ref={headlineRef} style={{order: -2, paddingBottom: 16}} data-testid="headline">
+                        <div
+                            ref={headlineRef}
+                            style={{
+                                order: -2,
+                                paddingBottom: pretitle || title || subtitle || description ? 16 : 0,
+                            }}
+                            data-testid="headline"
+                        >
                             {headline}
                         </div>
                     )}
@@ -1265,8 +1275,14 @@ const DisplayCardContent = ({
                         </div>
                     )}
                     {headline && (
-                        // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
-                        <div ref={headlineRef} style={{order: -1, paddingBottom: 16}} data-testid="headline">
+                        <div
+                            ref={headlineRef}
+                            style={{
+                                order: -1,
+                                paddingBottom: pretitle || title || subtitle || description ? 16 : 0,
+                            }}
+                            data-testid="headline"
+                        >
                             {headline}
                         </div>
                     )}
diff --git a/src/community/advanced-data-card.tsx b/src/community/advanced-data-card.tsx
index 4c35f89b2..8aba0fbed 100644
--- a/src/community/advanced-data-card.tsx
+++ b/src/community/advanced-data-card.tsx
@@ -108,8 +108,13 @@ const CardContent = ({
                         </div>
                     )}
                     {headline && (
-                        // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
-                        <div ref={headlineRef} style={{order: -2, paddingBottom: 4}}>
+                        <div
+                            ref={headlineRef}
+                            style={{
+                                order: -2,
+                                paddingBottom: pretitle || title || subtitle || description ? 4 : 0,
+                            }}
+                        >
                             {typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
                         </div>
                     )}
@@ -131,8 +136,13 @@ const CardContent = ({
                         </div>
                     )}
                     {headline && (
-                        // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
-                        <div ref={headlineRef} style={{order: -1, paddingBottom: 4}}>
+                        <div
+                            ref={headlineRef}
+                            style={{
+                                order: -1,
+                                paddingBottom: pretitle || title || subtitle || description ? 4 : 0,
+                            }}
+                        >
                             {typeof headline === 'string' ? <Tag type="promo">{headline}</Tag> : headline}
                         </div>
                     )}
diff --git a/src/header.tsx b/src/header.tsx
index 149e05b1a..95c1730f7 100644
--- a/src/header.tsx
+++ b/src/header.tsx
@@ -88,8 +88,10 @@ 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">
+        <div
+            style={{paddingBottom: pretitle || title || description ? 8 : 0, order: -1}}
+            data-testid="headline"
+        >
             {headline}
         </div>
     ) : undefined;
@@ -107,7 +109,7 @@ export const Header = ({
                                 )}
                                 {headlineContent}
                                 {pretitleContent && (
-                                    <div style={{paddingBottom: pretitle || description ? 8 : 0, order: -1}}>
+                                    <div style={{paddingBottom: title || description ? 8 : 0, order: -1}}>
                                         {pretitleContent}
                                     </div>
                                 )}
diff --git a/src/hero.tsx b/src/hero.tsx
index 3fdaee344..a4c3dae3c 100644
--- a/src/hero.tsx
+++ b/src/hero.tsx
@@ -92,8 +92,10 @@ const HeroContent = ({
     ) : 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}}>
+        <div
+            data-testid="headline"
+            style={{paddingBottom: pretitle || title || description ? 16 : 0, order: -1}}
+        >
             {headline}
         </div>
     ) : undefined;