diff --git a/blocks/deprecation/deprecation.css b/blocks/deprecation/deprecation.css
new file mode 100644
index 00000000..31c7213f
--- /dev/null
+++ b/blocks/deprecation/deprecation.css
@@ -0,0 +1,15 @@
+.deprecation {
+  padding: 10px 16px;
+  margin-bottom: 16px;
+  background-color: #d31510;
+  color: #fff;
+  border-radius: var(--image-border-radius-l);
+  font-size: var(--type-body-s-size);
+  line-height: var(--type-body-s-lh);
+}
+
+.deprecation .header {
+  font-weight: 700;
+  font-size: var(--type-body-m-size);
+  text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/blocks/deprecation/deprecation.js b/blocks/deprecation/deprecation.js
new file mode 100644
index 00000000..dfb71225
--- /dev/null
+++ b/blocks/deprecation/deprecation.js
@@ -0,0 +1,6 @@
+export default function decorate(block) {
+  const header = document.createElement('div');
+  header.className = 'header';
+  header.textContent = 'Deprecation notice';
+  block.prepend(header);
+}
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 044297c9..f5996417 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -623,6 +623,20 @@ async function loadEager(doc) {
     }
   }
 
+  // deprecation banner
+  const deprecation = getMetadata('deprecation');
+  if (deprecation) {
+    const deprecationBanner = buildBlock('deprecation', deprecation);
+    const h1 = document.querySelector('h1');
+    if (h1) {
+      // insert above title
+      h1.parentElement.insertBefore(deprecationBanner, h1);
+    } else {
+      // insert at top of page
+      document.querySelector('main > div').append(deprecationBanner);
+    }
+  }
+
   const main = doc.querySelector('main');
   if (main) {
     decorateMain(main);