diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
index b378805af6..425a793b3e 100644
--- a/layouts/blog/baseof.html
+++ b/layouts/blog/baseof.html
@@ -19,6 +19,14 @@
             {{ partial "taxonomy_terms_clouds.html" . }}
           </aside>
           <main class="col-12 col-md-9 col-xl-8 ps-md-5 pe-md-4" role="main">
+            {{ if .Page.Params.banner }}
+              {{ if .Page.Params.banner_file }}
+                {{ $bannerfile := printf "hooks/%s" $.Page.Params.banner_file }}
+                {{ partial $bannerfile . }}
+              {{ else }}
+                {{ partial "hooks/banner.html" . }}
+              {{ end }}
+            {{ end }}
             {{ with .CurrentSection.OutputFormats.Get "rss" -}}
             <a class="td-rss-button" title="RSS" href="{{ .RelPermalink | safeURL }}" target="_blank" rel="noopener">
               <i class="fa-solid fa-rss" aria-hidden="true"></i>
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index 210b6af52a..d11990bb61 100644
--- a/layouts/docs/baseof.html
+++ b/layouts/docs/baseof.html
@@ -20,6 +20,14 @@
           </aside>
           <main class="col-12 col-md-9 col-xl-8 ps-md-5" role="main">
             {{ partial "version-banner.html" . }}
+            {{ if .Page.Params.banner }}
+              {{ if .Page.Params.banner_file }}
+                {{ $bannerfile := printf "hooks/%s" $.Page.Params.banner_file }}
+                {{ partial $bannerfile . }}
+              {{ else }}
+                {{ partial "hooks/banner.html" . }}
+              {{ end }}
+            {{ end }}
             {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
             {{ block "main" . }}{{ end }}
           </main>
diff --git a/userguide/content/en/docs/adding-content/banners.md b/userguide/content/en/docs/adding-content/banners.md
new file mode 100644
index 0000000000..81ef087ec9
--- /dev/null
+++ b/userguide/content/en/docs/adding-content/banners.md
@@ -0,0 +1,26 @@
+---
+title: "Banners"
+date: 2024-02-22
+weight: 12
+description: >
+   Add a banner above the page content.
+---
+
+You can add custom banners above the page content of documentation and blog pages.
+
+To display the banner, you have to:
+
+1. Create a file in your project called `layouts/partials/hooks/banner.html`
+1. Edit the file to add the content of the banner. You can use HTML code, or anything that [Hugo partial templates](https://gohugo.io/templates/partials/) support. For example:
+
+    ```html
+    <div class="pageinfo pageinfo-primary">
+      <p>This is a simple banner that appears if you set <code>banner</code> to <code>yes</code> in the front matter of the page.</p>
+    </div>
+    ```
+
+1. Set the `banner` option to `yes` in the front matter of the page you want the banner on.
+
+    To apply the banner to multiple pages, you can also [cascade](https://gohugo.io/content-management/front-matter/#cascade) the `banner` value.
+
+If you want to use multiple different banners in your docs, you can create multiple separate banner files called `layouts/partials/hooks/<custom-banner-filename>`, and set the `banner` option to `yes`, and the `banner_file` option to `<custom-banner-filename>` in the front matter to display the specified file as banner. Note that currently only one banner can be displayed on a page: if you have both `banner` and `banner_class` set, only `banner_class` takes effect.