+ {children}
+
+ );
+}
diff --git a/components/typography/h1.tsx b/components/typography/h1.tsx
new file mode 100644
index 00000000..fabe2f15
--- /dev/null
+++ b/components/typography/h1.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+ children: ReactNode | string;
+ className?: string;
+}
+
+export default function H1({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/typography/h2.tsx b/components/typography/h2.tsx
new file mode 100644
index 00000000..6032b4a9
--- /dev/null
+++ b/components/typography/h2.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+ children: ReactNode | string;
+ className?: string;
+}
+
+export default function H2({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/typography/h3.tsx b/components/typography/h3.tsx
new file mode 100644
index 00000000..5d51c8c4
--- /dev/null
+++ b/components/typography/h3.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+ children: ReactNode | string;
+ className?: string;
+}
+
+export default function H3({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/typography/h4.tsx b/components/typography/h4.tsx
new file mode 100644
index 00000000..18009ff2
--- /dev/null
+++ b/components/typography/h4.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+ children: ReactNode | string;
+ className?: string;
+}
+
+export default function H4({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/typography/h5.tsx b/components/typography/h5.tsx
new file mode 100644
index 00000000..58680422
--- /dev/null
+++ b/components/typography/h5.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+ children: ReactNode | string;
+ className?: string;
+}
+
+export default function H5({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/typography/inline-code.tsx b/components/typography/inline-code.tsx
new file mode 100644
index 00000000..391ff342
--- /dev/null
+++ b/components/typography/inline-code.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+ children: ReactNode | string;
+ className?: string;
+}
+
+export default function InlineCode({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/typography/large.tsx b/components/typography/large.tsx
new file mode 100644
index 00000000..60f775ed
--- /dev/null
+++ b/components/typography/large.tsx
@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+ children: ReactNode | string;
+ className?: string;
+}
+
+export default function Large({ children, className }: Props) {
+ return (
+
{children}
+ );
+}
diff --git a/components/typography/lead.tsx b/components/typography/lead.tsx
new file mode 100644
index 00000000..03eae341
--- /dev/null
+++ b/components/typography/lead.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+ children: ReactNode | string;
+ className?: string;
+}
+
+export default function Lead({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/typography/muted.tsx b/components/typography/muted.tsx
new file mode 100644
index 00000000..9d41bcf5
--- /dev/null
+++ b/components/typography/muted.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+ children: ReactNode | string;
+ className?: string;
+}
+
+export default function Muted({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/typography/p.tsx b/components/typography/p.tsx
new file mode 100644
index 00000000..0d21b416
--- /dev/null
+++ b/components/typography/p.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+ children: ReactNode | string;
+ className?: string;
+}
+
+export default function P({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/typography/small.tsx b/components/typography/small.tsx
new file mode 100644
index 00000000..fed7583b
--- /dev/null
+++ b/components/typography/small.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/utils';
+
+interface Props {
+ children: ReactNode | string;
+ className?: string;
+}
+
+export default function Small({ children, className }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/components/ui/base-card.tsx b/components/ui/base-card.tsx
index 398107d7..44d2d847 100644
--- a/components/ui/base-card.tsx
+++ b/components/ui/base-card.tsx
@@ -10,6 +10,7 @@ import { UrlObject } from 'url';
import Link from 'next/link';
+import P from '@/components/typography/p';
import Image from '@/components/ui/image';
import { Label } from '@/components/ui/label';
import { cn } from '@/utils';
@@ -79,13 +80,29 @@ const Component = forwardRef(
{children}
{(title || description) && (
-