diff --git a/src/components/Dialog.js b/src/components/Dialog.js
index fd7b5355..044be427 100644
--- a/src/components/Dialog.js
+++ b/src/components/Dialog.js
@@ -135,7 +135,7 @@ export function Dialog({
       role={role}
       tabIndex={-1}
     >
-      <header>
+      <header className="Hyp-Dialog__header">
         {icon && (
           <div className="Hyp-Dialog__header-icon">
             <SvgIcon name={icon} title={title} data-testid="header-icon" />
diff --git a/src/components/Panel.js b/src/components/Panel.js
index c0d519b8..e1a99c33 100644
--- a/src/components/Panel.js
+++ b/src/components/Panel.js
@@ -33,7 +33,7 @@ export function Panel({ children, icon, onClose, title }) {
         'Hyp-Panel--closeable': withCloseButton,
       })}
     >
-      <header>
+      <header className="Hyp-Panel__header">
         {icon && (
           <div className="Hyp-Panel__header-icon">
             <SvgIcon name={icon} title={title} />
diff --git a/src/pattern-library/components/patterns/PanelPatterns.js b/src/pattern-library/components/patterns/PanelPatterns.js
index b6ec9f8c..e4bce134 100644
--- a/src/pattern-library/components/patterns/PanelPatterns.js
+++ b/src/pattern-library/components/patterns/PanelPatterns.js
@@ -41,7 +41,7 @@ export default function OrganismPatterns() {
           </p>
           <Library.Demo withSource>
             <div className="hyp-panel">
-              <header>
+              <header className="hyp-panel__header">
                 <h2 className="hyp-panel__title">
                   This is a panel title in a panel header
                 </h2>
@@ -61,7 +61,7 @@ export default function OrganismPatterns() {
           </p>
           <Library.Demo withSource>
             <div className="hyp-panel hyp-panel--closeable">
-              <header>
+              <header className="hyp-panel__header">
                 <h2 className="hyp-panel__title">
                   Panel title on a closeable panel
                 </h2>
@@ -83,7 +83,7 @@ export default function OrganismPatterns() {
           </p>
           <Library.Demo withSource>
             <div className="hyp-panel hyp-panel--closeable">
-              <header>
+              <header className="hyp-panel__header">
                 <h2 className="hyp-panel__title">Panel title</h2>
                 <div className="hyp-panel__close">
                   <IconButton icon="cancel" title="Close" />
diff --git a/styles/mixins/patterns/_panels.scss b/styles/mixins/patterns/_panels.scss
index 963b3c7d..d5d10c10 100644
--- a/styles/mixins/patterns/_panels.scss
+++ b/styles/mixins/patterns/_panels.scss
@@ -25,8 +25,7 @@ $-color-brand: var.$color-brand;
     @include atoms.border;
   }
 
-  & > header,
-  &__header {
+  & > &__header {
     @include layout.row($align: center);
     @include layout.horizontal-spacing;
     @include atoms.border(bottom);
@@ -45,13 +44,11 @@ $-color-brand: var.$color-brand;
   // When there is an icon-only close button, tighten up affordances around the
   // header as the button will have more height than the heading text. This has the
   // effect of making the vertical space around the header look more even.
-  &--closeable > header,
   &--closeable &__header {
     padding-bottom: var.space(2);
     margin-top: -1 * var.space(3);
   }
 
-  &--closeable > header &__close,
   &--closeable > &__header &__close {
     // TODO replace font-sizing with appropriate approach when typography layer
     // available.