1 files changed, 11 insertions, 6 deletions
diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
index 7d24c8f..962b2d4 100644
--- a/apps/website/src/components/base/Header.astro
+++ b/apps/website/src/components/base/Header.astro
@@ -16,16 +16,21 @@ type Headers = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 interface Props extends HTMLAttributes<Headers> {
 	size?: keyof typeof sizes
 	align?: 'left' | 'center' | 'right' | 'inherit'
+	inheritSize?: boolean
 }
 
 const {
 	size = 'lg',
 	align = 'inherit',
+	inheritSize = false,
 	...attr
 } = Astro.props;
 const Element = sizes[size] as any; // Unfortunately gotta do this
 
 let className: string | string[] = [];
+if (!inheritSize)
+	className.push('header');
+
 if (align !== 'inherit')
 	className.push(`text-${align}`);
 
@@ -43,7 +48,7 @@ className = className.join(' ');
 </Element>
 
 <style>
-    h1 {
+    h1.header {
 		font-size: theme("fontSize.header-lg");
 		&.page-header {
 			font-size: theme("fontSize.header-page");
@@ -51,7 +56,7 @@ className = className.join(' ');
         font-weight: 600;
     }
 
-    h2 {
+    h2.header {
         font-size: theme("fontSize.header");
 		&.page-header {
 			font-size: theme("fontSize.header-page");
@@ -59,22 +64,22 @@ className = className.join(' ');
         font-weight: 600;
     }
 
-    h3 {
+    h3.header {
         font-size: theme("fontSize.header-sm");
         font-weight: 600;
     }
 
-    h4 {
+    h4.header {
         font-size: theme("fontSize.body-lg");
         font-weight: 500;
     }
 
-    h5 {
+    h5.header {
         font-size: theme("fontSize.body");
         font-weight: 500;
     }
 
-    h6 {
+    h6.header {
         font-size: theme("fontSize.body-sm");
         font-weight: 500;
     }