diff --git a/quartz.layout.ts b/quartz.layout.ts
index 4a78256aa..118708d64 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -21,6 +21,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.ArticleTitle(),
     Component.ContentMeta(),
     Component.TagList(),
+    Component.Banner(),
   ],
   left: [
     Component.PageTitle(),
diff --git a/quartz/components/Banner.tsx b/quartz/components/Banner.tsx
new file mode 100644
index 000000000..d9dee32ed
--- /dev/null
+++ b/quartz/components/Banner.tsx
@@ -0,0 +1,28 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import style from "./styles/banner.scss"
+
+export default (() => {
+  function Banner({ fileData }: QuartzComponentProps) {
+    if (fileData.frontmatter?.banner && typeof fileData.frontmatter?.banner === "string") {
+      const src = fileData.frontmatter.banner.startsWith("http")
+        ? fileData.frontmatter.banner
+        : "/" + fileData.frontmatter.banner
+      const banner_x = fileData.frontmatter.banner_x
+        ? Number(fileData.frontmatter.banner_x) * 100 + "%"
+        : "50%"
+      const banner_y = fileData.frontmatter.banner_y
+        ? Number(fileData.frontmatter.banner_y) * 100 + "%"
+        : "50%"
+      return (
+        <div class="banner">
+          <img src={src} style={"object-position: " + banner_x + " " + banner_y}></img>
+        </div>
+      )
+    } else {
+      return <></>
+    }
+  }
+  Banner.css = style
+
+  return Banner
+}) satisfies QuartzComponentConstructor
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
index 5b197941c..a4d7c5923 100644
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -20,6 +20,7 @@ import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
+import Banner from "./Banner"
 
 export {
   ArticleTitle,
@@ -44,4 +45,5 @@ export {
   NotFound,
   Breadcrumbs,
   Comments,
+  Banner,
 }
diff --git a/quartz/components/styles/banner.scss b/quartz/components/styles/banner.scss
new file mode 100644
index 000000000..51f1b498e
--- /dev/null
+++ b/quartz/components/styles/banner.scss
@@ -0,0 +1,14 @@
+.banner {
+  max-height: 300px;
+  height: auto;
+  aspect-ratio: 16/9;
+  width: 100%;
+  user-select: none;
+
+  img {
+    object-fit: cover;
+    max-width: none;
+    height: 100%;
+    width: 100%;
+  }
+}