diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index 17e2fd4e88..5a45cd769b 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -1,10 +1,10 @@
export * from "./async-actions";
export * from "./avatar";
-export * from "./badge";
export * from "./badge-list";
+export * from "./badge";
export * from "./banner";
-export * from "./button";
export * from "./breadcrumbs";
+export * from "./button";
export * from "./callout";
export * from "./checkbox";
export * from "./color-password";
@@ -16,8 +16,9 @@ export * from "./link";
export * from "./menu";
export * from "./multi-select";
export * from "./navigation";
+export * from "./radio-button";
export * from "./table";
export * from "./tabs";
export * from "./toggle-group";
-export * from "./radio-button";
+export * from "./typography";
export * from "./utils/i18n-mock.service";
diff --git a/libs/components/src/stories/typography.stories.mdx b/libs/components/src/stories/typography.stories.mdx
new file mode 100644
index 0000000000..f270e230f5
--- /dev/null
+++ b/libs/components/src/stories/typography.stories.mdx
@@ -0,0 +1,59 @@
+import { Meta, Story, Source } from "@storybook/addon-docs";
+
+
+
+# Typography
+
+
+
+```html
+
H1
+```
+
+
+
+```html
+H2
+```
+
+
+
+```html
+H3
+```
+
+
+
+```html
+H4
+```
+
+
+
+```html
+H5
+```
+
+
+
+```html
+H6
+```
+
+
+
+```html
+Body 1
+```
+
+
+
+```html
+Body 2
+```
+
+
+
+```html
+
Helper Text
+```
diff --git a/libs/components/src/typography/index.ts b/libs/components/src/typography/index.ts
new file mode 100644
index 0000000000..8ee95a2ae4
--- /dev/null
+++ b/libs/components/src/typography/index.ts
@@ -0,0 +1 @@
+export * from "./typography.module";
diff --git a/libs/components/src/typography/typography.directive.ts b/libs/components/src/typography/typography.directive.ts
new file mode 100644
index 0000000000..69dfd903af
--- /dev/null
+++ b/libs/components/src/typography/typography.directive.ts
@@ -0,0 +1,26 @@
+import { Directive, HostBinding, Input } from "@angular/core";
+
+type TypographyType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "helper";
+
+const styles: Record = {
+ h1: ["tw-text-3xl", "tw-font-semibold", "tw-mb-2"],
+ h2: ["tw-text-2xl", "tw-font-semibold", "tw-mb-2"],
+ h3: ["tw-text-xl", "tw-font-semibold", "tw-mb-2"],
+ h4: ["tw-text-lg", "tw-font-semibold", "tw-mb-2"],
+ h5: ["tw-text-base", "tw-font-semibold", "tw-mb-2"],
+ h6: ["tw-text-sm", "tw-font-semibold", "tw-mb-2"],
+ body1: ["tw-text-base"],
+ body2: ["tw-text-sm"],
+ helper: ["tw-text-xs"],
+};
+
+@Directive({
+ selector: "[bitTypography]",
+})
+export class TypographyDirective {
+ @Input("bitTypography") bitTypography: TypographyType;
+
+ @HostBinding("class") get classList() {
+ return styles[this.bitTypography];
+ }
+}
diff --git a/libs/components/src/typography/typography.module.ts b/libs/components/src/typography/typography.module.ts
new file mode 100644
index 0000000000..7ee6690636
--- /dev/null
+++ b/libs/components/src/typography/typography.module.ts
@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { TypographyDirective } from "./typography.directive";
+
+@NgModule({
+ imports: [CommonModule],
+ exports: [TypographyDirective],
+ declarations: [TypographyDirective],
+})
+export class TypographyModule {}
diff --git a/libs/components/src/typography/typography.stories.ts b/libs/components/src/typography/typography.stories.ts
new file mode 100644
index 0000000000..2ae81ec8a6
--- /dev/null
+++ b/libs/components/src/typography/typography.stories.ts
@@ -0,0 +1,70 @@
+import { Meta, Story } from "@storybook/angular";
+
+import { TypographyDirective } from "./typography.directive";
+
+export default {
+ title: "Component Library/Typography",
+ component: TypographyDirective,
+ args: {
+ bitTypography: "body1",
+ },
+} as Meta;
+
+const Template: Story = (args) => ({
+ props: args,
+ template: `{{text}}`,
+});
+
+export const H1 = Template.bind({});
+H1.args = {
+ bitTypography: "h1",
+ text: "h1. Page Title",
+};
+
+export const H2 = Template.bind({});
+H2.args = {
+ bitTypography: "h2",
+ text: "h2. Page Section",
+};
+
+export const H3 = Template.bind({});
+H3.args = {
+ bitTypography: "h3",
+ text: "h3. Page Section",
+};
+
+export const H4 = Template.bind({});
+H4.args = {
+ bitTypography: "h4",
+ text: "h4. Page Section",
+};
+
+export const H5 = Template.bind({});
+H5.args = {
+ bitTypography: "h5",
+ text: "h5. Page Section",
+};
+
+export const H6 = Template.bind({});
+H6.args = {
+ bitTypography: "h6",
+ text: "h6. Page Section",
+};
+
+export const Body1 = Template.bind({});
+Body1.args = {
+ bitTypography: "body1",
+ text: "Body 1",
+};
+
+export const Body2 = Template.bind({});
+Body2.args = {
+ bitTypography: "body2",
+ text: "Body 2",
+};
+
+export const Helper = Template.bind({});
+Helper.args = {
+ bitTypography: "helper",
+ text: "Helper Text",
+};